How to Work with CSS in Joomla

Joomla

Joomla is a content management system that also allows you to create custom templates from scratch. If you know how to code, you have complete control over every aspect of your site. Each page has its own HTML and CSS for you to customise.

For the purposes of this tutorial, we’re going to assume that you are working with the standard Joomla theme. Other versions may use different themes, but the principles are the same for all default themes.

Step 1 – Find the CSS Files

The location of the CSS files isn’t immediately obvious. There are two ways you can go about procuring these files for editing.

First, you can go into the file directory. Just open the templates folder and look for the ‘rhyk_[theme name] folder. In here you will find about 16 CSS files.

You only need to look at the template.css file. Create a copy for backup purposes and open it up.

The alternative is to find the files through the dashboard. Go to Template Manager in the administration part of your site. Choose the template you want to alter and click the ‘Edit’ button in the top-right. The various parameter fields will allow you to make the changes you want.

Step 2 – Making Changes

Changing the colour of your website is easy. In the CSS folder you probably noticed lots of different colours. This is why changing the colour of your theme is so easy. But changing fonts and other items is a bit trickier.

Open your CSS file within Joomla by pressing the ‘Edit CSS’ file near the Parameters box. This will bring up the list of CSS files you found in the files directory. Ignore anything to do with ‘writable’ or ‘unwritable’.

Select the template.css file. At this stage, any changes you save will be reflected in the actual theme. You may wish to make changes in a test file that you edit offline and upload later via FTP.

Step 3 – Understanding Advanced CSS Aspects

First of all, we have to understand the aspects of CSS. Luckily, Joomla is one of the easiest management systems to work with.

You will find the usual header indicators, links, lists, and fonts. What you’ll also find is that modules have distinct and separate styles. Edit these and you can define different stylistic attributes for articles rather than whole modules. This adds contrast for different parts of your site.

Step 4 – Save and Apply

Once you’ve finished making changes, you can press either Save or Apply. There’s a difference between the two.

  • Save will cause the changes to go live while the screen will close and you’ll be back on the Template Edit screen.
  • Apply will also cause the changes to go live. The difference is the editing screen will stay open, allowing you to keep making changes. Use this in conjunction with the Preview screen to make changes without messing with the user experience along the way.

Using CSS with Joomla is not as difficult as some may assume.

Share it!Share on FacebookTweet about this on TwitterShare on Google+Email this to someone

Our Recommended Joomla! Web Hosting Provider

Joomla

HOSTPAPA.CA
Get a 45% Discount by using our link.

HostPapa

A popular Canadian web host which offers a one-click Joomla installation option through the included control panel (cPanel). HostPapa is our recommendation to host a Joomla website.

Leave a Reply

Your email address will not be published. Required fields are marked *