change icon menu1
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 : Code:
/* Part 1- for default state: */ Code:
/* Part 1- for default state: */ now I copy this code to "menus_menu1.css" and save it but nothing happened ... just show star:confused: |
what is your permalink set to?
|
Quote:
also I try other and check but no thing happened |
what is your url?
|
Quote:
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.
|
Quote:
|
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: Code:
#menu1 .page-about-first-in-the-omelette-queue > a > i { background-position: 0px -2064px; } Quote:
Quote:
|
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 |
Quote:
|
Quote:
|
All times are GMT -6. The time now is 12:35 PM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.