How do i change the color of the top links?

  • Author
    Posts
  • #765807

    homesalere
    Member

    My blog is AskHomesale.com ( http://pruhomesale.wordpress.com/ ) and i would like to change the top page links. Maybe solid black with white text?

    The blog I need help with is askhomesale.com.

    #765882

    The background color, if that is what you are wanting to change, is a 16px x 22px image that repeats in the “x” direction (horizontally). You can create a new image of the same size, upload it to your media library, get the URL and replace URL OF IMAGE between the double quote marks in the below.

    #navigation ul li {
    background: url("URL OF IMAGE") repeat-x scroll 0 0 #FFFFFF;
    }

    The existing image: http://s2.wp.com/wp-content/themes/pub/under-the-influence/images/top_gradient.png

    Or if you want a solid color, add this to your CSS instead and edit the color code.

    #navigation ul li {
    background: #FFFFFF;
    }
    #765884

    homesalere
    Member

    i tried the solid color code and previewed it, nothing changed?

    #765887

    homesalere
    Member

    got them to turn solid black with this code but would like the white text to stand out more, suggestions?

    #navigation ul li {
    background: black;
    font-color: white;
    font-weight: bold;
    font-size: 14px;
    }

    #765894

    In your code example, it should be “color” instead of “font-color”.

    #765898

    homesalere
    Member

    tried this and it didn’t change navigation colors:

    #navigation ul li {
    background: black;
    color: white;
    font-weight: bold;
    }

    #765899

    Looking a little closer, the colors in the menu in the Under the Influence theme are set through the navigation list items and anchor tags. Here are some more specific examples.

    This will change the color of the links in the menu in general:

    #navigation ul li a, .navigation, .navigation a {
        color: #fff;
    }

    This will change the color of the links when you hover over them:

    #navigation ul li.current_page_item a, #navigation ul li a:hover, #navigation ul li a:focus {
        color: #333;
    }

    This changes the color of the links for the current page and the top menu item when you’re hovering over submenu items:

    #navigation li:hover > a, #navigation ul ul:hover > a, #navigation ul li.current_page_item > a, #navigation ul li.current-menu-ancestor > a, #navigation ul li.current-menu-item > a, #navigation ul li.current-menu-parent > a {
        color: #333;
    }
    #765901

    Note, you also need to keep this for the main color change. It updates the background link but doesn’t change any of the link colors:

    #navigation ul li {
        background: black;
        font-weight: bold;
        font-size: 14px;
    }
    #765909

    homesalere
    Member

    thank you, you are awesome!

    #765910

    You are too! :)

The topic ‘How do i change the color of the top links?’ is closed to new replies.