Custom Joomla Template Styling

Recent Blogs

Details

Created on Friday, 09 September 2011 11:58 |

Written by The bloggers

Have you ever wanted to have a specific style for each category or individual page on your Joomla site? When you go to your About us page, the page content may have a blue style, and when you go to your contact us page, this may have a green style etc etc

This is not done by having many templates but simply by editing your template files.

So lets look at one of the default templates within Joomla called JaPurity for example. What we need to do is open up the index.php file from the template files in a text editor or a program such as dreamweaver.

What we are going to do is wrap the entire contents of the information that will appear in the template in a div tag that will automatically create a new id for every page of your joomla website. This means that you will be able to create unique css styles for each page using this id.As an example your home page would have a div like this <div id="color_1">the joomla site here </div> and for the about page you would have <div id="color_2">the joomla site here </div> etc etc so you could style your fonts to be different, your title colors background colours modules etc etc so how do we do this?

All you need to do is open the index.php file and find the following code

<div id="ja-wrapper">

Either before or after this it is upto you add the following

<div id="color_">

Now at the bottom of the index.php find this line

<jdoc:include type="modules" name="debug" />

and just before it add this </div>

That's it, you are done! Now you can save this file and upload it to the server and over write your current index.php file with one. Now when you go to the site you can inspect the code using firebug if you use Firefox and you will see that you have

·id="color_1"> so within your css style sheet you can now add

#color_1{
font-family: Arial,Helvetica,sans-serif; 
 background:#005b7f
}

you will be able to now add the module classes ect to this by doing the following

#color_1 .moduletable-blue h3{
 color:#0B55C4
 }

address

27 Levens Grove
Blackpool
Fy15PP
Lancashire
Tel: 01253 317504

Chat With a Joomla Expert

Features

Web Site Design and Development
Joomla Developers
Joomla Training Courses
E-commerce Sites
Web Site Promotion and Marketing

Clients

clients

Recent Blogs

Upgrade Joomla

How to design a Joomla website

What is Joomla?

Joomla Page Titles Module

Joomla FFmpeg Hosting

Working with Joomla

Social Networks and SEO

Blogging with Joomla

Joomla 1.7 For Web Sites

Custom Joomla Template Styling

Bespoke Custom Joomla Templates

Search Preview? You need it!

Introduction Articles in Joomla

Advertising Rules on Websites

Sef404 Virtuemart Pagination

Why Upgrade to IE9?

Expanding Joomla Content

Google's Goal

Meta Tags Help

E-Commerce Made Easy!

Joomla Installation

Joomla SEO Check

Improve your Joomla web site

Joomla htaccess re-write

Joomla Template Parameters

Email Safety

Create a hidden menu

Joomla1.6