|
|
|
#1
May 3, 2011, 03:58 AM
|
|
|
Hello,
I have customized my page menu with this code and it's working pretty well :
HTML Code:
/* ================================================ */
/* how to highlight parent of current page */
/* ================================================ */
ul.rMenu li.current_page_parent link,
ul.rMenu li.current_page_parent active,
ul.rMenu li.current_page_parent hover,
ul.rMenu li.current_page_parent visited,
ul.rMenu li.current_page_parent {
background: #05A505 !important;
color: #000000 !important;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */
ul.rMenu li.current-menu-parent link,
ul.rMenu li.current-menu-parent active,
ul.rMenu li.current-menu-parent hover,
ul.rMenu li.current-menu-parent visited,
ul.rMenu li.current-menu-parent {
background: #05A505 !important;
color: #000000 !important;
}
ul.rMenu li.current_page_ancestor link,
ul.rMenu li.current_page_ancestor active,
ul.rMenu li.current_page_ancestor hover,
ul.rMenu li.current_page_ancestor visited,
ul.rMenu li.current_page_ancestor {
background: #05A505 !important;
color: #000000 !important;
}
/* For CURRENT */
ul.rMenu li.current_page_item a:link,
ul.rMenu li.current_page_item a:visited,
ul.rMenu li.current_page_item a:active,
ul.rMenu li.current_page_item a:hover {
background: #05A505 !important;
color: #000000 !important;
}
/* For CURRENT */
ul.rMenu li.current-menu-item a:link,
ul.rMenu li.current-menu-item a:visited,
ul.rMenu li.current-menu-item a:active,
ul.rMenu li.current-menu-item a:hover {
background: #05A505 !important;
color: #000000 !important;
}
You can see it here --> http://bit.ly/esa8pJ
Now i want to add some small pics before the countries in the dropdown menu.
I've tried that and it works.
The problem is on mouse over and when the item is selected the pics dissapear.
HTML Code:
ul.rMenu li.menu-item-263 {
padding-left: 30px;
background: url(http://www.senojflags.com/images/national-flag-symbols/France-Flag.png) no-repeat scroll center left #05A505;
color: #000000;
}
Is that a good idea to add the pics like that or is there another way (i mean without CSS) ?
I've tried to add the pics on the MENU config directly in wordpress (by putting <img src" "> in the "Navigation Label" field. It works, but i can't place the pics exactly where i want (does not align with the text).
|
|
#2
May 3, 2011, 04:35 AM
|
 |
|
|
1,112 posts · Mar 2011
Perth, Western Australia
|
|
|
You need to add the same pic or a "hover state" pic (same size etc) to the hover state CSS
|
|
#3
May 3, 2011, 04:52 AM
|
|
|
I've tried that but it does not work the pics still dissapear:
HTML Code:
ul.rMenu li.menu-item-263 {
padding-left: 30px;
background: url(http://www.senojflags.com/images/national-flag-symbols/France-Flag.png) no-repeat scroll center left #05A505;
color: #000000;
}
ul.rMenu li.menu-item-263 hover {
padding-left: 30px;
background: url(http://www.senojflags.com/images/national-flag-symbols/France-Flag.png) no-repeat scroll center left;
}
|
|
#4
May 3, 2011, 05:42 AM
|
 |
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
|
I don't see any of that CSS in the page source - did you remove it?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
|
#5
May 3, 2011, 06:06 AM
|
|
|
|
Yes i've removed the code that does not work.
i'm gonna put it back right now if you want.
(just in case i'm using Atahualpa 3.5.3 and i have apply the 353 BUGFIX)
Last edited by Spidey; May 3, 2011 at 06:20 AM.
|
|
#6
May 3, 2011, 08:59 AM
|
|
|
|
Ok i've put the CSS part for the picture online.
|
|
#7
May 3, 2011, 09:37 AM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
try this, change your css to this
HTML Code:
div#menu1 ul.rMenu li:hover,
div#menu1 ul.rMenu li:sfhover,
ul.rMenu li.menu-item-263 {
background: url("http://www.senojflags.com/images/national-flag-symbols/France-Flag.png") no-repeat scroll left center #05A505;
when you hover over a submenu, a new set of CSS becomes effective and the background is changed due to ITS background settings.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
|
#8
May 3, 2011, 09:45 AM
|
|
|
Thanks but it does not work. I have no pics at all with that :
HTML Code:
div#menu1 ul.rMenu li:hover,
div#menu1 ul.rMenu li:sfhover,
ul.rMenu li.menu-item-263 {
background: url("http://www.senojflags.com/images/national-flag-symbols/France-Flag.png") no-repeat scroll left center #05A505;
}
|
|
#9
May 4, 2011, 06:35 AM
|
|
|
|
I understand what happen but can't find a way to override the ITS...
|
|
#10
May 4, 2011, 07:02 AM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
Use this, it needs the '!important'
HTML Code:
ul.rMenu li.menu-item-263:hover,
ul.rMenu li.menu-item-263:sfhover,
ul.rMenu li.menu-item-263 {
padding-left: 30px;
background: url(http://www.senojflags.com/images/national-flag-symbols/France-Flag.png) no-repeat scroll center left #05A505 !important;
color: #000000;
}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
|
#11
May 4, 2011, 07:13 AM
|
|
|
Maybe i miss something ... it does not work. Here is what i have :
HTML Code:
/* ================================================ */
/* how to highlight parent of current page */
/* ================================================ */
ul.rMenu li.current_page_parent link,
ul.rMenu li.current_page_parent active,
ul.rMenu li.current_page_parent hover,
ul.rMenu li.current_page_parent visited,
ul.rMenu li.current_page_parent {
background: #05A505 !important;
color: #000000 !important;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */
ul.rMenu li.current-menu-parent link,
ul.rMenu li.current-menu-parent active,
ul.rMenu li.current-menu-parent hover,
ul.rMenu li.current-menu-parent visited,
ul.rMenu li.current-menu-parent {
background: #05A505 !important;
color: #000000 !important;
}
ul.rMenu li.current_page_ancestor link,
ul.rMenu li.current_page_ancestor active,
ul.rMenu li.current_page_ancestor hover,
ul.rMenu li.current_page_ancestor visited,
ul.rMenu li.current_page_ancestor {
background: #05A505 !important;
color: #000000 !important;
}
/* For CURRENT */
ul.rMenu li.current_page_item a:link,
ul.rMenu li.current_page_item a:visited,
ul.rMenu li.current_page_item a:active,
ul.rMenu li.current_page_item a:hover {
background: #05A505 !important;
color: #000000 !important;
}
/* For CURRENT */
ul.rMenu li.current-menu-item a:link,
ul.rMenu li.current-menu-item a:visited,
ul.rMenu li.current-menu-item a:active,
ul.rMenu li.current-menu-item a:hover {
background: #05A505 !important;
color: #000000 !important;
}
ul.rMenu li.menu-item-263:hover,
ul.rMenu li.menu-item-263:sfhover,
ul.rMenu li.menu-item-263 {
padding-left: 30px;
background: url(http://www.senojflags.com/images/national-flag-symbols/France-Flag.png) no-repeat scroll center left #05A505 !important;
color: #000000;
}
|
|
#12
May 4, 2011, 07:22 AM
|
|
|
|
Looks like some of the css (not all) works on IE, not on Firefox and Chrome !
I think i'll forgot about putting pics in my menu. Too hard to do.
|
|
#13
May 5, 2011, 09:29 AM
|
|
|
I almost got it. After many hours...
I've put that :
HTML Code:
/* ================================================ */
/* how to highlight parent of current page */
/* ================================================ */
ul.rMenu li.current_page_parent link,
ul.rMenu li.current_page_parent active,
ul.rMenu li.current_page_parent hover,
ul.rMenu li.current_page_parent visited,
ul.rMenu li.current_page_parent {
background: #05A505 !important;
color: #000000 !important;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */
ul.rMenu li.current-menu-parent link,
ul.rMenu li.current-menu-parent active,
ul.rMenu li.current-menu-parent hover,
ul.rMenu li.current-menu-parent visited,
ul.rMenu li.current-menu-parent {
background: #05A505 !important;
color: #000000 !important;
}
ul.rMenu li.current_page_ancestor link,
ul.rMenu li.current_page_ancestor active,
ul.rMenu li.current_page_ancestor hover,
ul.rMenu li.current_page_ancestor visited,
ul.rMenu li.current_page_ancestor {
background: #05A505 !important;
color: #000000 !important;
}
/* For CURRENT */
ul.rMenu li.current_page_item a:link,
ul.rMenu li.current_page_item a:visited,
ul.rMenu li.current_page_item a:active,
ul.rMenu li.current_page_item a:hover {
background: #05A505 !important;
color: #000000 !important;
}
/* For CURRENT */
ul.rMenu li.current-menu-item a:link,
ul.rMenu li.current-menu-item a:visited,
ul.rMenu li.current-menu-item a:active,
ul.rMenu li.current-menu-item a:hover {
background: #05A505 !important;
color: #000000 !important;
}
ul.rMenu li.menu-item-263 {
padding-left: 30px;
background: url(http://www.senojflags.com/images/national-flag-symbols/France-Flag.png) no-repeat scroll center left #082EB5 !important;
color: #000000;
}
Now i have to found a way to put the current_menu_parent with picture in green. Just like I did for the regular items.
I can't find a way with CSS to say : if the item have the class menu-item-263 AND current-menu-parent then change the color to green.
Or if the item with the ID menu-item-263 have the class current-menu-parent then change the color.
HTML Code:
#menu-item-263 .current-menu-parent a:link,
#menu-item-263 .current-menu-parent a:visited,
#menu-item-263 .current-menu-parent a:active,
#menu-item-263 .current-menu-parent a:hover {
padding-left: 30px;
background: url(http://www.senojflags.com/images/national-flag-symbols/France-Flag.png) no-repeat scroll center left #05A505 !important;
color: #000000;
}
|
|
