Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

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


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Mar 27, 2010, 03:39 PM
talbin
 
19 posts · Feb 2010
[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;
}
  #2  
Old Mar 30, 2010, 08:20 AM
talbin
 
19 posts · Feb 2010
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;
}
Attached Thumbnails
Click image for larger version

Name:	HomeScreenshot.jpg
Views:	265
Size:	31.3 KB
ID:	448  

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Something to make you go "Hmmmm"! Page menu bar not centered!! Masselyn Page & Category Menu Bars 0 Jan 30, 2010 09:13 PM
How to make Page Menu Bar items BOLD? PerryM Page & Category Menu Bars 3 Dec 3, 2009 10:03 AM
How to make page menu bar taller? jenb Page & Category Menu Bars 5 Dec 3, 2009 02:42 AM
How to make dropdown submenus fly out from Page Menu Bar ON HOVER? one-from-lv Page & Category Menu Bars 0 Oct 9, 2009 03:21 PM
Can I make my page menu bar look like my web site? susanowm Page & Category Menu Bars 2 Mar 16, 2009 06:08 PM


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


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