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 » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

background-image for Sub-menu items / ul.children


  #1  
Old Jul 14, 2010, 01:41 AM
Fux
 
142 posts · Apr 2009
I got this problem with my sub-menu items - the white space where the background-image is not applied. I _could_ fix this by applying the background to ul.children, but that is also used for the comments section, causing trouble there. How can I fix this?



URL is http://www.urgeschmack.de
  #2  
Old Jul 14, 2010, 05:56 AM
juggledad's Avatar
juggledad
 
23,569 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
go look for a fix in the 'New Versions' forum
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Jul 14, 2010, 09:02 AM
Fux
 
142 posts · Apr 2009
Thank you very much.
  #4  
Old Jul 17, 2010, 07:10 AM
Fux
 
142 posts · Apr 2009
I applied that fix but the situation did not change. What else could I do to fix this?
  #5  
Old Jul 17, 2010, 07:29 AM
juggledad's Avatar
juggledad
 
23,569 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Make sure you don't have any caching plugins active or it will take time for the fix to how up
Set your CSS to internet so I can take a peek
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Jul 17, 2010 at 07:31 AM.
  #6  
Old Jul 17, 2010, 09:09 AM
Fux
 
142 posts · Apr 2009
No Caching plugins, CSS Debugging set to 'yes', double-checked my CSS inserts to not make a fool out of myself once again (but probably will...)
  #7  
Old Jul 17, 2010, 10:09 AM
juggledad's Avatar
juggledad
 
23,569 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
look in your CSS Inserts for the following
HTML Code:
ul.rMenu li {
margin:0px 22px;
color:#eee !important;
font-weight:bold;
background:url(/wp-content/uploads/ug_pagemenu_buttonBG.png) repeat-x top left
}
and change the margin:0px 22px; to padding:0px 12px;
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #8  
Old Jul 18, 2010, 03:22 AM
Fux
 
142 posts · Apr 2009
Thank you, that fixed it - but introduced a new problem. By using padding instead of margins, the buttons have become wider and there seems to be a difference in hovering over the button versus hovering over the text link in the button, each changing to a different color while hovering.

To fix this as well, I changed the setting back to "margin" and just added:

li.page-item-1041 {
padding:0px 22px;
margin: 0px 0px !important;
}

for that specific sub-menu item.

The main problem seems to be to override the background-color settings from the Ata "Page Menu Bar" styling-set. It seems to make sense to either write a short how-to/faq on how to change the page menu bar to a image based bar with changing graphics for hover etc. OR to add options to use images straight on the "Page Menu Bar" settings page.

For example, to get the menu bar to work like this http://www.urgeschmack.de (and one main issue was the button spacing because the Ata standard-spacing just did not look good)m I had to use this code:

div#menu1 {
border: none;
background: url(/buttonBG.png) repeat-x top left;
}
div#menu1 ul.rMenu {
background: url(/buttonBG.png) repeat-x top left;
}

ul.rMenu li {
margin: 0px 22px;
color: #eee !important;
font-weight:bold;
background: url(/buttonBG.png) repeat-x top left;
}
li.page-item-1041 {
padding:0px 22px;
margin: 0px 0px !important;
}

ul.rMenu li a:hover,
.page-item a:hover {
text-decoration:underline;
color: #fff !important;
background: url(/buttonBG_hover.png) repeat-x top left;
}

So another good option might be to add "Page menu bar item width" or something similar.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Why do children items have parents hover color. FlippinSweet Page & Category Menu Bars 8 Jun 28, 2010 01:04 PM
Problem changing the background color of just one of the page menu items\buttons Thomas Page & Category Menu Bars 3 Jun 6, 2010 06:38 PM
Background Image for Category Menu Items joan Page & Category Menu Bars 3 Apr 19, 2010 04:30 AM
[SOLVED] Background image of child items not the same as parent noahinBR Header configuration & styling 2 Feb 4, 2010 01:43 PM
How to use background images for menu items instead of text daxryan Page & Category Menu Bars 2 Feb 27, 2009 05:29 PM


All times are GMT -6. The time now is 01:24 PM.


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