This is one of the most frequently asked questions in the Joomla Forums.

People want to change the background color, or the font-family for headlines, so they attempt to do so in their stylesheet.

Why doesn't the style in the stylesheet work?

Here's the deal.

There are two things that affect the background color for your template, things that your custom stylesheet or even the template.css stylesheet can not override. 

Number One:

In Extensions -> Template Manager, click on protostar in the Style column, not in the Template column.

Click on the Advanced tab.

Screenshot of Template Manager for Protostar

You will see a place to change the Template Colour and the Background Colour.

This is also where you can upload a logo for the header of your website OR have a title put in the header, add a description for the header and turn off or change the Google font style. You also set the site up for a Static or Fluid Layout.

What the color settings do is assign a value to PHP variables that are used in your index.php file to create every page on your website.

This brings us to the second factor in why your stylesheet changes don't seem to affect the background color or the site title and heading color.

Number Two:

If you go and look at your index.php file that resides in your protostar template in your site files, you will see the following section:

indexphpstyles

Let's talk about what is happening here:

  1. The template.css stylesheet was already loaded earlier in the index.php file.
  2. This codes adds a <style> section that is being loaded into the <head> of every page on your site. This <style> section will override any settings created by the stylesheet.

If you want to have the stylesheets do the styling for the background color, then you can simply remove this lins from the index.php file (make a backup before editing the original file).

background-color: " . $this->params->get('templateBackgroundColor')

How can I tell when something is being loaded from the HTML page or a stylesheet?

Use a diagnostic tool such as Firebug for Firefox or Safari's web developer tools.

When you click on an element to see what all is styling that element, such as the HTML tab in firebug, you will see a list of styles on the right. The list is hierarchical, meaning that the higher styles override the lower styles. With each of these styles for the elements on the page, you will see on the right the source for that styling. This could be your custom stylesheet, the template.css stylesheet, OR if it has something like the name of the page in it, that means the styling is coming from a <style> section on the page itself. If it says element, that means there is inline styling that was set with the text editor in Joomla or maybe by some JavaScript.

Inline styling will override any stylesheet styling. The <style> section of the HTML will override any stylesheet styling that was called in the HTML document before the <style> section.


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.