Hi 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?

Where did .bio and .contact come from? That doesn't look right to me.

.Bio and .contact are my pages. I found these names in the CSS setting instruction for 'using menu icons'.

But as I wrote I tried pasting it (style for .bio and .contact), but the icons have disappeard, so I removed it from CSS and changed only these lines:

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;
}

But as you can see this applies to both icons and I want to set different style for each icon.

The background lines should only be in the css once for regular state and once for the hover state. Then you change the second number in the using css menu icons section where you want and then copy the code and page int the menus_menu1.css replacing the code that is there.

I am not clear on what you are doing.

the url you provided gets a 'Server not found' error

what are your permalinks set to?

Hi, I've edited my first post, there was a misspell in the address.

#menu1 > li:hover > a > i {
background: transparent url(%tpldir%/images/menu-icons-0090d3.png) -24px -1752px no-repeat;
}

skipping the 'hover' for a moment, this says for any <i> that is a child of <a> which is a child of an <li> that is a child of an element with the ID 'menu1' set this background

now ask yourself how many items on the page does this apply to?

Still I don't get it ;/ I thought it's just like I read in the instruction:

CSS for icons in "Menu 1"
Replace the second numbers and copy/paste the whole code into menus_menu1.css (see menu on the left). If you don't want the icons to change on hover you don't need the second Part 2 of the code:

/* Part 1- for default state: */
#menu1 .bio > a > i { background-position: 0px -1440px; }
#menu1 .contact > a > i { background-position: 0px -1464px; }
/* Part 2 - for hover state: */
#menu1 .bio:hover > a > i, #menu1 .bio.active > a > i { background-position: -24px 0px; }
#menu1 .contact:hover > a > i, #menu1 .contact.active > a > i { background-position: -24px -24px; }

So I guess I just have to paste the above code into the CSS and perhaps (?) delete something not to have a conflict of code. Could you tell me, where exactly should I paste it? Thank you!

where is '.bio' in your css?
since you don't identify the exact <li> it applies to ALL <li>'s

Juggledad I'm not a CSS expert, I need a clear instruction. I understand everything that you wrote, I knew it earlier - when I was asking, but I don't know how to apply style to .bio and .contact.

I think the instruction I've pasted in my previous post is really confusing. You haven't mentioned anything apart from just adding numbers (-XXpx) and copying the code into CSS.

Can you help like you're helping the complete newbie or is this forum not a suitable place for newbies?

Ok, I've solved it.

I've changed li style to: "li.page-contact" and "li.page-bio" and now it works.