XF 1.2 How to highlight a particular Tab?

[3rd AnGle]

In style properties, there are options to to change the color of the selected tab, hover tab etc but my objective is to highlight a particular tab regardless of user actions..

Highlight can be done using background color or place a small "new" button over the tab

I have xfsoccer installed and want to highlight the tab until the end of FIFA2014. Plz help.

This is how it looks now

 

[Paul B]

Each tab has its own class, for example 'resources' or 'members'.


So assuming that add-on follows the same convention, you can target it using CSS.

Use a browser inspection tool to check.

 

[3rd AnGle]

this is the page_nav.css code i am not sure if this is the right css code to change

.PageNav
{
    @property "pageNav";
    font-size: 11px;
    padding: 2px 0;
    overflow: hidden;
    zoom: 1;
    line-height: 16px;
    word-wrap: normal;
    min-width: 150px;
    white-space: nowrap;
    @property "/pageNav";
}

    .PageNav .hidden
    {
        display: none;
    }
   
    .PageNav .pageNavHeader,
    .PageNav a,
    .PageNav .scrollable
    {
        display: block;
        float: left;
        margin-right: @pageNavLinkSpacing;
    }
   
    .PageNav .pageNavHeader
    {
        padding: 1px 0;
    }

    .PageNav a
    {       
        @property "pageNavItem";
        color: @primaryDark;
        text-decoration: none;
        background-color: @contentBackground;
        border: 1px solid @contentThickBorder;
        border-radius: 3px;
        text-align: center;
        background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
        @property "/pageNavItem";
       
        width: @pageNavLinkWidth;
    }
   
    /*
        @property "pageNavPage";

        @property "/pageNavPage";
        */
   
        .PageNav a[rel=start]
        {
            width: @pageNavLinkWidth !important;
        }

        .PageNav a.text
        {
            width: auto !important;
            padding: 0 4px;
        }
   
        .PageNav a
        {
        }
       
        .PageNav a.currentPage
        {
            @property "pageNavCurrentPage";
            color: @activeColor;
            background-color: @primaryMedium;
            border-color: @primaryMedium;
            position: relative;
            background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
            background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
            @property "/pageNavCurrentPage";
        }

        a.PageNavPrev,
        a.PageNavNext
        {
            @property "pageNavScroller";
            color: @contentText;
            background: transparent none;
            padding: 1px;
            border: 1px none transparent;
            cursor: pointer;
            @property "/pageNavScroller";
           
            width: @pageNavLinkWidth !important;
        }
       
        .PageNav a:hover,
        .PageNav a:focus
        {
            @property "pageNavPageHover";
            color: @activeColor;
            text-decoration: none;
            background-color: @secondaryMedium;
            border-color: @secondaryMedium;
            background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
            background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
            @property "/pageNavPageHover";
        }
       
    .PageNav a.distinct
    {
        margin-left: @pageNavLinkSpacing;
    }
           
    .PageNav .scrollable
    {
        position: relative;
        overflow: hidden;
        width: {xen:calc '(@pageNavLinkWidth * 5) + (@pageNavLinkSpacing * 4) + (@pageNavItem.border-width * 10)'}px; /* width of 5 page numbers plus their margin & border */
        height: 18px; /* only needs to be approximate */
    }
   
        .PageNav .scrollable .items
        {
            display: block;
            width: 20000em; /* contains scrolling items, should be huge */
            position: absolute;
            display: block;
        }
       
/** Edge cases - large numbers of digits **/

.PageNav .gt999
{
    font-size: 9px;
    letter-spacing: -0.05em;
}

.PageNav.pn5 a { width: {xen:calc '5 * 4 + 9'}px; } .PageNav.pn5 .scrollable { width: {xen:calc '(5 * 4 + 9) * 5 + (@pageNavLinkSpacing * 4) + (@pageNavItem.border-width * 10)'}px; }
.PageNav.pn6 a { width: {xen:calc '6 * 4 + 9'}px; } .PageNav.pn6 .scrollable { width: {xen:calc '(6 * 4 + 9) * 5 + (@pageNavLinkSpacing * 4) + (@pageNavItem.border-width * 10)'}px; }
.PageNav.pn7 a { width: {xen:calc '7 * 4 + 9'}px; } .PageNav.pn7 .scrollable { width: {xen:calc '(7 * 4 + 9) * 5 + (@pageNavLinkSpacing * 4) + (@pageNavItem.border-width * 10)'}px; }

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveMediumWidth)
{
    .Responsive .PageNav .pageNavHeader
    {
        display: none;
    }
}

@media (max-width:@maxResponsiveNarrowWidth)
{
    .Responsive .PageNav .unreadLink
    {
        display: none;
    }
}
</xen:if>

 

[3rd AnGle]

i have tried quite a lot changing the colors but the Navbar tab is never affect although i could change other sections.. so i went and tried to do it on member tabs which comes by default.. and unfortunately, i am lost there too.

If you could show me the template and css of member tab.. i will be able to replicate the same on xfsoccer as well..

edit: the class looks like this

 

[Paul B]

This added to EXTRA.css for example will highlight the Members tab:

.navTab.members
{
background-color: orange;
}

You will also need to cater for the hover and selected states.