Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Montezuma Theme (http://forum.bytesforall.com/forumdisplay.php?f=53)
-   -   change icon menu1 (http://forum.bytesforall.com/showthread.php?t=19120)

fafa Dec 13, 2012 12:14 PM

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: */
#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 :


Code:

/* 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:confused:

juggledad Dec 13, 2012 07:31 PM

what is your permalink set to?

fafa Dec 14, 2012 01:38 AM

Quote:

Originally Posted by juggledad (Post 93788)
what is your permalink set to?

post name : /%postname%/

also I try other and check but no thing happened

juggledad Dec 14, 2012 04:33 AM

what is your url?

fafa Dec 14, 2012 03:45 PM

Quote:

Originally Posted by juggledad (Post 93803)
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

juggledad Dec 14, 2012 05:43 PM

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

fafa Dec 22, 2012 01:47 PM

Quote:

Originally Posted by juggledad (Post 93864)
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 ...

gnosis Dec 27, 2012 12:15 PM

Where is:

menus_menu1.css

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

lmilesw Dec 27, 2012 01:35 PM

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

gnosis Dec 28, 2012 06:37 AM

<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.

lmilesw Dec 28, 2012 06:47 AM

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

gnosis Dec 28, 2012 06:55 AM

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

thegirlinyogapants Dec 31, 2012 03:56 PM

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?

gnosis Dec 31, 2012 05:23 PM

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

juggledad Dec 31, 2012 05:52 PM

without knowing the site URL it is hard to say.

wmike1503 Aug 7, 2013 08:56 AM

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

CrouchingBruin Aug 7, 2013 02:50 PM

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>).

wmike1503 Aug 9, 2013 10:54 AM

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

CrouchingBruin Aug 9, 2013 02:27 PM

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:

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.

Quote:

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.

wmike1503 Aug 10, 2013 02:30 AM

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

CrouchingBruin Aug 10, 2013 09:35 AM

Quote:

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.

MsShona Aug 30, 2013 05:21 AM

Quote:

Originally Posted by wmike1503 (Post 102849)
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!


All times are GMT -6. The time now is 12:35 PM.

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