Pure CSS Joomla 1.5 Template Tutorial
Moderator: General Support Moderators
Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
- compass
- Joomla! Ace
- Posts: 1347
- Joined: Fri Aug 26, 2005 1:31 am
- Contact:
Pure CSS Joomla 1.5 Template Tutorial
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
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
www.compassdesigns.net - Get get free templates and news for Joomla
simplweb.com/joomla-hosting - Fully Managed Joomla Hosting - Unlimited Support
- infograf768
- Joomla! Master
- Posts: 19133
- Joined: Fri Aug 12, 2005 3:47 pm
- Location: **Translation Matters**
Re: Pure CSS Joomla 1.5 Template Tutorial
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
---------------------------------
ex-Joomla Translation Coordination Team • ex-Joomla! Production Working Group
- Jenny
- Joomla! Champion
- Posts: 6206
- Joined: Sun Aug 21, 2005 2:25 pm
- Contact:
Re: Pure CSS Joomla 1.5 Template Tutorial
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.
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
Marpo Multimedia http://marpomultimedia.com
- compass
- Joomla! Ace
- Posts: 1347
- Joined: Fri Aug 26, 2005 1:31 am
- Contact:
Re: Pure CSS Joomla 1.5 Template Tutorial
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
www.compassdesigns.net - Get get free templates and news for Joomla
simplweb.com/joomla-hosting - Fully Managed Joomla Hosting - Unlimited Support
- Jenny
- Joomla! Champion
- Posts: 6206
- Joined: Sun Aug 21, 2005 2:25 pm
- Contact:
Re: Pure CSS Joomla 1.5 Template Tutorial
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
Marpo Multimedia http://marpomultimedia.com
- Beat
- Joomla! Guru
- Posts: 844
- Joined: Thu Aug 18, 2005 8:53 am
- Location: Switzerland
- Contact:
Re: Pure CSS Joomla 1.5 Template Tutorial
Hi Barrie,
Great template tutorial, wow, very insightfull. Congrats for this great contribution to the community.
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
Great template tutorial, wow, very insightfull. Congrats for this great contribution to the community.
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
Beat
www.joomlapolis.com <= Community Builder + CBSubs Joomla membership payment system - team
hosting.joomlapolis.com <= Joomla! Hosting, by the CB Team
www.joomlapolis.com <= Community Builder + CBSubs Joomla membership payment system - team
hosting.joomlapolis.com <= Joomla! Hosting, by the CB Team
- compass
- Joomla! Ace
- Posts: 1347
- Joined: Fri Aug 26, 2005 1:31 am
- Contact:
Re: Pure CSS Joomla 1.5 Template Tutorial
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
www.compassdesigns.net - Get get free templates and news for Joomla
simplweb.com/joomla-hosting - Fully Managed Joomla Hosting - Unlimited Support
-
- Joomla! Intern
- Posts: 68
- Joined: Mon Jul 31, 2006 12:44 am
- Location: Zhuhai, China
- Contact:
Re: Pure CSS Joomla 1.5 Template Tutorial
Thanks Barrie - superb tutorial!
Please keep up all the good work!
Please keep up all the good work!
-
- Joomla! Apprentice
- Posts: 5
- Joined: Fri Nov 02, 2007 7:02 pm
Re: Pure CSS Joomla 1.5 Template Tutorial
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!
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!
- compass
- Joomla! Ace
- Posts: 1347
- Joined: Fri Aug 26, 2005 1:31 am
- Contact:
Re: Pure CSS Joomla 1.5 Template Tutorial
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
www.compassdesigns.net - Get get free templates and news for Joomla
simplweb.com/joomla-hosting - Fully Managed Joomla Hosting - Unlimited Support
-
- Joomla! Apprentice
- Posts: 31
- Joined: Mon Feb 26, 2007 11:15 pm
Re: Pure CSS Joomla 1.5 Template Tutorial
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
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
- compass
- Joomla! Ace
- Posts: 1347
- Joined: Fri Aug 26, 2005 1:31 am
- Contact:
Re: Pure CSS Joomla 1.5 Template Tutorial
Thanks
Not sure what you mean by your question. can you elaborate?
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
www.compassdesigns.net - Get get free templates and news for Joomla
simplweb.com/joomla-hosting - Fully Managed Joomla Hosting - Unlimited Support
-
- Joomla! Apprentice
- Posts: 31
- Joined: Mon Feb 26, 2007 11:15 pm
Re: Pure CSS Joomla 1.5 Template Tutorial
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.
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.
- compass
- Joomla! Ace
- Posts: 1347
- Joined: Fri Aug 26, 2005 1:31 am
- Contact:
Re: Pure CSS Joomla 1.5 Template Tutorial
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
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
www.compassdesigns.net - Get get free templates and news for Joomla
simplweb.com/joomla-hosting - Fully Managed Joomla Hosting - Unlimited Support
-
- Joomla! Apprentice
- Posts: 31
- Joined: Mon Feb 26, 2007 11:15 pm
Re: Pure CSS Joomla 1.5 Template Tutorial
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,
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,
-
- Joomla! Fledgling
- Posts: 1
- Joined: Sat Jan 26, 2008 7:12 am
Re: Pure CSS Joomla 1.5 Template Tutorial
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
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
- compass
- Joomla! Ace
- Posts: 1347
- Joined: Fri Aug 26, 2005 1:31 am
- Contact:
Re: Pure CSS Joomla 1.5 Template Tutorial
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
www.compassdesigns.net - Get get free templates and news for Joomla
simplweb.com/joomla-hosting - Fully Managed Joomla Hosting - Unlimited Support
-
- Joomla! Enthusiast
- Posts: 178
- Joined: Sat Jun 16, 2007 6:34 pm
Re: Pure CSS Joomla 1.5 Template Tutorial
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!
- compass
- Joomla! Ace
- Posts: 1347
- Joined: Fri Aug 26, 2005 1:31 am
- Contact:
Re: Pure CSS Joomla 1.5 Template Tutorial
Thanks (again)
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
www.compassdesigns.net - Get get free templates and news for Joomla
simplweb.com/joomla-hosting - Fully Managed Joomla Hosting - Unlimited Support
-
- Joomla! Fledgling
- Posts: 1
- Joined: Fri Feb 01, 2008 12:04 am
- Location: Kuala Lumpur, Malaysia
Re: Pure CSS Joomla 1.5 Template Tutorial
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!
-
- 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
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.
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
Author: Joomla! 4: BASIC TRAINING - Boots on the Ground @ Amazon.com
Joomla! Magazine - https://magazine.joomla.org/all-issues/ ... c-training
- Jenny
- Joomla! Champion
- Posts: 6206
- Joined: Sun Aug 21, 2005 2:25 pm
- Contact:
Re: Pure CSS Joomla 1.5 Template Tutorial
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.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.
Co-author of the Official Joomla! Book http://officialjoomlabook.com
Marpo Multimedia http://marpomultimedia.com
Marpo Multimedia http://marpomultimedia.com