1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.2 How to highlight a particular Tab?

Discussion in 'Styling and Customization Questions' started by 3rd AnGle, Jun 11, 2014.

  1. 3rd AnGle

    3rd AnGle Well-Known Member

    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 new-star.gif

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

    This is how it looks now
    Screen Shot 2014-06-11 at 11.21.57 AM.png
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    Each tab has its own class, for example 'resources' or 'members'.
    upload_2014-6-11_17-27-28.png

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

    Use a browser inspection tool to check.
     
    3rd AnGle likes this.
  3. 3rd AnGle

    3rd AnGle Well-Known Member

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

    Code:
    .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>
     
  4. 3rd AnGle

    3rd AnGle Well-Known Member

    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

    Screen Shot 2014-06-11 at 12.04.42 PM.png
     
  5. Brogan

    Brogan XenForo Moderator Staff Member

    This added to EXTRA.css for example will highlight the Members tab:
    Code:
    .navTab.members
    {
    background-color: orange;
    }
    You will also need to cater for the hover and selected states.
     
    3rd AnGle likes this.

Share This Page