Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Mar 2011
    Posts
    215
    Thanks
    10
    Thanked 1 Time in 1 Post

    Changing menu link colors to be different from regular links

    I am trying to make the menu links always white and the add to cart button should have white text, and red background always on alliance-fl.com. Im also having a problem with my side widget pushing the price down in some instances. I tried using the css

    a { color:#993c2e; outline: 0; text-decoration: none; }
    a:hover { text-decoration: underline; outline: 0;color:black; }
    a img {border: 0px; text-decoration: none;}
    a.menu{color:#fff;outline: 0; text-decoration: none; }
    a.menu:hover{color:#fff;outline: 0; text-decoration: none; }


    so far this is doing nothing, what am I doing wrong?

  • #2
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    947
    Thanks
    0
    Thanked 130 Times in 129 Posts
    There is nothing in the posted that causes no-effect, so the problem might be in the mark-up.

  • #3
    New Coder
    Join Date
    Dec 2013
    Location
    Were my backpack is!
    Posts
    19
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Your just not being specific enough to overwrite the existing CSS.
    I don't know if you use firebug or chrome developer consul, I use chrome; if you inspect the upper menu element and then go to selectors and check hover, you get the following:

    a:hover, .entry-title, .page-title, .nav-tabs > li:hover > a, .nav-tabs > li.active > a, #main-nav > ul > li.current_page_item > a, #main-nav > ul > li > a:hover, .cats .block-content li a:hover, #search .button:hover span, .cats .block-content .current-parent h5 a, .cats .block-content .wpsc_categories li.current-cat > a, .amount, .onsale-price .price, .currentprice, .portfolio-filters li a.selected, .widget_categories > ul > li:hover, #main-nav > ul > li > ul li:hover, .footer-information ul li a:hover, #tabs li > a:hover, #tabs li > a.active {
    color: #2e0600;
    }

    It should bold the selection that is specific to your element, and if you use that to select you should be specific enough.

    So:
    #main-nav > ul > li > a:hover {
    color: white;
    }

    Should be able to figure out your other problems with those tools.

  • #4
    Regular Coder
    Join Date
    Mar 2011
    Posts
    215
    Thanks
    10
    Thanked 1 Time in 1 Post
    I have tried that with firebug, chrome developer tools, and a rather large arsenal of friends who know more markup that I do. According to developer tools, something is doing this -
    background-color: #acacac

    firebug, tells me to do this -

    .square li, .etheme_widget_recent_comments > ul > li span, .widget_archive li, .continue_shopping, .go_to_checkout, input[type="submit"], .button {
    background-color: #993C2E !important;
    }

    I can't find where the background-color: #acacac is as it is nowhere in my stylesheet, and I place the other in my custom sheet.. nothing is working.

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,919
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    At the very first you need to validate your HTML. You incorrectly have a <link> and <style> element in your body (right at the top); those should be in the header. And I see a rule in that internal stylesheet that reads:
    Code:
    .square li, .etheme_widget_recent_comments > ul > li span, .widget_archive li, .continue_shopping, .go_to_checkout, input[type=submit], .button { background-color:#acacac; }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •