Hi

I read all post below :

http://forum.bytesforall.com/showthr...ht=change+icon
http://forum.bytesforall.com/showthr...ht=change+icon
http://forum.bytesforall.com/showthr...ht=change+icon
http://forum.bytesforall.com/showthr...ht=change+icon
http://forum.bytesforall.com/showthr...ht=change+icon

and do ... but nothing happened :

my permalinks is in "/%postname%/" post name also i change it for test but no thing happened ...

I delete cache of browser but no thing happened ...


let's :
I have a meue1 with 4 link

1. in "Using Menu Icons" i see in "CSS for icons in "Menu 1"" this code :

/* Part 1- for default state: */
#menu1 .item-%d8%a7%d8%af%d8%a7%d9%85%d9%87 > a > i { background-position: 0px 0px; }
#menu1 .page-%d8%a2%d8%b1%d8%b4%db%8c%d9%88-%d8%a7%d8%ae%d8%a8%d8%a7%d8%b1-%d8%b3%d8%a7%db%8c%d8%aa > a > i { background-position: 0px -24px; }
#menu1 .page-%d8%af%d9%84-%d9%86%d9%88%d8%b4%d8%aa%d9%87-%d9%87%d8%a7 > a > i { background-position: 0px -48px; }
#menu1 .page-%d9%be%d8%b1%d8%b3%d8%b4-%d9%88-%d9%be%d8%a7%d8%b3%d8%ae > a > i { background-position: 0px -72px; }
/* Part 2 - for hover state: */
#menu1 .item-%d8%a7%d8%af%d8%a7%d9%85%d9%87:hover > a > i, #menu1 .item-%d8%a7%d8%af%d8%a7%d9%85%d9%87.active > a > i { background-position: -24px 0px; }
#menu1 .page-%d8%a2%d8%b1%d8%b4%db%8c%d9%88-%d8%a7%d8%ae%d8%a8%d8%a7%d8%b1-%d8%b3%d8%a7%db%8c%d8%aa:hover > a > i, #menu1 .page-%d8%a2%d8%b1%d8%b4%db%8c%d9%88-%d8%a7%d8%ae%d8%a8%d8%a7%d8%b1-%d8%b3%d8%a7%db%8c%d8%aa.active > a > i { background-position: -24px -24px; }
#menu1 .page-%d8%af%d9%84-%d9%86%d9%88%d8%b4%d8%aa%d9%87-%d9%87%d8%a7:hover > a > i, #menu1 .page-%d8%af%d9%84-%d9%86%d9%88%d8%b4%d8%aa%d9%87-%d9%87%d8%a7.active > a > i { background-position: -24px -48px; }
#menu1 .page-%d9%be%d8%b1%d8%b3%d8%b4-%d9%88-%d9%be%d8%a7%d8%b3%d8%ae:hover > a > i, #menu1 .page-%d9%be%d8%b1%d8%b3%d8%b4-%d9%88-%d9%be%d8%a7%d8%b3%d8%ae.active > a > i { background-position: -24px -72px; }

as in example I should change second number . so new code will be this :

/* Part 1- for default state: */
#menu1 .item-%d8%a7%d8%af%d8%a7%d9%85%d9%87 > a > i { background-position: 0px -2376px; }
#menu1 .page-%d8%a2%d8%b1%d8%b4%db%8c%d9%88-%d8%a7%d8%ae%d8%a8%d8%a7%d8%b1-%d8%b3%d8%a7%db%8c%d8%aa > a > i { background-position: 0px -2376px; }
#menu1 .page-%d8%af%d9%84-%d9%86%d9%88%d8%b4%d8%aa%d9%87-%d9%87%d8%a7 > a > i { background-position: 0px -2376px; }
#menu1 .page-%d9%be%d8%b1%d8%b3%d8%b4-%d9%88-%d9%be%d8%a7%d8%b3%d8%ae > a > i { background-position: 0px -2376px; }
/* Part 2 - for hover state: */
#menu1 .item-%d8%a7%d8%af%d8%a7%d9%85%d9%87:hover > a > i, #menu1 .item-%d8%a7%d8%af%d8%a7%d9%85%d9%87.active > a > i { background-position: 0px -2376px; }
#menu1 .page-%d8%a2%d8%b1%d8%b4%db%8c%d9%88-%d8%a7%d8%ae%d8%a8%d8%a7%d8%b1-%d8%b3%d8%a7%db%8c%d8%aa:hover > a > i, #menu1 .page-%d8%a2%d8%b1%d8%b4%db%8c%d9%88-%d8%a7%d8%ae%d8%a8%d8%a7%d8%b1-%d8%b3%d8%a7%db%8c%d8%aa.active > a > i { background-position: -24px -2376px; }
#menu1 .page-%d8%af%d9%84-%d9%86%d9%88%d8%b4%d8%aa%d9%87-%d9%87%d8%a7:hover > a > i, #menu1 .page-%d8%af%d9%84-%d9%86%d9%88%d8%b4%d8%aa%d9%87-%d9%87%d8%a7.active > a > i { background-position: -24px -2376px; }
#menu1 .page-%d9%be%d8%b1%d8%b3%d8%b4-%d9%88-%d9%be%d8%a7%d8%b3%d8%ae:hover > a > i, #menu1 .page-%d9%be%d8%b1%d8%b3%d8%b4-%d9%88-%d9%be%d8%a7%d8%b3%d8%ae.active > a > i { background-position: -24px -2376px; }

I change all second number to "-2376px"

now I copy this code to "menus_menu1.css" and save it but nothing happened ... just show star

what is your permalink set to?

Originally Posted by juggledad

what is your permalink set to?

post name : /%postname%/

also I try other and check but no thing happened

what is your url?

Originally Posted by juggledad

what is your url?

it's in localhost in my PC . I cant use it in my site until I change Upload folder of theme.

http://forum.bytesforall.com/showthread.php?t=19116

try changing the permalinks to the default then look at the menu css and see what it looks like.

Originally Posted by juggledad

try changing the permalinks to the default then look at the menu css and see what it looks like.

I do it but no thing happened ...

Where is:

menus_menu1.css

Or do i create? and if I create where do I place?

It's in the CSS Files section of the theme options.

<Appearance =>Montezuma Options=>CSS Settings=>Using Menu Icons> looks like this:

[font="Arial"][size="7"][size="2"][size="3"]/* Part 1- for default state: */
#menu1 .about-the-library > a > i { background-position: 0px 0px; }
#menu1 .contact-us > a > i { background-position: 0px -24px; }
#menu1 .help > a > i { background-position: 0px -48px; }
#menu1 .finding-books-and-articles > a > i { background-position: 0px -72px; }
....


<Appearance =>Montezuma Options=>CSS Files=>menus_menu1.css> looks like this:
#menu1 .page-blog > a > i { background-position: 0px 0px ; }
#menu1 .page-contact-us > a > i { background-position: 0px -24px; }
#menu1 .page-features > a > i { background-position: 0px -48px ; }
#menu1 .page-level-1 > a > i { background-position: 0px -72px; }
#menu1 .page-news > a > i { background-position: 0px -96px }
#menu1 .page-parent-page > a > i { background-position: 0px -120px; }
#menu1 .page-support > a > i { background-position: 0px -144px; }
#menu1 .page-wordpress-themes > a > i { background-position: 0px -168px; }
#menu1 .page-blog:hover > a > i { background-position: -24px 0px ; }
#menu1 .page-contact-us:hover > a > i { background-position: -24px -24px; }
#menu1 .page-features:hover > a > i { background-position: -24px -48px ; }
#menu1 .page-level-1:hover > a > i { background-position: -24px -72px; }
#menu1 .page-news:hover > a > i { background-position: -24px -96px }
#menu1 .page-parent-page:hover > a > i { background-position: -24px -120px; }
#menu1 .page-support:hover > a > i { background-position: -24px -144px; }
#menu1 .page-wordpress-themes:hover > a > i { background-position: -24px -168px; }


Do i merely copy my edits from <Using Menu Icons> and paste over section in <menus_menu1.css>?
If so, that does not work.
I have also tried adding/appending to <menus_menu1.css> and did not work.
Finally, I have edited <menus_menu1.css> and works just for the contact-us page.

Please advise.

Thank you.

copying edits from <Using Menu Icons> and pasting over section in <menus_menu1.css> works for me.

Not for me. As an experiment, I changed all to -144px, but still appears as 0px:

/* Part 1- for default state: */
#menu1 .about-the-library > a > i { background-position: -144px -144px; }
#menu1 .contact-us > a > i { background-position: -144px -144px; }
#menu1 .help > a > i { background-position: -144px -144px; }
#menu1 .finding-books-and-articles > a > i { background-position: -144px -144px; }
#menu1 .resources-and-tools > a > i { background-position: -144px -144px; }
#menu1 .using-the-library > a > i { background-position: -144px -144px; }
/* Part 2 - for hover state: */
#menu1 .about-the-library:hover > a > i, #menu1 .about-the-library.active > a > i { background-position: -144px -144px }
#menu1 .contact-us:hover > a > i, #menu1 .contact-us.active > a > i { background-position: -144px -144px; }
#menu1 .help:hover > a > i, #menu1 .help.active > a > i { background-position: -144px -144px; }
#menu1 .finding-books-and-articles:hover > a > i, #menu1 .finding-books-and-articles.active > a > i { background-position: -144px -144px; }
#menu1 .resources-and-tools:hover > a > i, #menu1 .resources-and-tools.active > a > i { background-position: -144px -144px; }
#menu1 .using-the-library:hover > a > i, #menu1 .using-the-library.active > a > i { background-position: -144px -144px; }

I'm having the exact same problem, except NONE of the icons are showing up, not even the star. I tried changing the URL from the default to the full path, but that didn't help, either.

I'm wondering if it may be a caching problem, because changes I've made to other elements, such as colors and fonts are taking hours to show up, even after I clear the cache. I even tried turning off Quick Cache plugin and clearing my browser cache, but it didn't help.

Any suggestions?

Not a cache issue because I work with several browsers over several cpus.

without knowing the site URL it is hard to say.

Used to Atahualpa - struggling a little with Montezuma. In the backend it says something like - replace the numbers using the numbers from the listed icons and then shows the two items of code to put the icon number into - where does this number go?

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

I've tried entering the icons number in each background position second number - ie instead of 0px, now 2184px - this has no effect at all - still showing stars.

Baffled

Cheers,

Mike

What's your site's URL? It would be easier to see what's going on if we could look at it.

And what is the actual class that you are using as your selector in your CSS? I hope it's not .sample-page. It should be something like .page-about, or something similar to the menu text (you can use Firebug to see what the classes are for each menu1 <li>).

Doh!

Thanks for that. Made a little progress.

Currently have this:

/* Part 1- for default state: */
#menu1 .about-first-in-the-omelette-queue > a > i { background-position: 0px -2064px; }
#menu1 .todays-smile > a > i { background-position: 0px -2064px; }
/* Part 2 - for hover state: */
#menu1 .about-first-in-the-omelette-queue:hover > a > i, #menu1 .about-first-in-the-omelette-queue.active > a > i { background-position: -24px -2088px; }
#menu1 .todays-smile:hover > a > i, #menu1 .todays-smile.active > a > i { background-position: -24px -2088px; }

The above code makes no difference - stars only. The top menu (with only 2 items is menu1) - here is the link (only a demo page - work in progress) - http://www.wrightplace.co.uk/view

Also - do I have to set the icon for each individual link in the menu?

Sorry to be a bit dim, am I missing something obvious.

Cheers,

Mike

You're almost there. If you use Firebug, you can see what the classes are for the different menu list items (<li>).

For your two menu items, the classes are page-about-first-in-the-omelette-queue and page-todays-smile, so you just need to add the page- to the front of your selectors:

#menu1 .page-about-first-in-the-omelette-queue > a > i { background-position: 0px -2064px; }

Also - do I have to set the icon for each individual link in the menu?

No, if you look just above that section, you'll see that there are default rules that will display a star if a class selector hasn't been specified (which why your menu items are currently showing up as stars). If you want to hide the icon for a specific menu item, you can use display: none; instead of the background-position rule.

Sorry to be a bit dim, am I missing something obvious.

I think many of us (myself included) struggled with the menu icons at first, but once you understand what's going on, it's easy.

Hi,

Many thanks for that - yep- I've got the icons to change now. My only remaining problem is that you can see the other icons when the icons change from white to blue.

Is there any way to make the transition smooth - showing only the one icon sliding to it's new coloured one. Hope that sounds reasonable.

Many thanks for your help,

Cheers,

Mike

My only remaining problem is that you can see the other icons when the icons change from white to blue.

Hmm, I don't see that same problem, all icons slid from gray to blue without any other intervening icons, in either the menu icons or the sidebar icons, and I looked at it in Chrome, Firefox, Safari, Opera, and IE (although in IE9, there's no "sliding" effect, it just changes color). I seem to remember seeing it on some other site, but I forget what the reason was.

Originally Posted by wmike1503

Hi,

Many thanks for that - yep- I've got the icons to change now. My only remaining problem is that you can see the other icons when the icons change from white to blue.

Is there any way to make the transition smooth - showing only the one icon sliding to it's new coloured one. Hope that sounds reasonable.

Many thanks for your help,

Cheers,

Mike

I got that when I edited the icon...and forgot to add the 'px' the the end of the number. Added it, and problem fixed!