Using simple CSS rules to modify your Joomla template design

Last Updated:

June 3rd, 2015

Category:

Customization Tips

Some changes can be made via template configuration (info) but some not. So you will probably ask: How can I change the space between elements (paddings & margins), font size or capitalization of article titles in GK template(s) – these are a common questions during template customization, sometimes asked by your client. To answer them, you have to do three steps: (1) check, (2) test and (3) implement changes.

We suggest you use: Firebug for Firefox or Firebug Lite for Google Chrome. Instead of having to make a CSS change, reload, make a change, reload you can just edit it live to see the results.

Installing Firebug in Firefox

In Mozilla FireFox, go to the Tools menu, select “Add Ons” and under “Get Add Ons” type “Firebug” in the search box. Click the Install button. You may need to restart Firefox after installation.

1. Use firebug to check, click on the inspect icon. With HTML tab you can look at your CSS rules and see which ones of them are actually used on your website and which aren’t. Once you select the element, look in the bottom right hand corner of your firebug window. Here you will see the CSS elements and attributes of those elements that relate to the object you have selected on the website. To the right of each element you will see the Location of the CSS element in the document as well as the line it appears on.
2. Test your modification using firebug live editing CSS properties. For example, here’s how we can see the effect of changing article appearance in the GK Rockwall template (space, color, uppercase).
   

   Before (default view)

   Right-click on this section of the web page and choose “Inspect element”. Firebug will immediately highlight this section in the bottom panel. Let’s start by changing the space between the Category & Date section and the title for K2 items.

   

   Space between category/date and title

   As you see this section is located in article header inside <ul> and we used margin: 0 0 32px; What this means is that the bottom margin has a default value of 32px.

   Move your mouse over the value of the margin property, and change from 32px to 5px. Notice when you change the value, the changes are applied immediately. This step allows you reduce space, however only temporarily. Rewrite or copy the new code:

   article header ul { margin:0 0 5px; }

   Now let’s reduce title font size; click on the <h2> tag on the right firebug panel.

   

   How to change article title font size

   You can change font-size and line-height default values, for example from 44px to 32px, and 52px to 42px. So your new code should look like this:

   #k2Container article header h2 {
       font-size: 32px;
       line-height: 42px;
   }

   Note: You don’t have to include properties which you don’t change.

   You can also change text-transform from “uppercase” to “none”.

   #k2Container article header h2 {
       font-size: 32px;
       line-height: 42px;
       text-transform: none;
   }

   Because the title is also a link, if you want to change its color you have to click on <a href=” under <h2> :

   

   You have to change the hex color for the font, from default #222222 (dark gray) value to any other. For example:

   #gkMainbody article a:active, #gkMainbody article a:focus, 
   #gkMainbody article a:hover, #gkMainbody article header a {
       color: blue; }

   But if you want to use different color for the hover effect you have to modify it a little bit:

   #gkMainbody article a:active, #gkMainbody article a:focus,  
   #gkMainbody article header a { color: blue; }
   #gkMainbody article a:hover  { color: green; }

   

   Result after all above CSS changes

   Read articles about colors here.

   I don’t need this element

   Often, the solution to a problem can be found just by disabling a few CSS properties and seeing what the world looks like without them. As you mouse over each property, you’ll see a little circular icon on the left. Clicking that will disable the property, and clicking it again will turn it back on.

3. Implement changes using an override technique.

   You may ask us “In which file I have to make those changes“. As the editing in Firebug is live, you’re not editing source code. Since Firebug does not save changes to your template, you will need to copy the changes you’ve made in Firebug and paste them into – you have three options:

   1. Custom CSS field (template configuration).
   2. Your template’s css\override.css file.
   3. Firebug will also tell you exact line number where certain elements appear in the template.css, joomla.css, k2.css or style1.css file. So you can also make changes there, but this is not a recommended solution!

   Read more details: How to use custom CSS code .

This article was first published September 1st, 2013