Need help? Check out our Support site, then


Colouring, Moving And Resizing Tabs in Digg 3

  1. 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. 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. 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. 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. 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. 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.

About this Topic

Tags

No tags yet.