In the Administration Menu, under Extensions -> Templates. Then select your Protostar template under the Style column.

In the Advanced tab for Protostar, you have a place to set the Template Colour.  This color is applied, via PHP code in index.php, to specific elements on your web page.

This color is assigned to various elements on your web page, specifically the bar across the top of the page, the links and certain elements of your navigation menu.

Joomla uses php to insert this color setting into the <style> section at the top of your web page. Styles in your stylesheet will not overwrite styles established in the <style> section of the HTML that creates your web page.

If you want to be able to use the stylesheet to set the color for these elements, you will need to edit the index.php to remove these lines.

Make a backup copy of your current index.php file before editing the original index.php.  

Open the original index.php and remove the highlighted lines shown below. In the Protostar index.php that comes with Joomla 3.6+, these lines area around line 59 and have a comment //Template Color:

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');?>;
}

 

You can either delete or comment out any style that has <?php echo $this->params->get('templateColor');?>

Adding your own color here is possible, but it is better to add it to the stylesheet.

Remember, if you are using the original Protostar template and not a renamed copy of the template, the index.php will be overwritten when you upgrade Joomla. You will need to repeat these steps.


Has BJ.Zemplate.com helped you with understanding Joomla?

If you would like to make a small contribution to help fund this resource, that would be great, but do not feel obligated in any way.

Donation Amounts


Still not finding a special topic?

Use Google's Search function below for search the content of bj.zemplate.com.