Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Montezuma Theme »

[SOLVED] How to set different icon for each page in top menu?


  #1  
Old Mar 8, 2013, 01:40 PM
RitaUX
 
6 posts · Mar 2013
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?

Last edited by RitaUX; Mar 9, 2013 at 12:45 PM.
  #2  
Old Mar 8, 2013, 02:02 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
Where did .bio and .contact come from? That doesn't look right to me.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old Mar 8, 2013, 02:35 PM
RitaUX
 
6 posts · Mar 2013
.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.
  #4  
Old Mar 8, 2013, 03:28 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #5  
Old Mar 9, 2013, 04:46 AM
juggledad's Avatar
juggledad
 
23,598 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
the url you provided gets a 'Server not found' error

what are your permalinks set to?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #6  
Old Mar 9, 2013, 12:46 PM
RitaUX
 
6 posts · Mar 2013
Hi, I've edited my first post, there was a misspell in the address.

Last edited by RitaUX; Mar 9, 2013 at 12:53 PM.
  #7  
Old Mar 9, 2013, 02:23 PM
juggledad's Avatar
juggledad
 
23,598 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Quote:
#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?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #8  
Old Mar 9, 2013, 04:21 PM
RitaUX
 
6 posts · Mar 2013
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!
  #9  
Old Mar 9, 2013, 04:25 PM
juggledad's Avatar
juggledad
 
23,598 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
where is '.bio' in your css?
since you don't identify the exact <li> it applies to ALL <li>'s
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #10  
Old Mar 9, 2013, 04:45 PM
RitaUX
 
6 posts · Mar 2013
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?
  #11  
Old Mar 9, 2013, 05:05 PM
RitaUX
 
6 posts · Mar 2013
Ok, I've solved it.

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

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] change icon on menu 1 when you use a category instead of an static page esbrinartot Montezuma Theme 4 Dec 15, 2012 08:44 AM
[SOLVED] Centering menu titles vertically &amp; placing a dot/asterisk/icon between menu hnbrace Page & Category Menu Bars 8 Jun 28, 2011 05:07 PM
How to: Delete Comments Tab; Move Search Bar; Move RSS icon to Menu Page bar frugalmommytoday Header configuration & styling 1 Oct 14, 2010 08:50 AM
Feed Icon in page menu bar kkk RSS, Feeds & Subscribing 4 Nov 28, 2009 05:18 PM
How do I add an icon to a page menu link in page menu bar? bcorrigan Page & Category Menu Bars 9 Apr 6, 2009 03:35 PM


All times are GMT -6. The time now is 06:11 AM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.