Have a look at this block in
/templates/protostar/index.php from line 102 to 123:
Code: Select all
<style type="text/css">
body.site
{
border-top: 3px solid <?php echo $this->params->get('templateColor');?>;
background-color: <?php echo $this->params->get('templateBackgroundColor');?>
}
a
{
color: <?php echo $this->params->get('templateColor');?>;
}
.navbar-inner, .nav-list > .active > a, .nav-list > .active > a:hover, .dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover, .nav-pills > .active > a, .nav-pills > .active > a:hover,
.btn-primary
{
background: <?php echo $this->params->get('templateColor');?>;
}
.navbar-inner
{
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
}
</style>
.nav-pills > .active > a, .nav-pills > .active > a:hover might be what is causing you trouble.
The variables
templateColor and
templateBackgroundColor are defined in:
- Extensions > Template manager > My Default Style (Protostar) > Options
#08C is the default template color.
Note: to override these rules you have to be as specific as them in your css file. Let's say you have this:
HTML
Code: Select all
<div class="green">
<a href="#">
Link 1
</a>
<span>
<a href="#">
Link 2
</a>
</span>
</div>
<div>
<a href="#">
Link 3
</a>
</div>
and
CSS
Code: Select all
.green > a { /* A link that is immediatly inside an element with the class "green" */
color: green;
}
a { /* Any link */
color: red;
}
Link 1 will be green, but
Link 2 and
Link 3 will be red. That is because a browser uses a
more specific rule to render an object over a less specific one. If it finds two rules as specific, it takes the last one.
Therefore, if you don't want to modify index.php, since your changes will disappear when you update your template,
be more specific in your template.css.