Forum Discussion

Noora's avatar
Noora
Advisor
11 years ago

Customizing tabs

I'm having a hard time changing the background color, hover and text padding on our forum's tabs (personal profile, post message, idea exchange).

 

For example with personal profile I have tried calling them by so many different names and none of them work. I've been fiddling around Chrome's developer tools (inspect element and so forth) as I usually do and applying the changes to the correct CSS (and double checked), but nothing has an effect.

 

For example this works fine in dev tools, but has no effect when applied to the skin's CSS:

#lia-body .lia-content ul.lia-tabs-standard li.lia-tabs-inactive {
background-color: #0019AF;
border-bottom: 1px solid #0019AF;
}

 

And I think I've tried them all (specified to cases active, inactive and hover mostly), the ones that make the most sense and all the rest, for example:

#lia-tabs-active
#lia-tabs-inactive
#lia-tabs personal-profile-tab .lia-tabs-inactive

#lia-body .lia-content ul.lia-tabs-standard li.lia-tabs-inactive:hover

#lia-body .lia-content ul.lia-tabs-secondary li.lia-tabs-active a

#lia-body .lia-content ul.lia-tabs-standard li span a, #lia-body .lia-content ul.lia-tabs-standard li span .lia-link-navigation

#lia-body .lia-content ul.lia-tabs-standard li.lia-tabs-inactive

 

What I'm I doing wrong? Anybody? :robotfrustrated:

  • MoniqueL's avatar
    MoniqueL
    Lithium Alumni (Retired)
    11 years ago

    Tabs are totally customizable. Check out slides 25 - 27 in the deck found here: http://community.lithium.com/t5/Developers-Knowledge-Base/Advanced-Studio-Documentation-Part-4-CSS-the-Lithium-way/ta-p/64554

     

    The reason your css isn't being applied could be due to a number of issues that you may need to trouble shoot for. e.g.:

    1. Am I applying css inside the correct skin css section? Check to see what skin is being applied to your community or specific node by checking the admin > display > skins section

    2. Is my css being overwritten by css added elsewhere? The C stands cascading, and if the css you're adding is too high up the tree or not  css isn't specific enough, it could be that it's being overwritten by something else. Sometimes 3rd parties will add css inline custom components, or in external style sheets that are linked via the community’s head content in the community skin.


    3. Is my syntax correct? typos or incorrectly ordered ids/classes will prevent css from being displayed.