Protostar nav-pills problem

[francisco-drm]

Hi,

I tried to change everything on the .css and i am unable to change the blue background on the blue active pill.

Does anyone know how to solve this?

Thank you
Francisco

[ranwilli]

Get and use Firebug for firefox... it'll make a css expert out of you in no time

Be sure to watch the videos

[francisco-drm]

Thank you for your reply but i use it for years already. The problem is that i dont have any background-color#08c line under the menu-pills active entry

Anyone with real solutions please?

Thank you in advance

[ranwilli]

Have you looked at other <a> tags?

[MrValentin]

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.

[marcemig]

MrValentin gave us a really good answer! I was not able to make my css take precedence over the definitions in the index.php file, so I edited the index.php.

In my case, I changed the variable

Code: Select all

<?php echo $this->params->get('templateBackgroundColor');?>

to a fixed value

Code: Select all

transparent;

and of course this worked.

I never use the original template, I always start with a renamed copy, so there is not the problem of loosing changes in an upgrade.

By the way, I don´t really got the point of protostar hard coding styles in the index.php file. it seems more difficult to edit. i would prefer all css in css´s files.