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 http://codepen.io/mwbcomputers/pen/apiKw

    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? http://codepen.io/chrisburton/pen/rEyJB

    # 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

    @chrisburton

    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

    @chrisburton

    You can have a look at my web design here (http://www.mwbcomputers.com.au/sub “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

@BenWalker

Have got it working not http://www.mwbcomputers.com.au/sub (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.

*May or may not contain any actual "CSS" or "Tricks".