Help with template tabs and css

  • gizmoody

    (@gizmoody)


    15 years, 2 months 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.

Viewing 4 replies - 1 through 4 (of 4 total)
  • technokinetics

    (@technokinetics)

    15 years, 2 months 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

    Thread Starter gizmoody

    (@gizmoody)

    15 years, 2 months 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!

    technokinetics

    (@technokinetics)

    15 years, 2 months ago

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

    – Tim

    Thread Starter gizmoody

    (@gizmoody)

    15 years, 2 months 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.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Help with template tabs and css’ is closed to new replies.