Menu
I am using bootstrap UI with AngularJS directives and I want to change the default styles bootstrap applies for its elements.
Should I target the HTML contents from the template?
Based on the examples given in the documentation I want to use the accordion.
When I define it in HTML, it has the following structure:
<accordion>
<accordion-group heading="my heading">
content here
</accordion-group>
But when the directive processes the template it turns it into the following HTML:
<accordion close-others="oneAtATime"><div class="panel-group" ng-transclude="">
<div class="panel panel-default ng-isolate-scope" heading="my heading">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" ng-click="toggleOpen()" accordion-transclude="heading">
<span ng-class="{'text-muted': isDisabled}" class="ng-binding">content here</span>
</a>
</h4>
</div>
<div class="panel-collapse collapse" collapse="!isOpen" style="height: 0px;">
<div class="panel-body" ng-transclude=""><span class="ng-scope">some content here</span></div>
</div>
As you can see, it changes it quite significantly. If I wanted to change how the panel title is displayed, should I write this in my css files?
div.panel {}
and hope that the template doesn't change in the future?
What is the best approach to changing styles for HTML elements generated by a directive's templates?
945
If you include your css (site-specific.css) after Bootstrap's (bootstrap.css), you can override rules by redefining them.
For example, if this is how you include CSS in your <head>
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/site-specific.css" />
You can simply override the panel (in your site-specific.css file):
.panel {
//your code here
}
And do not bother template change in the future. As you use a specific version, updates will not effect you. They are generating a new template with a new version name.
180
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
