2.3.1: A "How To..." Road Map...(NO QUESTIONS, JUST HOW TO'S PLEASE)

[ErikMM 10]

71. (or 34 update). Product Attributes for 2.3.x (works on 2.3.3) that are not laborious. Awesome. here: http://addons.oscommerce.com/info/4063

[ErikMM 10]

72. Store logo swap image on hover. When customers hover over your store logo, this will swap the logo image for any other image you want, like another color of the same logo etc.. When they mouse over the logo your store's logo will disappear and be replaced by another image or different version of your logo:

 

catalog/stylesheet

#homeheaderswap:hover {
background:url(http://yourimage.png or jpg etc);background-size: 420px 68px; background-repeat:no-repeat; background-position:center;
}/*background-size only needed if you want to shrink to match store logo size--best to just do with photoshop beforehand*/


#storeLogo {
margin-top: 5px;
text-align:center
;}/*magin is up to you*/

#storeLogo:hover {
text-indent:-9999px;
}/*hides logo when hover image appears*/

 

cat/includes/header

replace this

<div id="storeLogo"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'store_logo.png', STORE_NAME) . '</a>'; ?></div>

with this

<a href="index.php" title="home" alt="link to home page"><div id="homeheaderswap"><div id="storeLogo"><?php echo tep_image(DIR_WS_IMAGES . 'store_logo.png', STORE_NAME); ?></div></div></a>

[ErikMM 10]

73. This is a simpler way to change your logo on hover as in #72, but just uses opacity:

 

just add this to your cat/stylesheet (prefrably below #storeLogo {margin-top: 5px; text-align:center;} )

#storeLogo:hover {
opacity:0.6;
}

 

you can play with opacity settings

0.1 is almost transparent, 0.9 is almost opaque

 

You can go backwards too, in other words starting with a more transparent logo (0.6), and going normal on hover

like this

#storeLogo {
margin-top: 5px; text-align:center; opacity:0.6;
}
#storeLogo:hover {
opacity:1;
}