Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Page & Category Menu Bars (http://forum.bytesforall.com/forumdisplay.php?f=10)
-   -   [SOLVED] Page Menu Bar Padding (http://forum.bytesforall.com/showthread.php?t=130)

mactony Jan 28, 2009 04:21 AM

[SOLVED] Page Menu Bar Padding
Hello again, Flynn. I am working on recreating my menu bar from an old html design. The new page menu bar seems to have more padding around the links than the remainder of the bar, so that the section with the links is thicker and taller than the rest of the bar. I would like them to be of equal height and match seamlessly. I have combed through the stylesheets but can't find out how to do this.

Here is the site:

Ideally I would like the black menu bar to appear "under" the yellow bg at the top and blue line at the bottom, before the main page begins.Right now it seems to be overlapping both.

Sorry to bother you with this one, after the last tip you gave me I was really going strong! Thanks so much!


Flynn Jan 28, 2009 04:50 AM

Change Atahualpa Theme Options -> Page Menu Bar -> Border around all menu items

from currently
HTML Code:


HTML Code:

solid 1px #000000
The theme is expecting a combined ("shorthand") style for the border there and will generate:

border: [option value];

Since you didn't provide border type and width, the browsers are putting their default values there.

mactony Jan 28, 2009 07:13 AM

Holy fast response. Thank you so much! Worked like a charm.

Eric Bobrow Feb 1, 2009 03:29 AM

I made the Page Menu text height larger, and wanted to make the Page Menu Bar taller, but couldn't see any setting for its height.

Is setting a border thickness the only way to control the height?

It's rather unintuitive, although by setting it to a matching color and 4px I was able to get it to look OK.

On a related note, I wanted to highlight (decorate) the current page in the Page Menu by making the font Bold, however I didn't see anywhere that could be chosen. I already have it change color, but to draw the eye better, I'd like to see how it would look in bold-face. Is there any way to do this?

Flynn Feb 1, 2009 05:15 AM

You can change the size of the menu tabs by adding this via HTMl/CSS Inserts -> CSS Inserts

HTML Code:

ul.rMenu li a:link,
ul.rMenu li a:hover,
ul.rMenu li a:visited,
ul.rMenu li a:active
    padding: 8px 5px;   

"padding: 8px 5px" means 8 pixels inners space top and bottom, and 5 pixels left and right. Default is "4px 5px"

Also as a CSS Inserts, to make the current tab bold

HTML Code:

ul.rMenu li.current_page_item a:link,
ul.rMenu li.current_page_item a:active,
ul.rMenu li.current_page_item a:hover,
ul.rMenu li.current_page_item a:visited
    font-weight: bold;

I have not added the bold option because both "hover" and "current" are getting the same style, and for "hover" bold text would make the menu "jump" a little because the bold text consumes more horizontal space. Using it only for the "current" state should look o.k. though.

The same as above, but for the Category Menu Bar:

HTML Code:

ul#rmenu li a:link,
ul#rmenu li a:hover,
ul#rmenu li a:visited,
ul#rmenu li a:active
    padding: 8px 5px;   

and bold for "current"

HTML Code:

ul#rmenu li.current-cat a:link,
ul#rmenu li.current-cat a:active,
ul#rmenu li.current-cat a:hover,
ul#rmenu li.current-cat a:visited
    font-weight: bold;

markus Feb 22, 2009 07:51 AM

sadly this display of bold and changing the padding does not work if you combine the page and the category bar into one. like done here (http://forum.bytesforall.com/showthread.php?t=139)
any idea?

markus Mar 1, 2009 07:44 AM

I still have the problem with the combined page-categorybar as described in http://forum.bytesforall.com/showthread.php?t=139.
I have made a layout with the combined page-categorybar and the pagebar in the header.


when i activate on category it highlights the category with the css insert as above.


but when i activate a page it does only highlight the page in the pagebar, but not in the combined bar.


Any idea what i could do.
the combined bar is very nice, but i like the visitor to see instantly where he/she is.

(the address for the testing i do is: http://www.zieglermarkus.de/testblog)


ciolo Mar 17, 2009 09:12 AM

i'm trying to make only the category bar bold, what is the css insert for that ? thanks.

dread Jul 22, 2009 08:29 AM

Has anybody resolved this? I am trying to do the same thing.


Originally Posted by markus (Post 1919)
sadly this display of bold and changing the padding does not work if you combine the page and the category bar into one. like done here (http://forum.bytesforall.com/showthread.php?t=139)
any idea?

juggledad Jul 25, 2009 06:58 AM

try this for the page menubar - the 35 is the horizontal padding, the 8 is the vertical
HTML Code:

div#menu1 ul.rMenu li a:link,
div#menu1 ul.rMenu li a:hover,
div#menu1 ul.rMenu li a:visited,
div#menu1 ul.rMenu li a:active
    padding: 8px 35px;   

for the category menubar use
HTML Code:

div#menu2 ul.rMenu li a:link,
div#menu2 ul.rMenu li a:hover,
div#menu2 ul.rMenu li a:visited,
div#menu2 ul.rMenu li a:active
    padding: 8px 35px;   

seleniumgirl Apr 21, 2010 05:32 PM

This works well. Thank you JuggleDad!

All times are GMT -6. The time now is 10:39 PM.

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