Compass Designs .net

In an earlier section, we discussed a slightly different design process. Instead of creating the design and then doing the CSS layout, we will be doing it the other way round, the Joomla Joomla CSS first. We are doing this because we want to make an blank CSS Joomla template file that can be reused by anyone.

Let's startout with a basic blank template, no layout, just all the font typography styling. This is a blank template to help speed production of a site. Its not a production template CSS file , all styles shouldn't be filled in, ones that don't get used should be deleted before using. This blank CSS file has several features:

CSS Shorthand

There are 'shorthand' styles at the beginning of each style definition. Once you have figured out the styles, fill the shorthand versions in and delete the long versions. The syntax is:

Here is an example, rather than this...

Have this:

Read more at An Introduction to CSS shorthand properties about this syntax.

Global CSS Reset

At the beginning of this joomla CSS file is a few styles that set all styles to certain characteristics. You then have to over-ride these later on. The first key global style is:

Everything is given a zero margin and padding and then font size is set to 76.1%. The reason font is set here to 76.1% is to try and get more consistant font sizes across browsers. All font sizes are then set in em's further down. A link that discusses this idea:

An experiment in typography at The Noodle Incident (Owen Briggs)

Header Tags and Joomla CSS Titles

Sometimes I will have Joomla titles turned off and use h1/h2 tags in content. Usually I am doing this to get a SEO bonus*. To get some consistancy across titles depending whether I have the off or not, I'll define the Joomla CSS alongside the hX tags. For example:

This is personal preference, you could certainly separate them out.

Joomla Rounded Corners

Towards the end of this blank template CSS file is the code to have rounded corners. Its the same technique used at joomla.org and requires the module suffix contained in index.php file to be "-3".

OK, ready? So here is the blank CSS template. Note it doesn't include any layout, we'll be looking at this next time.

The blank template CSS file for joomla is free for you to take and use (Its called "livesite"). If you do, maybe drop me an email to show your project.

Now, how to use this blank CSS file? Well, after you have done all your joomla CSS styling, your file will have all that extra empty CSS. Just use this tool to get rid of it. Be careful and do a test to make sure you know what it does first!!

CSS Formatter and Optimiser

A preview from our next joomla Joomla tutorial

Tutorial 5: Making a 3 column Joomla Theme for your joomla website
In this joomla tutorial, we will look at a 3 column Joomla theme for your joomla website. Most joomla websites use 3 columns and having the theme start with that is a good foundation. Then later we can hide side columns if there is no content in them for that page.

Important Note!

This tutorial series was written in 2005. Since then I have developed some official documentation for Joomla Joomla template design. It uses a superior CSS layout strategy that does not reply on absolute positioning, which allows easier clearing of the footer. You can find out more in our Joomla template tutorial for 1.0

Comments (34)

Show/hide comments

joe Morgan said:

graphic designer I cant download any of the files

September 29, 2006

No Blank CSS said:

Live Site Down??? I can't download the blank css template. The livesite (@ livesite.compassdesigns.net) does not seem to exist?? Could you please post the blank css, very hard to follow the tutorial without the proper resources. Good tutorial otherwise.

October 04, 2006

checkers said:

Site down Yea its still down

October 23, 2006

Barrie North said:

Template used in tutorial http://www.compassdesigns.net/...tutorials/

October 23, 2006

Chrome said:

... wow.. great read. Just what i was looking for but in the end it was useless because i couldn't find the blank template to download. I was so bummed I nearly stepped in front of a speeding train! You wouldn't want that on your conscience would you? please please please share the correct link to your legendary blank template!

March 24, 2007

ron56 said:

... I can't find the blank template either

June 02, 2007

Amgeek said:

... 'tis sad the template mentioned in the tutorial is not available. Would really like to use it to work my newbee way through. If anyone has a copy of it I would appreciate a link to where I can find it

June 08, 2007

Erik said:

... It's right there on the website, just follow the link: http://www.compassdesigns.net/...late.html You need to register at the site to get the download button though.

July 26, 2007

Erik said:

... Woops, here's the link: http://www.compassdesigns.net/...plate.html

July 26, 2007

J soft said:

... I can't find the blank template either

August 22, 2007 | url

nozyBee said:

... Are you registerd? If not...you might not see the download-file underneath the table, to its left...good luck

August 31, 2007

andrewacross said:

... Still can't find the file, and I have logged in

September 16, 2007

admin said:

... http://www.compassdesigns.net/...plate.html

September 16, 2007

andrewacross said:

... Yay! Thank you!

September 17, 2007

cha lee said:

... thanks for share! is there any blank template CSS file for joomla 1.5?

November 28, 2007 | url

gvdven.. said:

... I can't access this site. I registerred and try to log in. But after I entered the login form (name and PW) my browser just shows a blank page at http://www.compassdesigns.net/index.php Nothing happens. I have the problem with IE6, IE7 and Opera. Now what?

January 11, 2008

ptbeau said:

... I have the same issue. I just get a blank page when I try to log in. Tried it in IE7 and Firefox 2.0.0.6.

January 14, 2008

doccornell said:

... I get this error on the page: Warning: filesize() [function.filesize]: Stat failed for home/compass/public_html/livesite.zip (errno=2 - No such file or directory)

January 17, 2008

Harold said:

... i can't access Joomla Library... Tried several times... (even with proposed links in here)

March 12, 2008

Administrator said:

... Ahhhh, the links are not right after I migrated to Joomla 1.5. You need www.compassdesigns.net/downloads.html

March 12, 2008

Matt said:

... Hi, The link to the Downloads page works fine. The link from the Downloads page to the this page works fine. However, once here the specific link to the Blank CSS (i.e. http://www.compassdesigns.net/joomla-library/joomla/livesite-series-template.html) just beneath the title Joomla Rounded Corners does not work and redirects to a 404 error.

March 17, 2008

Administrator said:

... This is the template with the blank joomla css

March 17, 2008

Richard Holland said:

... Aargh! That link still doesn't work for the blank joomla css!

September 03, 2008

Barrie North said:

... I have again had to change my download manager http://www.compassdesigns.net/downloads/folder/40-joomla10templates.html Its called "livesite"

September 03, 2008

Matt said:

... Thanks Barrie, you're a diamond.

September 03, 2008 | url

wawunx said:

... I cant download of the files

October 21, 2008 | url

newees said:

... can we find blank web 2.0 layout css for joomla 1.5

October 30, 2008 | url

Ana Kucagı said:

... I cant download of the files

November 08, 2008 | url

Carla said:

... Thanks for your great Joomla tutorials!!

November 09, 2008 | url

earthrat said:

... I am missing something. You said "module suffix contained in index.php file to be "-3"". Can you give me an example of what this is suppose to look like in my index.php file? Thanks for all the great tutorials!

November 13, 2008

earthrat said:

... Never mind I think I found it Question though, is it possible to convert a 1.0 template to 1.5 just by changing the mosLoadModule ('left',-3) to Or should I just get a 1.5 CSS template?

November 13, 2008

barrienorth said:

... @earthrat Converting templates is not too hard. The biggest problem is menus, they were completely changed from 1.0 to 1.5

November 13, 2008 | url

earthrat said:

... Thanks Barrie, I figured it was not an easy task. By the way just got your Joomla book "Joomla Users Guide" Great work! It is really helping me along...

November 25, 2008

Seattle inspector said:

... Thanks for the Template, I'm glad I found this site. Very helpful!

December 29, 2008 | url

Show/hide comment form