2

Is it possible to tell Magento to do pick-up different CSS styles for something that appears throughout (such as the header?). For example, a website I am working on features a 'MENU' icon over an image. This image changes as different categories in the menu are hovered (using jQuery on CMS page). I want to tell it to change the color of the 'MENU' icon from say white, to black on certain images. Is this possible?

jQuery (in CMS page) for the image changing on hover:

<script type="text/javascript">// <![CDATA[
(function(){
        var backgroundImages = [
            src="{{media url="landing.jpg"}}", // default background image link
            src="{{media url="/e-store.jpg"}}", // background image for category A
            src="{{media url="/e-store.jpg"}}", // background image for category B
            src="{{media url="/home-page.jpg"}}", // background image for category C
            src="{{media url="/press.jpg"}}", // background image for category D
            src="{{media url="/contact.jpg"}}", // background image for Contact
            src="{{media url="/etc.jpg"}}", // background image for Et Cetera
        ];

        function updateBg(position){
            jQuery('.main-container').css('background-image','url('+backgroundImages[position]+')');      
        }

        jQuery(document).ready(function(){
            jQuery('.nav-0').hover(function(){updateBg(1)},function(){updateBg(0)});
            jQuery('.nav-1').hover(function(){updateBg(2)},function(){updateBg(0)});
            jQuery('.nav-2').hover(function(){updateBg(3)},function(){updateBg(0)});
            jQuery('.nav-3').hover(function(){updateBg(4)},function(){updateBg(0)});
            jQuery('.nav-4').hover(function(){updateBg(5)},function(){updateBg(0)});
            jQuery('.nav-5').hover(function(){updateBg(6)},function(){updateBg(0)});
        });        
    })();
// ]]></script>

HTML for the 'MENU':

<div class="skip-links">
            <a href="#header-nav" class="skip-link skip-nav">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
                <span class="icon"></span>
                <span class="label">MENU</span>
            </a>
</div>
</div

CSS for the 'MENU':

.skip-link.skip-nav span {
  display: block;
  position: absolute;
  height: 2px;
  width: 70%;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out; 
  transition: .25s ease-in-out;
}

.skip-link.skip-nav span:nth-child(1) {
  top: 0px;
  background: #b0b0b0;
}

.skip-link.skip-nav span:nth-child(2),.skip-link.skip-nav span:nth-child(3) {
  top: 8px;
  background: #b0b0b0;
}


.skip-link.skip-nav span:nth-child(4) {
  top: 17px;
  background: #b0b0b0;
}

.skip-link.skip-nav.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
  background: #000;
    height: 2px;
}

.skip-link.skip-nav.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  background: #000;
height: 2px; 
}

.skip-link.skip-nav.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  background: #000;
  height: 2px;
}

.skip-link.skip-nav.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
  background: #000;
  height: 2px;
}  

.skip-link.skip-nav .label {
    margin-top: -10px;
    color: #b0b0b0;
    margin-left: -50px;
    font-weight: bold;
}


.skip-link.skip-nav.open .label {
    display: none;
}
  • Why don't you implement it the same way your changing the background image? – user3450236 May 28 '15 at 9:40
  • That's what I think would be the best way, but i'm really no pro on jQuery and am not sure how to code it? – itsk2015 May 28 '15 at 23:56
  • @user3450236 would you be able to point me in the direction of coding it? Any help would be greatly appreciated. – itsk2015 May 29 '15 at 18:46
  • Well first you will to prepare the icon, im going to assume that its a .png file, so you firs thing is you will need to make copies of it with different colors. Then for later they can be used either by calling each .png file as is done with pics or you can save all the different unto a single background image and use each of them by changing the background-position attribute of the background image – user3450236 May 30 '15 at 15:16
  • It is not an image icon; it is produced using CSS code as shown above. – itsk2015 May 30 '15 at 18:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.