If you look through the forum posts at forum.joomla.org, you will see numerous posts from developers that are frustrated because the style changes they made are not appearing correctly on their Joomla website. There are a few things to check to see why your style changes are not working:

  • Be sure that the parameters for your styles are matching or superceding any parameters for previous styles.
  • Make sure that your style sheet is being loaded after previous style sheets.
  • Your styling will not override styles entered into the <head> section of the HTML document
  • You styling will not override any inline styles being applied.

Use Firebug or other web developer diagnostic tool to inspect the element

Read the joom3 article: Using Firebug for styling your Joomla web page

With Firebug you can view the exact styles being applied to any element on the page and see the hierarchy of styles. You can see from which style sheet the style has originated, or if it is being loaded with the page itself in the <style> section or with inline styles.


Troubleshooting styling issues

Match or supercede the existing style

If the element is being styled with something like this:

#content .page-header h2 {font-family: "Noto Sans", sans-serif}

You must match all of the elements, classes and id that are being specified with your new style. You can not simply have a style for the h2 tag, to change this specific element.

Your styles must be loaded after any existing styles from other style sheets

With Firebug, look at the hierarchy of styles in the HTML tab on the right side. The top styles override any lower styles for the same selectors. You can choose to edit the style sheets that come with the template, but joom3 suggests that you edit the index.php for your template to link to a custom style sheet that loads AFTER the style sheets that come with the template. This way you are assured that your styles will overwrite previous styles. In addition, your styles will all be contained in one easy location that won't be overwritten with upgrades.

Styles inserted in the <head> section of the document

Any styles that have been added in the <style> section of the HTML document that creates the web page will override styles from style sheets. Your template may have a <style> section in the index.php file on the root. You may wonder why they would have this. It is put there so that any options you selected for your template, such as a color scheme, a font, etc, in Template Manager can be loaded into the page using PHP. 

If you are careful, and make a safety backup of the index.php prior to editing the original, you can remove these styles. Remember if you remove them, that the options in Template Manager will not longer apply.

Inline styles added by JavaScript

JavaScript along with jQuery, will often add inline styling to elements on your web page. These inline styles are often things like a set width and height for images in a slideshow. These inline styles can be very frustrating, as your styles from style sheets can not override inline styles. There may be nothing you can do about these set properties. You must either use a different extension that doesn't apply these styles or edit the .js file, which can cause it to break if you don't know what you are doing.

Inline styles added in the text editor

Many people use the text editor like a word processor when entering content. This is especially true when you have many people contributing content to your website. The text editor can be used to make paragraph tags look like headings, insert set width and height parameters to images, add inline padding or margins, etc. If you toggle the text editor to see the HTML that creates the content, you can see all these inline styles.

Here are examples of inline styling:

<img style="height: 240px; width: 150px" src="/images/cutecat.jpg" />
<h2 style="font-family: "Tahoma", sans-serif; font-size: 24px; color: #333333;">

Your style sheets can not override the inline styling. You must train your contributors to use proper HTML markup for headings and not to insert set widths or heights or font heights. Also train them to use class names so that you have a consistent and easy to change appearance across the entire Joomla website.