Styling issue

[Betclever]

Hi @Bob

Can you please give me the class in order to make a kind of border with padding?
The goal is having a button or something like that.

Gyazo - da8594e612ca813d6a1d1197ad8bfc4d.png

Thx

 

[Bob]

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.

 

[Betclever]

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.

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

 

[Bob]

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).

<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.