1. REGISTRATION REQUIREMENTS:

    Your username here MUST MATCH your XenForo username (connected to your XF license).

    Once you have registered here, then you need to start a conversation at xenforo.com w/Bob and provide the following:
    1. Your XenForo License Validation Token
    2. The Domain Name associated with the License
    NOTE: Your account will be validated once ALL requirements are verified/met. Thank you for your patience.

Styling issue

Discussion in 'Pickem Support' started by Betclever, Aug 26, 2017.

  1. Betclever

    Betclever New Member Showcase Pickem Sportsbook

  2. Bob

    Bob Developer Staff Member

    That screen shot doesn't help me understand what you are wanting to do. What EXACTLY are you wanting to put a BORDER around? There are 3 different CONTAINERS in that screen shot and it makes no sense to put a border around any of them.

    If you are using Chrome or Firefox, you can inspect the page and that will tell you what classes specific elements are using.
     
  3. Betclever

    Betclever New Member Showcase Pickem Sportsbook

    I know how to find a class with Chrome or Firefox but I have a lot of plugins and the class I found is .table and if I change this one, it changes for all class even the ones which are not from Pickem...

    In fact, I want this and for all containers you see on the first capture:

    Gyazo - 9dccba9d4163e3616bdc31a4c9be5d0c.png

    Thx For your help Bob
     
  4. Bob

    Bob Developer Staff Member

    The 2nd screen shot are TABs. Those use the Core XenForo TABS class. If you look at it, you can see the CLASS names and their hierachy.

    The TABS container is wrapped in a CSS Class named "leaderboardWeekTabs".

    The next element is a UL which has 2 classes:
    • tabs (which is a core xenforo class)
    • leaderboardTabs (which is a pickem class)

    The next elelemt is an LI which has classes based on CONDITIONS (each LI is for a specific tab, so each has its own class so that specific tab can be styled) and there is an "active" class appended by a variable being passed in by the control (which is what the XenForo Tabs CSS uses to style the ACTIVE tab.

    The pickem classes are not actually doing anything, they are there for customization purposes only. Its Core XenForo tabs CSS that is controlling the Tabs (which your style has changed the behavior of how tabs are styled).

    HTML:
    <div class="leaderboardWeekTabs">
        <ul id="leaderboardtabs" class="tabs leaderboardTabs">
            <li class="leaderboardTabStandings {xen:if "{$selectedTab} == 'standings'", active}"><a href="{xen:link pickem, $weekInfo, 'week_id={$weekInfo.week_id}'}">{xen:phrase nflj_pickem_tab_overall_standings_through_week_x, 'weekname={$weekInfo.week_name}'}</a></li>
            <li class="leaderboardTabResults {xen:if "{$selectedTab} == 'results'", active}"><a href="{xen:link pickem/results, $weekInfo, 'week_id={$weekInfo.week_id}'}">{xen:phrase nflj_pickem_tab_week_x_results, 'weekname={$weekInfo.week_name}'}</a></li>
            <li class="leaderboardTabComments {xen:if "{$selectedTab} == 'comments'", active}"><a href="{xen:link pickem/comments, $weekInfo, 'week_id={$weekInfo.week_id}'}">{xen:phrase nflj_pickem_tab_comments}</a></li>
        </ul>  
    </div>
    There are SEVERAL classes that you can use to customize the tabs. You need to daisy chain higher classes to override a core class without effecting the core class... eg you can use the class .leaderboardWeekTabs .tabs together instead of just .tabs

    Hope that makes sense.
     
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.