#60 - Styling your Joomla Website

#60 - Styling your Joomla Website

One of the great things about using Joomla, is that is generally easy and quick to setup a website (at least when you get the hang of it :). One of the things that people who are not familiar with web development struggle with, is to change the look and feel of their Joomla template. Here we suggest some great tips to help you style your Joomla site.

Styling your Joomla Template

Most of the look and colors of a Joomla template is typically done via CSS. CSS is short for Cascading Style Sheets. Although it might sound complicated (and it actually requires some time to understand) it is typically quite simple to tweak a template.So how do you go about doing this if you have no clue what CSS is? Simple, get the FireBug!

A small CSS Introduction

A Joomla template using CSS usually uses a number of CSS files. Each file contains a number of stye items, which each define a particular "piece" of your template. You can style the headers, the backgrounds, the fonts, the bullets, the text size. Each style item, defines a part of the item. However, there are typically so many styles in the CSS file, that it very hard to figure out which style you need to change.

FireBug

FireBug is a tool which lets you click on a particular area of your site, and identifies which are the styles which make up the definition of the particular area you are analysing.styles.jpg

Take a look at the image. The paragraph which is highlighted is styled on line 144 of your template's CSS file (template_css.css) as "font-size:1em;"

So to change it, what you need to do is find line 144 of that file, and change it accordingly to the size you wish.

 Using this technique you can quickly identify which styles you need to edit!

Update: Compass designs have the following great article about Joomla CSS. Check it out. 

 

One more thing...

Do you have friends or a Facebook group who you think would find this useful? Share this with them and then let me know what they think.

Want to supercharge your website?

  Our website loads FAST ... just 1.29 seconds. We're hosted on FAST InMotion servers We want YOUR website to be fast too, so we've gotten you an exclusive deal - 47% OFF for DART Creations friends + FREE domain! Check it out NOW!

Translate

who are we?

DART Creations is run by David Attard - working in and around the web design niche for more than 12 years, we provide actionable tips for people who work with and on websites. We also run DronesBuy.net - a website for drone hobbyists

David attard

Follow us on Social

         

 

 

 

Popular Content

Joomla extensions to take your website to the NEXT level

Is your Joomla website reaching its full potential? We install many of these extensions on almost ALL of our Joomla sites - why don't you check them out our list of Joomla Extensions and see whether you can take your site to the next level?

Where are we hosted?

This site is proudly powered by FAST VPS InMotion Servers and given an insane speed thanks to MaxCDN!

Web Hosting MaxCDN - Speed up your website

 

InMotion Hosting Review - Recommended Web Hosting servers for business, Joomla, WordPress and ecommerce websites.

InMotion Hosting Review

Advertise on DART-Creations.com

DART Creations is interested in developing partnerships with mutual benefit. If you like the stuff we publish and would like to develop a relationship, we'd be happy to hear from you. Go on - drop us a line - we'd love to hear from you :-)

The Outstanding october Bundle

AWESOMENESS! Bundles of premium font + graphic packs at more than 96% OFF!  Get this bundle for just $29 - This month ONLY!

The Hungry JPEG Awesome font bundles

New! DIVI 3.0 WordPress TeMPLATE + PageBuilder - 10% OFF Limited Launch offer

You'll surely create a perfect website with Divi 3.0!

Divi 3