WordPress.com

1. cpcoolpoo78
   Member
   Aug 20, 2012, 5:29 PM

   Hello. I have a website that uses the Digg 3 Column theme. I've been quite annoyed about the design lately. Digg 3 is the best WordPress.com theme, but I really don't like the tabs.

   The "tabs" I am referring to are the Home, About, ect. buttons. I'd like to colour these buttons, make them smaller, remove the underline and put them UNDER my website header instead of on top of it.

   Is this possible? I would really like to accomplish this as I am not exactly an expert in CSS. Thank you!
   Blog url: http://clubpenguincheatscodesguides.wordpress.com/

2. zandyring
   Happiness Engineer
   Aug 21, 2012, 2:43 PM

   To remove the underline, add this to your CSS:
   

   #menu ul li a:hover, #menu ul li:hover > a, #menu ul li.current_page_item > a, #menu ul li.current_page_parent > a, #menu ul li.current_page_ancestor > a, #menu ul li.current-cat > a, #menu ul li.current-menu-ancestor > a, #menu ul li.current-menu-item > a, #menu ul li.current-menu-parent a {
       text-decoration: none;
   }

   Everything else is a bit harder.

   To move the image up and show the menu items out the bottom instead:
   #header-box: {top: 0px;}
   This shows the bottom three list items instead of the top three. So I guess you can just switch those items and be ok.

   You'll need to load in a new image to
   #menu ul li
   and
   #menu ul li a
   because those are showing tabs pointing up and not down - change the image color and you will change the background color of the tabs.

3. cpcoolpoo78
   Member
   Aug 21, 2012, 2:54 PM

   Hi

   Thanks for this. Is there any way to make the tabs straight rectangle and make them next to eachother?

   Like this: http://prntscr.com/e5qqf

4. zandyring
   Happiness Engineer
   Aug 21, 2012, 3:05 PM

   Ok, this should get you started:
   

   #menu ul {
       margin: 0;
       padding: 0px;
   }
   #menu ul li {
       background: url("") no-repeat scroll right top transparent;
       background-color: #000080;
   }
   #menu ul li a {
       background: url("") no-repeat scroll left top transparent;
       text-decoration: none;
   }

   You'll also need the CSS above regarding removing the underline and you'll have to switch those list items around. The colors you can tweak, too.

5. cpcoolpoo78
   Member
   Aug 22, 2012, 11:38 AM

   Awesome.

   Though "#header-box: {top: 0px;}" did not position the tabs under the header and there doesn't seem to be a way to tweak the colour of the green text...

6. zandyring
   Happiness Engineer
   Aug 22, 2012, 12:08 PM

   To change the color of the words, you'll need to change the color attribute here:
   #menu ul li
   and here:
   #menu ul li a
   Use the same color.
   Moving #header-box to zero top margin (try specifying "margin-top: 0px;") just moves your image up so that the tabs stick out the bottom - it doesn't move the tabs.

Topic Closed

This topic has been closed to new replies.