I'm working on my page and stumble upon some obstacles. Here's the first one:I want to define an icon from sprite set to each page in my top menu, just the way Ideafart did it:
http://ideafart.com/
Now it looks like this: http://uxjourney.co.uk
I want to set Pacman changing to ghost in 'Bio' page and ghost changing to Pacman in 'Contact' page.
For now I could only managed to set the same for two pages ;/
I've changed it in the CSS menu1:
#menu1 > li > a > i {
display: block;
width: 24px;
height: 24px;
margin: 0 auto 5px auto;
background: transparent url(%tpldir%/images/menu-icons-0090d3.png) 0 -1728px no-repeat;
}
#menu1 > li:hover > a > i {
background: transparent url(%tpldir%/images/menu-icons-0090d3.png) -24px -1752px no-repeat;
}
I tried doing it that way by pasting these below, but it didn't work at all (no icons):
#menu1 .bio > a > i { background-position: 0px -1752px; }
#menu1 .contact > a > i { background-position: 0px -1728px; }
/* Part 2 - for hover state: */
#menu1 .bio:hover > a > i, #menu1 .bio.active > a > i { background-position: -24 -1728px; }
#menu1 .contact:hover > a > i, #menu1 .contact.active > a > i { background-position: -24px -1752px; }
Could you please help me with this?
