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] Make page menu bar (almost) like Bytes for All (http://forum.bytesforall.com/showthread.php?t=6488)

talbin Mar 27, 2010 02:39 PM

[SOLVED] Make page menu bar (almost) like Bytes for All
 
Hello!

I am trying to do something that I see has been accomplished on the Bytes for All site. I want my page menu bar to look like the BFA top menu bar, just "upside-down" - with the tabs looking like they're hanging off a border above them.

I'm very close - here's what I have: http://timberglade.com/.

The only problem is the border issue. Because I have ATO-->Page Menu Bar-->Border around all menu items set to solid-1px-#FFFFFF, it seems that's "bumping into" the bottom border of the header menu and the white is interfering with the black border. But if I change the Border Around All Menu items to any other color, it will border the entire page menu area, which isn't what I want - I want it to be all white.

The images I've used for the menu item backgrounds have a black 1 px border around them (I thought that would help) but that can easily be changed if needed.

Any ideas? Thanks!

Atahualpa: 3.4.6
WP: 2.9.2

Currently in the CSS Insert area:

/* ============================================ */
/* CSS for setting page menu style */
/* ============================================ */
div#menu1 ul.rMenu-hor li a:link,
div#menu1 ul.rMenu-hor li a:visited,
div#menu1 ul.rMenu-hor li a:active,
div#menu1 ul.rMenu-hor li a:hover{
background: url(http://timberglade.com/wp-content/up.../MenuBack1.png) !important;
margin-top: -2px;
padding-top: 20px !important;
border-left-width: 10px;
width: 70px;
text-align: center;
font-size: 1.1em;
}
div#menu1 ul.rMenu li.current_page_item a:visited,
div#menu1 ul.rMenu li a:hover {
background: url(http://timberglade.com/wp-content/up.../MenuBack2.png) no-repeat !important;
margin-top: -2px;
padding-top: 20px !important;
border-left-width: 10px;
width: 70px;
text-align: center;
font-size: 1.1em;
}

talbin Mar 30, 2010 07:20 AM

1 Attachment(s)
Okay - I figured it out!

This will make your Page Menu bar "hang off" a line. See attached file for a screenshot.

1. ATO-->Style & Edit Header Area-->Logo Area Styling: border-bottom: solid 1px #000000;

2. ATO-->Page Menu Bar-->Border Around All Menu Items: solid 1px transparent

3. ATO-->Add HTML/CSS Inserts: Mainly I had to add "no-repeat" to the settings for link, visited, active.

/* ============================================ */
/* CSS for setting page menu style */
/* ============================================ */
div#menu1 ul.rMenu-hor li a:link,
div#menu1 ul.rMenu-hor li a:visited,
div#menu1 ul.rMenu-hor li a:active{
background: url(http://YOURSITE.com/wp-content/uploads/IMAGE1.png) no-repeat !important;
margin-top: -2px;
margin-right: -1px;
padding-top: 20px !important;
border-left-width: 10px;
width: 70px;
text-align: center;
font-size: 1.1em;
}
div#menu1 ul.rMenu li.current_page_item a:visited,
div#menu1 ul.rMenu li a:hover {
background: url(http://=YOURSITE.com/wp-content/uploads/IMAGE2.png) no-repeat !important;
margin-top: -2px;
padding-top: 20px !important;
border-left-width: 10px;
width: 70px;
text-align: center;
font-size: 1.1em;
}


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

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