WordPress.org

Ready to get started?Download WordPress

Forums

Help with template tabs and css (5 posts)

  1. gizmoody
    Member
    Posted 5 years ago #

    Hi,

    I am using this theme http://www.newsprotheme.com/ and I would really like any of the options in the second horizontal menu (for example, entertainment) to remain gray after clicking and navigating to that page so that users can know what page they are on. This seems like a simple thing to do, but I really can't figure it out. Any help or suggestions would be much appreciated.

    Thank you very much.

  2. Technokinetics
    Member
    Posted 5 years ago #

    You should just need to add li.current-cat { background: gray; } to your style.css theme file (replacing "gray" with the hex code for the precise color that you'd like to use).

    - Tim

  3. gizmoody
    Member
    Posted 5 years ago #

    Hey Tim,

    Thanks for your reply. I tried by couldn't get it to work. Below is what the style.css section for the menu looks like. I am a bit inexperienced as of present and would really appreciate it if you can tell me where exactly to place that line and also if that line needs to be modified based on the style info below:

    /* *************************************** DROPDOWN NAVIGATION - CATEGORIES */
    #navcats {
    width:970px;
    background: #fff;
    border-bottom:2px solid #006599;
    }
    #navcats #navcatlist li {
    float: left;
    width: auto;
    }
    #navcats ul li a {
    display: block;
    font-size: .9em;
    color: #333;
    padding-top:6px;
    padding-bottom:6px;
    padding-right:12px;
    padding-left:12px;
    border-right:1px solid #ddd;
    }
    #navcats ul li a:hover {
    background: #006599;
    color:#fff;
    }
    #navcatlist li li {
    float: left;
    width: 160px;
    }
    #navcatlist li li a{
    background: #b5dded;
    color:#222;
    float: none;
    padding-top:3px;
    padding-bottom:2px;
    padding-right:12px;
    padding-left:12px;
    border-top: 1px solid #555;
    border-right:0;
    width: 136px!important;
    width:160px;
    width/**/:/**/136px;
    }
    #navcatlist li li a:hover {
    background: #8BC7DF;
    color:#222;
    }
    #navcatlist li ul {
    position: absolute;
    width: 160px;
    left: -999em;
    border-bottom:1px solid #555;
    }
    #navcatlist li:hover ul {
    left: auto;
    display: block;
    }
    #navcatlist li:hover ul {
    left: auto;
    }
    /* ********************************************************** */
    /* CONTENT-WRAPPER */
    /***********************************************************/
    #content-wrap {
    width:970px;
    margin: 0 auto;
    clear:both;
    }

    Thanks a lot!

  4. Technokinetics
    Member
    Posted 5 years ago #

    Try this: #navcatlist li.current-cat a { background: #006599; }

    - Tim

  5. gizmoody
    Member
    Posted 5 years ago #

    Hi Tim,

    You are a lifesaver! That worked well with the addition of:
    #navcatlist li.current-cat a { background: #006599; color: #FFFFFF; }

    Thanks again for you time and help.

Topic Closed

This topic has been closed to new replies.

About this Topic