Wordpress Themes - WP Forum at BFA - [SOLVED] Page Menu Bar Padding

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)

[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:
http://www.midriffrecords.com/midriff_TEST/

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!

Tony

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

from currently

HTML Code:

#000000

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.

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

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?

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;

    }

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

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

http://www.zieglermarkus.de/testblog...ar_pagebar.png

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

http://www.zieglermarkus.de/testblog...-activated.png

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

http://www.zieglermarkus.de/testblog...-activated.png

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)

markus

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

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

Quote:

Originally Posted by markus (Post 1919)

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;    

    }

This works well. Thank you JuggleDad!