The Blank Template CSS for Joomla

Written by Amanda Tabush Amanda Tabush

Published: 18 May 2007 18 May 2007

Tutorial 4: The Blank Template CSS for Joomla

Reprinted with permission from Compass Design: Valid W3C joomla template designs for your website

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 CSS first. We are doing this because we want to make an blank CSS 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. 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 tutorial

Tutorial 5: Making a 3 column Joomla Theme for your joomla website
In this joomla tutorial, we will look at a 3 column 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.

� 2005 Compass Design/Barrie North, December 2005.
Barrie creates valid joomla template designs at his consultancy, Compass Design

Presenting at Dutch Joomla Day

Written by Barrie North Barrie North

Published: 18 May 2007 18 May 2007

The second Dutch Joomla! Days will be held on December 8th & 9th 2006, in Den Bosch, The Netherlands. Day one will focus on Joomla! in business. The second day will be the Joomla! Community day. Several key Joomla! community members will attend the conference - among them six core team members and a surprise guest.

Our own Barrie North will be at the event, presenting a brief outline of some of the new features of template design in 1.5. If you are in the area, drop by and say hi!

Read more: Presenting at Dutch Joomla Day

Community Announcement

Written by TJ Baker TJ Baker

Published: 18 May 2007 18 May 2007

Greetings and Happy New Year to all!

This purpose of this letter is just to fill you in on some changes to come in 2006 and to recap our first year with the Joomla! community.

A lot of us have a new sense of freshness, especially since the Joomla/Mambo rebranding and Id like to personally thank the entire community for such a great success on the behalf of JoomlaShack. There are so many success stories I can't even begin to list them individually. Because of you, in just the past 3 months we were able to move our data do a dedicated server, create 8 free templates for the community, 20 variations of commercial templates and assorted modules as well as helping to launch over 60 Joomla powered sites, assist in the development of 3 community sites and donate over $1,000.00 in donations to victims of hurricane Katrina. Again, thank you! This would have never been possible without such a dedicated community and excellent camaraderie among other Joomla! developers..

Read more: Community Announcement

Joomla! Jargon

Written by Steve Burge Steve Burge

Published: 18 May 2007 18 May 2007

Dictionary.com defines jargon like this:

1. jargon: -noun, the language, esp. the vocabulary, peculiar to a particular trade, profession, or group: medical jargon.

It also defines jargon like this:

2. jargon: -noun, unintelligible or meaningless talk or writing; gibberish.

Joomla!'s roots go back a few years, and it definitely has a language all its own. Seasoned veterans are fluent in Joomla! jargon, but for "newbies", that second definition is probably the most appropriate definition for what Joomla! jargon really is. For that reason, I have decided to attempt to compile a list of the most commonly used words and/or phrases in Joomla!, and give them a definition that actually means something to a non-veteran Joomla! user.

Read more: Joomla! Jargon

How can I link to a content item without first creating a menu link?

Written by TJ Baker TJ Baker

Published: 18 May 2007 18 May 2007

Ever wonered how to link to a content item without first creating a menu item? Read on if you want to find out the shortcut.

Read more: How can I link to a content item without first creating a menu link?

Linux World Expo London 2006

Written by TJ Baker TJ Baker

Published: 18 May 2007 18 May 2007

Well, another successful week in the Joomla! universe.

In case you didn't hear this week in London Joomla! had bestowed upon it for the second year in succession the Best Linux / Open Source Project award by LinuxUser and Developer Magazine

The event itself was a rip roaring success literally hundreds of (if not a few thousand) people turned up at the booth eager to learn about Joomla! in general and Joomla! 1.5b in particular. The first public unveiling of Joomla! 1.5b had tongues wagging and imaginations soaring, the heartening thing was that people just simply "got it". Day one was spent on our feet, I got to London early afternoon and headed straight to the Exhibition centre suitcase in hand to be met by fellow Joomla! community member Mitchell Annable (Nottingham UK) and Joomla! core developer Johan Janssens (Diest Belgium). I was there five minutes before Johan turned to me and said "Man the booth I need to go hire a tux for tonight" - So in at the deep end for me! From minute one it was non stop I didn't get a breather, not even a drink of water, until late afternoon. By this time Johan's fellow core team members Peter Russell (Leeds, UK) and my buddy Louis Landry (New Orleans, USA) had also returned to the booth, although we didn't get a chance to even say "hello" to each other for at least two hours. Day two was a little quieter (but not much) and it was fun to see Johan holding an impromptu conference over at the Drupal booth sharing ideas and answering questions while Peter and Louis went and did some PR "work" with the LinuxUser and Developer magazine booth babes - check out the pics over at Joomla.org

From a Joomlashack perspective it was great to meet a some of the UK based Joomlashack community that popped by to say hello, it's always nice to meet people in person and hear that we're doing a great job - so a big thanks goes out to those that I met

How to use Google Adwords on a Joomla website

Written by Barrie North Barrie North

Published: 18 May 2007 18 May 2007

If you have a website (Joomla or otherwise), and you have a vague interest in getting traffic, then pay per click (PPC) need to be part of your Search Engine (SEM) strategy.

Why is pay per click so useful? If you put an ad in a magazine about your product, you pay the magazine the add fee and it goes in. At that point you are hoping that the ad is compelling enough to get people to call/email/visit your site. If you get no leads from the ad, then you still had to pay the magazine the fee.

Read more: How to use Google Adwords on a Joomla website

How to Change Your Joomla Favicon

Written by Steve Burge Steve Burge

Published: 08 May 2007 08 May 2007

The word "favicon" is short for "favorites icon", and it is the 16x16-pixel icon that is associated with your website and appears in the browser address bar and favorites menu (and in Firefox and Internet Explorer 7, it also appears on the browser tab). For this website, I am using the default Joomla! favicon because this site is a site about Joomla! The image below shows what your browser's address bar should look like when visiting this site.

All Joomla! installations come with that favicon installed, and a common mistake by many webmasters is to ignore the favicon, thereby keeping the default Joomla! icon for their site. Unless your site is about Joomla, you should not be using the default favicon. A good habit to get into when developing sites with Joomla! is to change the favaicon and use something more fitting for your site, like your logo. This article will explain how to create a favicon and then how to replace the default icon with your icon.

Read more: How to Change Your Joomla Favicon

Quick Tip: Buy this book

Written by Steve Burge Steve Burge

Published: 28 March 2007 28 March 2007

As you may know, I have been working with JoomlaShack for close to a year now. Before I started working with JoomlaShack, I knew about Barrie North from CompassDesigns.net and JoomlaShack. I knew about him because he has provided loads of free tutorials for the Joomla! community on his website. I learned much of what I know about template development from his Joomla! template tutorial.

Barrie is selling his 100+ page e-book, The Joomla! Admin Manual, at his website for $27. If you're like me, and you know the high quality of the tutorials produced by Barrie, then you know that $27 for a 100+ page e-book written by Barrie is a real bargain. I strongly encourage you to take a look at his site and decide whether or not this book is for you.

Quick Tip: Do not use the template chooser module (unless you have a very good reason)

Written by Steve Burge Steve Burge

Published: 26 March 2007 26 March 2007

Almost four years ago was the first time I ever used Mambo (the predecessor to Joomla!). As I played around with my newfound toy, I thought the template chooser was one of the coolest modules available. I could just imagine the possibilities. Users could customize the look of my site for how they wanted to view it. I could install 100 templates and let the visitor choose which one he or she liked best.

However, over time I came to realize that the template chooser module was a relatively useless feature that was very difficult to manage. Sure, I could install 100 templates and give users a choice, but those 100 templates would likely have very different layouts and include different sets of module positions. For example, one template might put the "left" module position in the left column while another template would place it at the bottom of the layout while yet another template might not include the left module position at all. You can imagine the headaches this type of situation might cause.

When developing your site, you should give careful consideration to where you want your modules positioned on the page and how you want your site to flow. It's difficult enough to accomplish this with one template, much less several templates. Also, your site's brand identity is dependent upon the design of the site. Giving your user multiple layout options only dilutes your brand and sends mixed messages to the end user.

You might have a valid reason to use the template chooser module, although at the moment I cannot think of an example of a good reason. If you do not have a specific reason to use the template chooser module (other than the "hey, that's neat" factor), my advice to you is not to use it.