When looking through posts on the Joomla forum, a common problem is that people are making changes to the style sheet, but the changes are not showing up on the web site. This problem can be due to a number of different situations:

  • you aren't targeting the element in just the right way
  • you aren't using the correct style sheet
  • your custom style sheet isn't loading properly
  • there are inline styles that you can not override with a style sheet 
  • the styling is being done in a <style> section in the index.php and style sheets will not override these styles

First of all, we suggest that you always create your own custom style sheet and edit your template index.php file so that it loads after the template's style sheets. This way you don't run the risk of loosing your customization when the Joomla installation and/or template is upgraded. You also have your custom styles all in one location and it is easier to keep track of what you styles you have used.

You should also be familiar with the hierarchy of cascading styles, so that you are targeting the new style to just the right element.

You need to use a web page diagnostic tool

There are a number of web page diagnostic tools that allow you to analyse what styles are being applied to the HTML elements on the page. A very common one is Firebug for the Firefox browser. These tools allow you to click on an element on your web page and will display a list of all the styles that are being applied to that element. 

With this information, you can see which style is overriding another. Which element, id name, class name, etc is being used to target that element, and from what source the style is coming.

Firebug will list the styles from each source separately. It will also tell you on which line of the style sheet document the style is located. The sources are in bold on the right side of the list. The possible sources of the styling are:

  • external style sheets - with file name will end with .css, you can hover over the name to see the complete path
  • a <style> section inserted into the <head> portion of the HTML - this will show up as the name of the page, or some numbers, etc
  • inline styles in the HTML - these are styles that are added in the text editor, either by hand coding or with the text editor dashboard buttons
  • inline styles added by JavaScript - a JavaScript program may be adding styles to elements, classes or id names as it is run for the page

You are not targeting the HTML element properly

With the web page diagnostic tool, it is important to note how style is being targeted, if you are going to override this style, you need to match these elements, classes, ids etc. with your new styles.

For example if a style is being set by

#content .page-header {...}

you can not override this with just using

.page-header {...}

You must at minimum use the same parent element and the target element, to match the how the original style was set.

There are other styles later in the style sheet that take precedence

If there are styles applied on Line 234 of the style sheet, then again styles on line 458 of the style sheet for that same element, the styles on line 458 will override styles on 234 if the have the same element, class and/or id.

Be sure that you are editing the latest line where that element was styled. Styles set in style sheets loaded after earlier style sheets will also override any identical styling.

Your custom style sheet isn't being loaded correctly

You may have added your own custom style sheet to the template's css folder, but it isn't loading with the page. You can see which style sheets are being loaded with the diagnostic tool's CSS tab. With Firebug, you click on the style sheet name in the upper left corner, and a popup list off all the style sheets for that web page will appear. Check to see if your custom style sheet is on that list.

You need to link to your custom style sheet in the <head> section of the index.php for your template, or go through your Template Manager for your template if it allows for other style sheets to be added this way. Read the article: Adding your own Custom Style Sheet to the Protostar Template

There are inline styles being put in by JavaScript/jQuery

JavaScript/jQuery will often add inline styles to elements. Your template, a component or a plugin may be using JavaScript files for a specific functionality and along with this functionality the JavaScript is adding inline styles.

What the script does is put the style right into the HTML such as:

<h2 style="color: #55678">

You can not override inline styles with styles in the style sheet. You can not even override the styles added by JavaScript by putting in your own inline styles with a text editor, as the JavaScript styles will be added later. The only way to change this is to edit the JavaScript files. If you aren't familiar with JavaScript or jQuery, then you likely should not be editing these files.

Styles in the <head> section of the template's index.php

In order to use PHP to fetch information from the settings from the Template Manager, your template may have added a <style> section in the index.php file on the root of your template. Styles from a style sheet will not override styles from the <style> section of the HTML document. You must edit the index.php file to change or remove these styles.

You are not editing the right stylesheet

Use the web page diagnostic tool to see which style sheet is creating these styles. You need to create overriding styles in a style sheet that loads after this style sheet or edit this particular style sheet for this style to change.