Compassdesigns.net

Teaching - Web - Sailing

  • Home
  • Services

4: A Blank Template CSS file for Joomla

November 12, 2005 By barrie@compassdesigns.net Leave a Comment

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:

font: font-size |font-style | font-variant | font-weight |
line-height | font-family

Here is an example, rather than this…

font-size:100%;
font-family:Arial,Helvetica,sans-serif;
font-style:italic;
font-weight:bold;
line-height:130%em;

Have this:

font: 100%/130% Arial,Helvetica,sans-serif italic bold;

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:

* {
margin: 0;
padding: 0;
}
body {……..
font-size:
76.1%;……..

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:

h1,.componentheading {…

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

*I have realised I could get a further SEO bonus by keeping the Joomla titles
to show in parameters and then hiding them through a CSS style, and making the
titles linkable. Any of these would work:

display: none;
height:0;
text-indent: -3000px;

Note that there is some discussion regarding hiding text with CSS. Please read this if
you are considering it!

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 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.

 

Important Note!

This tutorial series was written in 2005. Since then I have developed some official documentation for 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

Filed Under: Uncategorized

The Skinny

I am an entrepreneur, web consultant, author and educator.

I have been involved in starting a K-12 School District, a Private High School, and three web tech companies. I also wrote one of the original and best selling books on Joomla.

And I like sailing with kids.

Recent Posts

  • Teenager Invents New Type of Hunting Camo Suit
  • A Parent’s Guide to Proficiency Based Learning
  • Proficiency/Competency Based Learning in NGSS Classrooms
  • Hunting Camouflage Website Launched
  • Get More Email Newsletter Signups With These Easy Tips
  • Proficiency Based Learning Resources
  • Social Media Redux
  • How to turn off WordPress Comments if you use Disqus
  • The API was Yesterday. The Tomorrow is iPaaS
  • Left Hook Digital Named Zapier’s First Integration Developer Partner

Top Posts

  • What Exactly is Standards-Based Teaching and Learning
  • USCG vs SOLAS Flares for Offshore Sailing

Blogroll

See3D Camo

Blaze Orange Camo

Vermont CPR

Copyright © 2023 Compass Designs ยท Musings on Education, Life, Joomla and the Web by Barrie North