Pure CSS Joomla 1.5 Template Tutorial

Everything to do with Joomla! 1.5 templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Locked
User avatar
compass
Joomla! Ace
Joomla! Ace
Posts: 1347
Joined: Fri Aug 26, 2005 1:31 am
Contact:

Pure CSS Joomla 1.5 Template Tutorial

Post by compass » Thu Oct 04, 2007 12:57 am

Creating Pure CSS Joomla 1.5 Template Tutorial

In this tutorial, we'll go through the steps of creating a Joomla 1.5 template. Specifically, we will create a template that uses CSS to produce a layout without use of tables. This is a desirable goal because it means that the template code is easier to validate to World Wide Web Consortium (W3C) standards. It will also tend to load faster, be easier to maintain, and perform better in search engines. These issues are discussed in detail later in the guide.

As part of my continuing effort to give back to the community, I have released this template guide here under a Creative Commons Attribution NonCommercial ShareAlike 2.5 License. This is the same one used on the help site at Joomla.org. This means you can make any non-commercial use you'd like to, and are free to adapt (or remix) the work.

I had hoped to have this sample chapter available sooner so everyone participating in the Joomla 1.5 Template Competition could make use of it, but was not quite able to manage it.

There are FOUR templates, of increasing sophistication, that go along with the tutorial, attached here.

The guide is hosted on my site, but I have a PDF version I'd like to upload here. Its 1.3 MB, so if a mod could contact me, I'll email it to them, its size is beyond my forum permissions.


Mod Edit:  Here is the direct link to the tutorial.  Thank you Barrie for your work on this.  The direct link to your pdf will allow you to keep it up to date as you see fit to do.  -MMMedia
You do not have the required permissions to view the files attached to this post.
Last edited by Jenny on Sun Oct 07, 2007 3:40 pm, edited 1 time in total.
Follow me on Twitter @compassdesign
www.compassdesigns.net - Get get free templates and news for Joomla
simplweb.com/joomla-hosting - Fully Managed Joomla Hosting - Unlimited Support

User avatar
infograf768
Joomla! Master
Joomla! Master
Posts: 19133
Joined: Fri Aug 12, 2005 3:47 pm
Location: **Translation Matters**

Re: Pure CSS Joomla 1.5 Template Tutorial

Post by infograf768 » Fri Oct 05, 2007 5:44 am

File size is beyond anybody's permissions. It is a global setting as far as I know.
Jean-Marie Simonet / infograf
---------------------------------
ex-Joomla Translation Coordination Team • ex-Joomla! Production Working Group

User avatar
Jenny
Joomla! Champion
Joomla! Champion
Posts: 6206
Joined: Sun Aug 21, 2005 2:25 pm
Contact:

Re: Pure CSS Joomla 1.5 Template Tutorial

Post by Jenny » Sat Oct 06, 2007 12:21 am

Why don't you just hotlink the pdf in your post? 

Edit:  I would be more than happy to directly link to the pdf to make it available to people if you can send the pdf to me.  :)  Thanks for your work on this Barrie.
Last edited by Jenny on Sat Oct 06, 2007 12:35 am, edited 1 time in total.
Co-author of the Official Joomla! Book http://officialjoomlabook.com
Marpo Multimedia http://marpomultimedia.com

User avatar
compass
Joomla! Ace
Joomla! Ace
Posts: 1347
Joined: Fri Aug 26, 2005 1:31 am
Contact:

Re: Pure CSS Joomla 1.5 Template Tutorial

Post by compass » Sat Oct 06, 2007 12:49 pm

Sounds good MMMedia. Can email me at compassdesigns[at]gmail.com so I know where to send it.
Follow me on Twitter @compassdesign
www.compassdesigns.net - Get get free templates and news for Joomla
simplweb.com/joomla-hosting - Fully Managed Joomla Hosting - Unlimited Support

User avatar
Jenny
Joomla! Champion
Joomla! Champion
Posts: 6206
Joined: Sun Aug 21, 2005 2:25 pm
Contact:

Re: Pure CSS Joomla 1.5 Template Tutorial

Post by Jenny » Sat Oct 06, 2007 1:57 pm

Edit: Link has been provided by Barrie for a direct download of the pdf.  See original post.  :)
Last edited by Jenny on Sun Oct 07, 2007 3:41 pm, edited 1 time in total.
Co-author of the Official Joomla! Book http://officialjoomlabook.com
Marpo Multimedia http://marpomultimedia.com

User avatar
Beat
Joomla! Guru
Joomla! Guru
Posts: 844
Joined: Thu Aug 18, 2005 8:53 am
Location: Switzerland
Contact:

Re: Pure CSS Joomla 1.5 Template Tutorial

Post by Beat » Mon Oct 08, 2007 10:31 am

Hi Barrie,

Great template tutorial, wow, very insightfull. Congrats for this great contribution to the community. 8)

One small "bug" on page 7: params: default is "white" but it's not in the list of blue and red.... ;)

Page 9/10: it might be worth adding that in no case an xml prolog ("<?xml....") should be outputed to avoid putting IE into old quirks-mode. Some people and even template designers still think that adding it can't hurt, but NO, it hurts badly IE rendering in the margins area.

Didn't read all in details yet, but a very good read. Really cool tutorial 8)
Beat 8)
www.joomlapolis.com <= Community Builder + CBSubs Joomla membership payment system - team
hosting.joomlapolis.com <= Joomla! Hosting, by the CB Team

User avatar
compass
Joomla! Ace
Joomla! Ace
Posts: 1347
Joined: Fri Aug 26, 2005 1:31 am
Contact:

Re: Pure CSS Joomla 1.5 Template Tutorial

Post by compass » Mon Oct 08, 2007 4:09 pm

Thanks Beat! I'll try and work out a simple explanation for quirks mode...
Follow me on Twitter @compassdesign
www.compassdesigns.net - Get get free templates and news for Joomla
simplweb.com/joomla-hosting - Fully Managed Joomla Hosting - Unlimited Support

CoosCreations
Joomla! Intern
Joomla! Intern
Posts: 68
Joined: Mon Jul 31, 2006 12:44 am
Location: Zhuhai, China
Contact:

Re: Pure CSS Joomla 1.5 Template Tutorial

Post by CoosCreations » Mon Oct 08, 2007 5:20 pm

Thanks Barrie - superb tutorial!

Please keep up all the good work!  ;D

pig-tail
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Fri Nov 02, 2007 7:02 pm

Re: Pure CSS Joomla 1.5 Template Tutorial

Post by pig-tail » Fri Nov 02, 2007 7:14 pm

Hi, I am new to Joomla template but I am trying to create my first template using this great tutorial! 
One thing I had a hard time on this tutorial...

At the page 15, there's a link for CSSTemplateTutorialStep1.zip.  I tried to look for it at http://www.joomlabook.com/ but I could not find it.

Is it still available for downloading? 

Thanks!

User avatar
compass
Joomla! Ace
Joomla! Ace
Posts: 1347
Joined: Fri Aug 26, 2005 1:31 am
Contact:

Re: Pure CSS Joomla 1.5 Template Tutorial

Post by compass » Fri Nov 02, 2007 7:39 pm

you can download it right here, in the first post there should be some links.....
Follow me on Twitter @compassdesign
www.compassdesigns.net - Get get free templates and news for Joomla
simplweb.com/joomla-hosting - Fully Managed Joomla Hosting - Unlimited Support

milka
Joomla! Apprentice
Joomla! Apprentice
Posts: 31
Joined: Mon Feb 26, 2007 11:15 pm

Re: Pure CSS Joomla 1.5 Template Tutorial

Post by milka » Fri Jan 25, 2008 7:37 pm

Barry,

Thanks fo your tutorial, will probably get your book too btw. as i registered for the information newsletter and got the discount offer which makes it even more attractive.

I say just a little question, The tutorial you provide is to make a pure css template, but is it a "full powered" joomla 1.5 tutorial ? or is this a native template that we are building ?

thanks in advance
Olivier Borgognon
TDI - EFR - PADI Diving Instructor
http://www.hippocampes.com

User avatar
compass
Joomla! Ace
Joomla! Ace
Posts: 1347
Joined: Fri Aug 26, 2005 1:31 am
Contact:

Re: Pure CSS Joomla 1.5 Template Tutorial

Post by compass » Fri Jan 25, 2008 7:40 pm

Thanks :)

Not sure what you mean by your question. can you elaborate?
Follow me on Twitter @compassdesign
www.compassdesigns.net - Get get free templates and news for Joomla
simplweb.com/joomla-hosting - Fully Managed Joomla Hosting - Unlimited Support

milka
Joomla! Apprentice
Joomla! Apprentice
Posts: 31
Joined: Mon Feb 26, 2007 11:15 pm

Re: Pure CSS Joomla 1.5 Template Tutorial

Post by milka » Fri Jan 25, 2008 7:51 pm

barry, i might be totally off track so if i am don't hesitate to tell me :) i'm still pretty useless at all this and learning :)

here is what i read about the templates : http://tutorials.rockettheme.com/joomla ... ative.html

the "native" and "full conversion" is basically to go from a 1.x to a 1.5 template. and there is some stuff about the features of joomla 1.5 versus the ones of joomla 1.x which i'm not quite clear with.

My question is does the template we created and designed use joomla 1.5 to it's full extent or is it a template based on the techniques we would have used to develop a joomla 1.x template with the modifications to make it 1.5 compatible and functional.

rereading myself i'm not quite sure if i'm clear, but i don't really know how to explain that better :) if anyone understood what i meant and wants to reformulate go ahead.
Olivier Borgognon
TDI - EFR - PADI Diving Instructor
http://www.hippocampes.com

User avatar
compass
Joomla! Ace
Joomla! Ace
Posts: 1347
Joined: Fri Aug 26, 2005 1:31 am
Contact:

Re: Pure CSS Joomla 1.5 Template Tutorial

Post by compass » Fri Jan 25, 2008 7:56 pm

Aha!

The tutorial available (and the coorsponding 4 learning templates)  is to build a native from scratch 1.5 template. They would not work on 1.0.X
Follow me on Twitter @compassdesign
www.compassdesigns.net - Get get free templates and news for Joomla
simplweb.com/joomla-hosting - Fully Managed Joomla Hosting - Unlimited Support

milka
Joomla! Apprentice
Joomla! Apprentice
Posts: 31
Joined: Mon Feb 26, 2007 11:15 pm

Re: Pure CSS Joomla 1.5 Template Tutorial

Post by milka » Fri Jan 25, 2008 9:36 pm

thank you barry :)

i will redo the tutorial a few times (even if self taught i can be really dumb and slow at understanding... must be my swiss side ;) ) and then attack my own template for my website.

all the best, to you,
Olivier Borgognon
TDI - EFR - PADI Diving Instructor
http://www.hippocampes.com

mchl9871
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Sat Jan 26, 2008 7:12 am

Re: Pure CSS Joomla 1.5 Template Tutorial

Post by mchl9871 » Sat Jan 26, 2008 7:23 am

Compass

mate, thanks for the tutorial it is possibly the most clear and concise one I have seen (including material I have paid for)
please keep up the good work!

Cheers

User avatar
compass
Joomla! Ace
Joomla! Ace
Posts: 1347
Joined: Fri Aug 26, 2005 1:31 am
Contact:

Re: Pure CSS Joomla 1.5 Template Tutorial

Post by compass » Sun Jan 27, 2008 8:10 pm

Thanks :)
Follow me on Twitter @compassdesign
www.compassdesigns.net - Get get free templates and news for Joomla
simplweb.com/joomla-hosting - Fully Managed Joomla Hosting - Unlimited Support

jkinz
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 178
Joined: Sat Jun 16, 2007 6:34 pm

Re: Pure CSS Joomla 1.5 Template Tutorial

Post by jkinz » Mon Jan 28, 2008 4:30 pm

All I can say is WOW. I just started getting into Joomla before the 1.5 release and was somewhat confused when I looked through the 1.5 code and tried to make sense of it. Then I looked into some Tutorials and it still didn't make sense. After having read your tutorial, everything makes sense to me now, from hiding the columns, to properly positioning things on the page. Bravo friend, bravo!

User avatar
compass
Joomla! Ace
Joomla! Ace
Posts: 1347
Joined: Fri Aug 26, 2005 1:31 am
Contact:

Re: Pure CSS Joomla 1.5 Template Tutorial

Post by compass » Mon Jan 28, 2008 6:10 pm

Thanks (again)  :laugh:
Follow me on Twitter @compassdesign
www.compassdesigns.net - Get get free templates and news for Joomla
simplweb.com/joomla-hosting - Fully Managed Joomla Hosting - Unlimited Support

mziskandar
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Fri Feb 01, 2008 12:04 am
Location: Kuala Lumpur, Malaysia

Re: Pure CSS Joomla 1.5 Template Tutorial

Post by mziskandar » Fri Feb 01, 2008 6:46 pm

great job! just what i am looking for. with this proper guidance, i won't have to keep guessing just to get the design i want. thanks man!

herb200mph
Joomla! Virtuoso
Joomla! Virtuoso
Posts: 3592
Joined: Sun Jun 25, 2006 12:12 am
Location: Salisbury, NC/USA (N. of Charlotte)
Contact:

Re: Pure CSS Joomla 1.5 Template Tutorial

Post by herb200mph » Sat Feb 02, 2008 4:51 pm

Can you put the Guide Document in the top section of the forum so it will be visble all the time for new users.

Otherwise, it gets shoved down the topic list.

Make it a non-reply info subject.
Author: Joomla! 5: Boots on the Ground, Volume 1 @ Amazon.com
Author: Joomla! 4: BASIC TRAINING - Boots on the Ground @ Amazon.com
Joomla! Magazine - https://magazine.joomla.org/all-issues/ ... c-training

User avatar
Jenny
Joomla! Champion
Joomla! Champion
Posts: 6206
Joined: Sun Aug 21, 2005 2:25 pm
Contact:

Re: Pure CSS Joomla 1.5 Template Tutorial

Post by Jenny » Sat Feb 02, 2008 5:03 pm

herb200mph wrote: Can you put the Guide Document in the top section of the forum so it will be visble all the time for new users.

Otherwise, it gets shoved down the topic list.

Make it a non-reply info subject.
A link to this thread has been included in the Documentation sticky.  Thanks for the suggestion.  I am going to lock this topic now to replies.
Co-author of the Official Joomla! Book http://officialjoomlabook.com
Marpo Multimedia http://marpomultimedia.com


Locked

Return to “Templates for Joomla! 1.5”