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

3: Free Web Design Tools

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

Important Note: Where a download link is shown I have give a direct link for
the download to make the download as easy as possible. Where mirrors have been
linked to I have chosen US ones. More experienced users should examine the link
and truncate it to go to the actual site.

Free HTML/Web Design editors

Two choices here, Nvu is one I found recently and I have been playing around
with it. It seems pretty good, has built in validation (important for us) and
also a Mambo/download Nvu at no charge, including the source code if you
need to make special changes. You can get the extension from Mamboforge. The complete forge project is here.

Another choice is actually more of a validator. The “CSE HTML Validator” is
an all-in-one HTML, XHTML, CSS, link, spelling, and accessibility checker. You
can get the free version html
validator here.

Out of these two, the CSE Validator is probably better, but Nvu has the cool
extension. Ahh, what to do!

Overview of a Joomla Design

Note that neither of these are “WYSIWYG” html editors. In an editor such as
Dreaweaver you can create a web page without even seeing the html code. However,
this is perhaps not the best way to make a Joomla/Mambo page. Its important to
be able to see the html and css styles and the page in the index.php (as you saw
in the last article) is not really very long or complex.

Standards Compliant Browsers

Now we need a decent browser. Now if you are still using Internet Explorer,
goes outside and slap yourself around.

Finished? Good, you deserved it. Quite apart from the fact that IE is the
most buggy, security-hole ridden browser to ever be installed (or was that
Netscape?), using it has one big problem when designing to standards. We talked
a little in the last article about how support for CSS is not consistent across
browsers. IE has some of the worst support. To make a page look the same you
have to use CSS “hacks”. These are snippets of CSS that can only be seen by
certain browsers. Its very very important when trying to design to web standards
to use a browser that is standards compliant, then you make allowances for
browsers that aren’t. Doing it the other way around makes it difficult to say
the least. “Design for the best and then for the rest” goes the saying.

OK, so my choice is Firefox, and while you are at it, download the developer
toolbar
, it will be essential for our design work. Note that its easiest to
get the toolbar after installing firefox by actually using
Firefox to browse the link, then the installation is somewhat automated.

Right, so next time I look at my web stats, I don’t want to see any IE,
right?

Free Graphics Editor

In keeping with our cheapskate theme, there is actually a decent graphics
editor out there and its free. Its called GIMP and your can download it here. You also need another piece of code which you can get here. More information is at http://gimp-win.sourceforge.net/stable.html.

Note that if you go to the actual gimp.org web site, you can’t really
download much of use there. Its all the source code (its open source like
Joomla). You need to go to another site like the one above to find something you
can actually install.

So make sure you have all those downloaded/set up and then we are ready for
the Basic Joomla/Mambo CSS Template

 

Next tutorial? We will be looking at the CSS of Joomla

Tutorial 4: A Blank Template CSS file for Joomla

 

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 at:

www.compassdesigns.net/tutorials/joomla-tutorials/joomla-template-tutorial.html
www.compassdesigns.net/joomla-library/joomla/the-official-joomla-template-tutorial.html

 

Filed Under: Joomla Tutorials

2: Installing Joomla, doctype and the blank joomla template

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

Installing Joomla

There are several ways to do this, fantastico, manually, and there is a handy
tool to do it http://joomla.astang.com/autoinstall. Please note I have never
used this, so you are on your own!

My preferred method is to do it manually, its really pretty easy, especially
if you have cpanel on your host server:

  1. Go to your SQL databases and create (through phpAdmin) a database and user
    to use with Joomla.
  2. Go to the file manager in your cpanel.
  3. Create a directory for your site. Or if you are using a subdomain like we
    are (livesite.compassdesigns.net), the folder is automatically created when you
    create the subdomain. Navigate to the folder.
  4. Use the Upload file link to upload a full version of Joomla (sneak to your
    local Starbucks/College to take advantage of a big fat free connection).
  5. Click once on your uploaded file and you will see a menu appear. Click on
    “extract file contents”.
  6. Your done!

Now, we have only uploaded the files, we haven’t “installed” it yet. I am not
going to go into details of how to install http://help.joomla.org/content/view/39/132/

The Blank Joomla Template

Now, one of the points here is to start with a blank joomla
livesitedesign.zip.
In this file are the various files and folders that make up a blank Joomla
template:

  • index.php
    This file is the most important. It lays out
    the site and tells the joomla CMS where to put the different components and
    modules.
  • templateDetails.xml
    This files details the author,
    copyright and what files make up the template (including any images used)
  • template_thumbnail.png
    A simple image of your template
    (via a screen shot). Not critical
  • css/template_css.css
    The CSS of the template. The folder
    location is optional, but you have to specify where it is. Note that the file
    name is only important in that its referenced in index.php. You could call it
    what you like.
  • images/
    Any images that go with the template. Again for
    organization reasons, most designers put this in an images folder. Our will
    start out empty.

To add the template (again, copious tutorials exist) you go to the admin
portion of your site and install the template by uploading the zip file.

Note you can actually add the files individually (not in a zip) too. You have
to put them in yoursite.com/
templates.

The index.php: joomla doctype

Overview of a Joomla Design

So here we are getting to the first significant part of this project. What
actually is in an index.php file? The part we are going to talk about is the
“doctype”. This bit of code that code goes at the very top of a web page. Here
things start getting messy, and to be honest, I only have a vague grip on it
myself! If you don’t want to be bothered by all the technical details, just be
aware that at the top of our page we have this in our template:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0
Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”
<html
xmlns=”http://www.w3.org/1999/xhtml” lang=”<?php echo _LANGUAGE;
?

Got it? OK, you can skip the next part then…

Browser Wars

The nitty gritty of doctypes starts getting messy. I especially like this
observation from alistapart.com, [information on W3C’s site about doctypes is]
“written by geeks for geeks. And when I say geeks, I donÂ’t mean ordinary web
professionals like you and me. I mean geeks who make the rest of us look like
Grandma on the first day SheÂ’s Got Mail.™”. Anyway, there are several doctypes
you can use. Basically, the doctype tells the browser how to interpret the page.
Here the words “strict” and “transitional” start getting floated around
(float:left and float:right usually). Essentially, ever since it started,
different browsers have had different levels of support for CSS. This means for
example, that Internet Explorer won’t understand the “min-width” command to set
a minimum page width. Shame really, because then you have to use “hacks” in CSS
to duplicate the effect. Strict means the html (or xhtml) will be interpreted
exactly as dictated by standards. A transitional doctype means that the page
will be allowed a few agreed upon differences to the standards.

Now to complicate things, there is something called “quirks” mode. If the
doctype is wrong, outdated, or not there, then the browser goes into quirks
mode. This is an attempt to be backwards compatible, so Internet Explorer for
example, will render the page pretending as if it was IE4. Scary eh?

Now, unfortunately, people sometimes end up in quirks mode accidentally. It
usually happens two ways:

  • They use the doctype declaration straight from the WC3 web page, the link
    ends up as:

    DTD/xhtml1-strict.dtd

    Except this is a relative link on the
    WC3 server. You need the full path as I showed above.

  • Microsoft got involved again (I swear they do all their development after
    they’ve been down the pub) and set up IE6 so you could have valid pages, but be
    in quirks mode. This happens by having an “xml prolog” put
    before the doctype.

    <?xml version=”1.0″
    encoding=”iso-8859-1″?

The part about IE6 quirks mode is
important for us. We are only really designing for IE6+, so we will make sure
that its running in standards mode. This will minimize the hacks we have to do
later on. Its worth noting that the xml prolog isn’t essential anyway. We’ll be
taking note of future releases of Joomla and be leaving it off.

Standards Compliant Joomla

So, here is the good bit, making a page standards compliant, where you see
“valid xhtml” at the bottom of the page. Having your page be standards compliant
does not mean really difficult coding, or hard to understand tags. It merely
means that the code you use matches the doctype you said it would. That’s it!
Nothing else. Sometimes I get the feeling that people think of standards as some
higher level of coding, but really its just saying what you do, and then doing
what you say.

Some useful links:

  • http://www.quirksmode.org/css/quirksmode.html
  • http://www.alistapart.com/stories/doctype
  • http://www.w3.org/QA/2002/04/Web-Quality
  • http://forum.joomla.org/index.php/topic,7537.0.html
  • http://forum.joomla.org/index.php/topic,6048.0.html

What else is in index.php?

Let’s look at the structure of the header first. A great outline is at http://help.joomla.org/content/view/44/60/. Unfortunately it
does have a layout based on tables, but we will change that.

We want to be as minimal as possible, but still have enough for a production
site. The header information we will use is:

<?php defined( ‘_VALID_MOS’ ) or die( ‘Direct Access to this
location is not allowed.’ ); ?
<!DOCTYPE html PUBLIC “-//W3C//DTD
XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”
<html
xmlns=”http://www.w3.org/1999/xhtml” lang=”<?php echo _LANGUAGE;
?
<head
<meta http-equiv=”Content-Type”
content=”text/html; <?php echo _ISO; ?
<?php mosShowHead();
?
<script type=”text/javascript”
<style
type=”text/css” media=”screen”
“<?php echo
$mosConfig_live_site; ?
/css/template_css.css”;</style
</head

OK, so what’s all that?

 

<?php defined( ‘_VALID_MOS’ ) or die( ‘Direct Access to this
location is not allowed.’ ); ?

Makes sure that the file isn’t being accessed directly.

 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0
Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”
<html
xmlns=”http://www.w3.org/1999/xhtml” lang=”<?php echo _LANGUAGE;
?

We talked about this above. The “<?php echo _LANGUAGE; ?

 

<meta http-equiv=”Content-Type” content=”text/html; <?php
echo _ISO; ?

What character set we are using (don’t ask).

 

<?php mosShowHead(); ?

Header stuff that is set in the global configuration again. It includes the
following tags (for example):

  • <title
  • <meta name=”description” content=”Installing Joomla, doctype and the
    blank joomla template” /
  • <meta name=”keywords” content=”installing joomla, joomla doctype, blank
    joomla tempate” /
  • <meta name=”Generator” content=”Joomla! – Copyright (C) 2005 Open Source
    Matters. All rights reserved.” /
  • <meta name=”robots” content=”index, follow” /
  • <link rel=”shortcut icon” href=”images/favicon.ico” /

We’ll come back to this later.

 

<script type=”text/javascript”

To stop a bug, that being a flash of un styled content. Details courtesy of
Blue Robot. Note this can be any script file and we’ll be adding one in here
later.

 

<style type=”text/css” media=”screen”
“<?php
echo $mosConfig_live_site; ?
/css/template_css.css”;</style

I am using import as a way to stop the site breaking with Netscape 4. Users
of ancient browsers won’t be able to get the CSS sheet so will see our neat un
styled content. If you wanted to cater to these older browsers, we would have
too many CSS hacks, so we do this. Somewhat of a brutal one, but hey, what are
you doing with Netscape 4 anyway?

A blank joomla template body

This will be very very easy! Ready?

<body
<?php echo $mosConfig_sitename;
?
<?php mospathway() ?
<?php
mosLoadModules(‘top’);?
<?php mosLoadModules(‘left’);?
<?php
mosMainBody(); ?
<?php mosLoadModules(‘right’);?
<?php
mosLoadModules(‘bottom’);?
<?php include_once(‘includes/footer.php’);
?
</body
</html

Now that’s what I call lean code! I have a reasonably logical order:

  1. name of the site
  2. the pathway
  3. top module (maybe navigation?)
  4. left modules
  5. main content
  6. right modules
  7. any bottom modules
  8. footer

This order is called semantic markup. Or at least by the time we add our
titles and sub-titles it is. Basically, it means the term paper like you used to
write at college, you know, the one with neat logical titles, headers and
organization. From a web point of view, it means a page can be read by anyone, a
browser, a spider or a screen reader. Semantic layout is the cornerstone of
accessibility. For the wiki amongst you you can read more about semantic layout
here
.

Now its worth noting that what we have here really is only the potential for
semantic layout. If one were to go ahead and put random modules in random
locations, then you would have a mess. An important consideration for CMS sites,
a template is only as good as the population of the content. It is this that
often trips desingers up when trying to make their valid joomla template.

Now at this point, the only CSS I have applied is set all text to Verdana and
76% size.

 

A preview from our next joomla tutorial

Tutorial 3: Free Web Design Tools
So we are about to begin design the site for
real, but first we need a few tools. Now, everyone probably has their own
favorites, but here is a list I have been working on of all the tools you will
need to design a site. The good part? They are all
free for the
downloading.

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 at:

www.compassdesigns.net/tutorials/joomla-tutorials/joomla-template-tutorial.html
www.compassdesigns.net/joomla-library/joomla/the-official-joomla-template-tutorial.html

 

 

Filed Under: Joomla Tutorials

1. Creating a W3C valid Joomla template

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

Joomla Design for Web Standards

You may have seen words such as “web standards” or
“CSS” or even “accessibility“. They are often all used together in some sort
of commentary about a “design for the future rather than the past”.

What do we mean by that?

We’ll discuss it more in another article, but many web pages are designed for
older browsers. How so? Browsers have continually evolved since the www started.
New ones have appeared and old ones have disappeared (remember Netscape?).
Another complicating factor is that different browser makers (like Microsoft)
tend to have their browsers interpret html/xhtml in slightly different ways.
This has lead to web designers having to design their websites to support older
browsers rather than new ones. It’s often decided that the web page needs to
appear properly to these “legacy” browsers.

Web standards put into place a common set of “rules” for all web browsers to
use to show a web page. The main organization pushing these standards is the World Wide Web
Consortium
(WC3), whose Director, Tim Berners-Lee has the distinction of
actually inventing the world wide web in 1989 (how’s that on a resume!).

Cascading style sheets or CSS was developed a few years ago that made styling
easier for web designers. You have all styles in a separate file and they are
applied to the whole site. Rrecently is has been part of a movement to separate
content from presentation. This is another thing we’ll visit later, right now
we’ll just note that using CSS is key to building a valid Joomla
website
that meets WC3 standards.

Accessibility, sometimes mistakenly called usability, is an attempt for a
page to be accessible to all possible viewers. Usually this is chosen to mean
such examples as someone that is blind (uses a screen reader) or old (struggles
with small fonts/delicate mouse based navigation). I use these two as examples
as they are the ones quoted most often (don’t shoot the messenger!). I take a
much broader view and include viewers with or without disabilities, young or
old, or even non-human, such as search engine spiders!

Trying to get your joomla website to meet these standards can be hard. Any
sort of CMS generates its content dynamically, which can mean code gets put in
that invalidates your site, the joomla design is never constant.

Overview of a Joomla Design

There is no “right way” to create a website, it depends on the designer’s own
background. Those more graphical make an “image” of a page in a graphics program
like Photoshop and then break up the images to use (known as slice and dice).
More technologically inclined designers will often just jump straight into the
CSS and start coding. As a goal of this project is to have the process be as
transparent as possible for people to see, we’ll use a process with lots of
small steps. We’ll have two other twists in the joomla design
process
:

  • We will put up a site a raw content very early in the process, normally this
    would come as one of the last stages.
  • We will design a basic 3 column CSS joomla template first and then adapt to
    our desired design. We are doing this so that it’s possible to see a “universal
    layout” and see how it can be adapted to different needs.

So, with those two points in mind, here is our modified design process.

  1. Outline and discuss website criteria.
  2. Install Joomla with no CSS, a raw joomla design with no styling, publish
    onto web.
  3. Create basic position 3 column CSS layout.
  4. Adapt 3 column CSS joomla template and complete any further styling.
  5. Adapt this Joomla design to achieve desired site functionality.
  6. Take comments generated by community and create detailed guide to building a
    valid Joomla website.

The URL is http://livesite.compassdesigns.net.
We’ll start with a fresh Joomla website install. We’ll use this section of this
website to place the articles discussing the process. We’ll also use a comment
tool so that anyone can make comments. Hopefully this will be a learning
experience for us all.

Summary:

  • Joomla is a free, powerful content management system, we’ll be using it to
    build a valid Joomla template that meets WC3 standards.
  • Web Standards describe a set of rules for all web browsers to use to
    interpret web pages. CSS is a design protocol that is closely tied to web
    standards.
  • Getting a joomla design to meet W3C standards and validate can be difficult.
  • Microsoft needs to be taken out back and shot.

 

A preview from our next joomla tutorial

Tutorial
2: Installing Joomla, doctype and the blank joomla template
In this
article we will look quickly at installing joomla and then
spend most of our time discussing the joomla doctype and how it
relates to a valid joomla site. We’ll also briefly look at how
to construct a basic or blank joomla template with the
index.php file.

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 at:

www.compassdesigns.net/tutorials/joomla-tutorials/joomla-template-tutorial.html
www.compassdesigns.net/joomla-library/joomla/the-official-joomla-template-tutorial.html

 

 

Filed Under: Joomla Tutorials

A Network of Town Web Sites

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

Compass is to design a series of websites for Strafford, VT. They will
include interconnected sites for the local school and libraries and
other community organizations in the town. Each will have a design
based on a central town theme, and be closely interconnected through
links. The goal of the web network is to “increase communication
between the community and its organizations”.

Filed Under: Uncategorized

  • « Previous Page
  • 1
  • …
  • 120
  • 121
  • 122
  • 123
  • Next Page »

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

  • Gear Review: Mantus Chain Hook

Blogroll

See3D Camo

Blaze Orange Camo

Vermont CPR

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