Clever Geek Handbook

Override Bootstrap accordion colors in bootstrap for angularjs

I'm new to angularjs / bootstrap and I'm trying to create a SPA that uses accordion bootstrap lists. I am trying to change the color of the whole accordion tab, however it changes part of the accordion space. I looked online and this question ( Add class to accordion header using angualr ui bootstrap? ) And this Jsfiddle ( http://jsfiddle.net/Zmhx5/3/ ) reflects my problem perfectly but does not explain this solution.

I tried to use firebug to see what's going on behind the scenes and it says the whole accordion tab is "". I have a css class that overwrites this style, but for some reason, something overrides it.

.panel-heading {
background-color: red;
}

This website has an accordion tutorial and its css just overwritten it ( http://patternry.com/p=accordion/ ). I tried to do the same but it didn't work, please help: /

+3


source to share


3 answers


In this case, you must use scss.

<div class="custom">
    <accordion>
        ...
    </accordion>
</div>


In css, you will need to define.

.custom {
    .panel-heading: {
        background-color: red !important;
     }
}
+1


source


The reason your override is not working has to do with the CSS Spec . Since Bootstrap's style is more specific than yours, this is the one that applies. You need to override as follows

.panel-default >.panel-heading {
    background-color: red;
}


Below is the JSFiddle .

+6


source


Since I couldn't add a comment to @AdityaSethi in @ BartJedrocha's answer, I'll answer here as I find it helpful.

.panel-default >.panel-heading {
    background-color: red;
}

worked for me where

.custom {
    .panel-heading: {
        background-color: red !important;
     }
}

Not. Perhaps this is using SCSS? I read somewhere that SCSS uses the .scss extension. I didn't have the patience to change my style extension or create a new one. Sooo I tried the second answer.

However, my comment is more related to @AdityaSethi's comment, which mentions an issue with this solution affecting the entire application as panel classes are widely used. Understandable. I believe this is a simple solution:

div.custom .panel-default>.panel-heading {
    background-color: red;
}

And that did the trick for me ... while still changing styles. The rest of my start page shouldn't have been using other panels because nothing changed before I added it div.custom

to the CSS. But I suppose with some little logic in the CSS, no other panels outside div.custom

should be affected. :)

+1


source






More articles:


All Articles