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 » FAQ - Atahualpa » Header »

HowTo: Add some styling to the page menu bar


 
Prev Previous Post   Next Post Next
  #1  
Old Sep 28, 2011, 01:16 PM
mdmower's Avatar
mdmower
 
76 posts · Jul 2010
Missouri, USA
HowTo: Add some styling to the page menu bar

Update 05 Dec 2011: The css has been modified to work better with pages that have several levels of sub-pages. In my previous version, if a page was active, then all sub-pages in the menu were highlighted as active pages. This modified version should work for any number of sub-page levels. (Thanks to mimi for pointing this out)



This HowTo is intended to help you style the page menu bar with color gradients. Two examples are included for a light theme and dark theme. You don't have to follow my examples exactly, they're guidelines from which you can work.

Universal steps

Style & edit HEADER AREA
Make sure you have the page menu bar enabled; Configure Header Area should include %pages

MENU 1 (Page Menu) (Assuming everything on the page is at its default setting)
  1. Font Size & Face: 13px "MS Trebuchet", Arial, Verdana, sans-serif (Personal preference, adjust as desired)
  2. Transform text in Page Menu Bar?: none (Personal preference, adjust as desired)

Example 1: Light theme



MENU 1 (Page Menu)
  • Background color, Background color: Hover, Background color: Parent: Set these at appropriate colors to match your theme for old browsers which don't support gradients. They're fallbacks. (Example 1 uses F9F9F9, 000000, F9F9F9, respectively)
  • Border around all menu items: solid 0px transparent
  • Link Color: Choose a dark link color (Example 1 uses 000000)
  • Link Color: Hover: Choose a light hover color (Example 1 uses FFFFFF)
  • White or Black Arrows as Sub Menu Indicator?: black

Add HTML/CSS Inserts - Adjustable styles are marked by comments
Code:
/* The main horizontal bar's background */
#menu1 ul.rMenu-hor,
#menu1 ul.rMenu-ver {
  padding-left: 0px !important;

  /* Set this to Background Color in MENU 1 (Page Menu) - it is a fallback for older browsers */
  background-color: #F9F9F9;

  /* Vertical gradients, change colors according to (top,bottom) */
  background: -ms-linear-gradient(#F9F9F9, #E5E5E5) !important;
  background: -moz-linear-gradient(#F9F9F9, #E5E5E5) !important;
  background: -webkit-linear-gradient(#F9F9F9, #E5E5E5) !important;
  background: linear-gradient(#F9F9F9, #E5E5E5) !important;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#F9F9F9', EndColorStr='#E5E5E5') !important; /* IE7,8,9 */
}

#menu1 ul.rMenu-ver {
  margin-top: 0 !important;
}

#menu1 .rMenu-hor a {
  font-weight: bold !important; /* Personal preference */
  line-height: 2.0em !important; /* This adjusts the height of the menu bar */
}

#menu1 .rMenu-ver a {
  line-height: 1.2em !important; /* This adjusts the height of items in the submenus */
}

#menu1 li {
  margin: 0 !important;
  background-color: transparent !important;
}

/* Hovered items and current page items get these backgrounds */
#menu1 a:hover,
#menu1 a:active,
#menu1 .current_page_item a:link,
#menu1 .current_page_item a:visited {

  /* Vertical gradients, change colors according to (top,bottom) */
  background: -ms-linear-gradient(#444444, #111111) !important;
  background: -moz-linear-gradient(#444444, #111111) !important;
  background: -webkit-linear-gradient(#444444, #111111) !important;
  background: linear-gradient(#444444, #111111) !important;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#111111') !important;
}

/* Sub-menu items which should not be highlighted */
#menu1 .current_page_item ul a:link,
#menu1 .current_page_item ul a:visited {
  background: transparent !important;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false) !important;

  /* Set this to the same color as Link Color in MENU 1 (Page Menu) */
  color: #000000 !important;
}

/* Sub-menu items which are being hovered */
#menu1 .current_page_item ul a:hover,
#menu1 .current_page_item ul a:active {

  /* Set this to the same color as Link Color: Hover in MENU 1 (Page Menu) */
  color: #FFFFFF !important;

  /* Vertical gradients, change colors according to (top,bottom) */
  background: -ms-linear-gradient(#444444, #111111) !important;
  background: -moz-linear-gradient(#444444, #111111) !important;
  background: -webkit-linear-gradient(#444444, #111111) !important;
  background: linear-gradient(#444444, #111111) !important;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#111111') !important;
}
Example 2: Dark theme



MENU 1 (Page Menu)
  • Background color, Background color: Hover, Background color: Parent: Set these at appropriate colors to match your theme for old browsers which don't support gradients. They're fallbacks. (Example 2 uses 000000, F9F9F9, 000000, respectively)
  • Border around all menu items: solid 0px transparent
  • Link Color: Choose a light link color (Example 2 uses FFCC33)
  • Link Color: Hover: Choose a dark hover color (Example 2 uses 000000)
  • White or Black Arrows as Sub Menu Indicator?: white

Add HTML/CSS Inserts - Adjustable styles are marked by comments
Code:
/* The main horizontal bar's background */
#menu1 ul.rMenu-hor,
#menu1 ul.rMenu-ver {
  padding-left: 0px !important;

  /* Set this to Background Color in MENU 1 (Page Menu) - it is a fallback for older browsers */
  background-color: #000000;

  /* Vertical gradients, change colors according to (top,bottom) */
  background: -ms-linear-gradient(#252525, #0A0A0A) !important;
  background: -moz-linear-gradient(#252525, #0A0A0A) !important;
  background: -webkit-linear-gradient(#252525, #0A0A0A) !important;
  background: linear-gradient(#252525, #0A0A0A) !important;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#252525', EndColorStr='#0A0A0A') !important; /* IE7,8,9 */
}

#menu1 ul.rMenu-ver {
  margin-top: 0 !important;
}

#menu1 .rMenu-hor a {
  font-weight: bold !important; /* Personal preference */
  line-height: 2.0em !important; /* This adjusts the height of the menu bar */
}

#menu1 .rMenu-ver a {
  line-height: 1.2em !important; /* This adjusts the height of items in the submenus */
}

#menu1 li {
  margin: 0 !important;
  background-color: transparent !important;
}

/* Hovered items and current page items get these backgrounds */
#menu1 a:hover,
#menu1 a:active,
#menu1 .current_page_item a:link,
#menu1 .current_page_item a:visited {

  /* Vertical gradients, change colors according to (top,bottom) */
  background: -ms-linear-gradient(#F9F9F9, #E5E5E5) !important;
  background: -moz-linear-gradient(#F9F9F9, #E5E5E5) !important;
  background: -webkit-linear-gradient(#F9F9F9, #E5E5E5) !important;
  background: linear-gradient(#F9F9F9, #E5E5E5) !important;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#F9F9F9', EndColorStr='#E5E5E5') !important;
}

/* Sub-menu items which should not be highlighted */
#menu1 .current_page_item ul a:link,
#menu1 .current_page_item ul a:visited {
  background: transparent !important;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false) !important;

  /* Set this to the same color as Link Color in MENU 1 (Page Menu) */
  color: #FFCC33 !important;
}

/* Sub-menu items which are being hovered */
#menu1 .current_page_item ul a:hover,
#menu1 .current_page_item ul a:active {

  /* Set this to the same color as Link Color: Hover in MENU 1 (Page Menu) */
  color: #000000 !important;

  /* Vertical gradients, change colors according to (top,bottom) */
  background: -ms-linear-gradient(#F9F9F9, #E5E5E5) !important;
  background: -moz-linear-gradient(#F9F9F9, #E5E5E5) !important;
  background: -webkit-linear-gradient(#F9F9F9, #E5E5E5) !important;
  background: linear-gradient(#F9F9F9, #E5E5E5) !important;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#F9F9F9', EndColorStr='#E5E5E5') !important;
}
Additional Tips
Width of Menu Bar: You can control the width of the menu bar by including "width:80%;" in the CSS for #menu1 ul.rMenu-hor and #menu1 ul.rMenu-ver. Of course, change 80% to whatever width you prefer, or even specify something like 800px. You can align the bar left, center, or right. Below are some example CSS edits for each alignment. Choose one, don't blindly copy the whole thing. (Note that this is different from specifying %page-center or %page-right in the Atahualpa options for Configure Header Area. In that case the bar extends the entire width and only the menu items are shifted. You can actually use this tip in conjunction with that setting to move both the shrunk bar and the menu items around.)

Code:
/* Shrink width of bar and align left, right, or center - choose only one! */
#menu1 ul.rMenu-hor,
#menu1 ul.rMenu-ver {

  /* Align left */
  width: 80%;

  /* Align center */
  width: 80%;
  margin-left: auto;
  margin-right: auto;

  /* Align right */
  width: 80%;
  margin-left: auto;
  margin-right: 0;

  .... and so on with the rest of the CSS from the above examples ...
}
Attached Thumbnails
Click image for larger version

Name:	Example_1.png
Views:	4861
Size:	12.2 KB
ID:	1545  Click image for larger version

Name:	Example_2.png
Views:	4788
Size:	17.5 KB
ID:	1552  

Last edited by mdmower; Dec 5, 2011 at 01:38 PM. Reason: Modifications to fix appearance of sub-pages; Re-insert some !important
 

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Page menu bar: Styling sub menus unelma Page & Category Menu Bars 5 Nov 16, 2010 12:15 AM
Page Menu Bar Styling chair Header configuration & styling 1 Aug 1, 2009 06:06 AM
[SOLVED] Howto: Align page menu bar with left sidebar or opacity overlay width iroQuai Page & Category Menu Bars 1 Mar 7, 2009 05:01 PM


All times are GMT -6. The time now is 07:17 PM.


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