Get a free trial // Grow your CSS skills // Land your dream job

Each tab to have own color

  • # April 14, 2013 at 5:46 am

    Hello I have created some link tabs but have been trying to find out on Google how to have each tab have its own background color.

    I have made a mock up one

    But can only get one color

    This is what I am trying to get for each tab.
    Home Backround Color #00689A
    Whishlist Background Color #7FA02C
    Login/Register Background Color #FF6B07
    Shopping Cart Background Color #A62170
    Checkout Bacground Color #6D206E

    # April 14, 2013 at 6:00 am

    Like this?

    # April 14, 2013 at 6:00 am

    Is this going to be on a static site or a site powered by a CMS such as WordPress?

    # April 14, 2013 at 6:36 am


    Yeah just link that I see you put a class there and some special links in css I have to learn that now.

    # April 14, 2013 at 6:53 am


    You can have a look at my web design here ( “MWB Computers TestSite”)

    When view test site make sure you include the /sub at the end.

    # April 14, 2013 at 7:06 am

    I realise that this is probably not relevant to this specific query, since the site doesn’t appear to use wordpress, but I implemented something similar in a WordPress theme I designed recently. The classes are, unfortunately, not semantic, but it would be relatively trivial to make them so if you knew that the person ultimately in charge of content would reliably apply classes and target them in css:

    $menu_items = wp_get_nav_menu_items($menu->term_id);
    $counter = 1;
    foreach ((array) $menu_items as $key => $menu_item) {
    $title = $menu_item->title;
    $url = $menu_item->url;
    $class = $menu_item->classes[0]; // You could use this instead of counter
    $menu_list .= ‘

  • ‘. $title .’
  • ‘ .”n”;
    $counter = $counter + 1;

# April 14, 2013 at 7:18 am


Have got it working not (sub is the test website where I do my changes before putting on main website.)

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed