WordPress.com

1. otiumdesignandfineart
   Member
   Dec 12, 2012, 6:29 AM

   Hi there,

   I am new to WP, and am using the Oxygen theme to set up a site. I need some help with a few things and would appreciate your help in any way!

   1. At the top Primary menu bar- is there a way to give the menu a background color? put the menu in tabs? and change the font color?

   2. Can I change the type in this menu to Uppercase letters?

   Thank you very much for your help.

   The blog I need help with is otiumdesignandfineart.com.

   The blog I need help with is otiumdesignandfineart.com.

2. valuearchitecture
   Member
   Dec 13, 2012, 7:54 PM

   I would also like to know how to change the uppercase letters on the menu bar...
   Also check out the website, still a work in progress.
   https://valuearchitect.wordpress.com/

3. designsimply
   Staff
   Dec 29, 2012, 6:46 PM

   At the top Primary menu bar- is there a way to give the menu a background color?

   Here is an example showing how to change the background color and add padding to the the main menu in the Oxygen theme:

   .main-navigation {
   	background: #f7fd67;
   }
   
   .main-navigation ul {
   	padding: .8em 0 0 1.5em;
   }

   You can pick a different color code and change the padding numbers to adjust how it looks.
   http://0to255.com/

4. designsimply
   Staff
   Dec 29, 2012, 6:53 PM

   put the menu in tabs?

   For this one, I would recommend searching for a tutorial until you find one you like and then adjusting the CSS selectors until you get the effect you want. I searched and found one possible example:
   http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

   Their example menu uses an ID "#centeredmenu" for the base menu selector, but the Oxygen theme uses a class ".main-navigation" so you can just swap that out to make it work:

   .main-navigation {
      float:left;
      width:100%;
      background:#fff;
      border-bottom:4px solid #000;
      overflow:hidden;
      position:relative;
   }
   .main-navigation ul {
      clear:left;
      float:left;
      list-style:none;
      margin:0;
      padding:0;
      position:relative;
      left:50%;
      text-align:center;
   }
   .main-navigation ul li {
      display:block;
      float:left;
      list-style:none;
      margin:0;
      padding:0;
      position:relative;
      right:50%;
   }
   .main-navigation ul li a {
      display:block;
      margin:0 0 0 1px;
      padding:3px 10px;
      background:#ddd;
      color:#000;
      text-decoration:none;
      line-height:1.3em;
   }
   .main-navigation ul li a:hover {
      background:#369;
      color:#fff;
   }
   .main-navigation ul li a.active,
   .main-navigation ul li a.active:hover {
      color:#fff;
      background:#000;
      font-weight:bold;
   }

   You can also adjust all of the colors and spacing values in the example if you'd like.
   http://0to255.com/

5. designsimply
   Staff
   Dec 29, 2012, 6:55 PM

   These pieces from the tabs example above adjusts the font colors in the Oxygen menu:

   .main-navigation ul li a {
      color:#000;
   }
   .main-navigation ul li a:hover {
      color:#fff;
   }
   .main-navigation ul li a.active,
   .main-navigation ul li a.active:hover {
      color:#fff;
   }

   You can change out the color codes to adjust it.
   http://0to255.com/

6. designsimply
   Staff
   Dec 29, 2012, 6:59 PM

   Can I change the type in this menu to Uppercase letters?

   You can use the text-transform CSS property to change fonts to uppercase. See http://www.w3.org/wiki/CSS/Properties/text-transform

   Here is an example of using it for the main menu of the Oxygen theme:

   .main-navigation ul li a {
   	text-transform: uppercase;
   }

Topic Closed

This topic has been closed to new replies.