The Joomla! Forum ™



Forum rules


Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.



Post new topic This topic is locked, you cannot edit posts or make further replies.  [ 22 posts ] 
Author Message
PostPosted: Thu Oct 04, 2007 12:57 am 
User avatar
Joomla! Ace
Joomla! Ace

Joined: Fri Aug 26, 2005 1:31 am
Posts: 1347
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.

_________________
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


Last edited by Jenny on Sun Oct 07, 2007 3:40 pm, edited 1 time in total.

Top
 Profile  
 
PostPosted: Fri Oct 05, 2007 5:44 am 
User avatar
Joomla! Master
Joomla! Master

Joined: Fri Aug 12, 2005 3:47 pm
Posts: 16668
Location: **Translation Matters**
File size is beyond anybody's permissions. It is a global setting as far as I know.

_________________
Jean-Marie Simonet / infograf · http://www.info-graf.fr
Multilanguage in 2.5: http://help.joomla.org/files/EN-GB_multilang_tutorial.pdf
---------------------------------
Joomla Translation Coordination Team • Joomla! Production Working Group


Top
 Profile  
 
PostPosted: Sat Oct 06, 2007 12:21 am 
User avatar
Joomla! Champion
Joomla! Champion

Joined: Sun Aug 21, 2005 2:25 pm
Posts: 6168
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.

_________________
Co-author of the Official Joomla! Book http://officialjoomlabook.com
Marpo Multimedia http://marpomultimedia.com


Last edited by Jenny on Sat Oct 06, 2007 12:35 am, edited 1 time in total.

Top
 Profile  
 
PostPosted: Sat Oct 06, 2007 12:49 pm 
User avatar
Joomla! Ace
Joomla! Ace

Joined: Fri Aug 26, 2005 1:31 am
Posts: 1347
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


Top
 Profile  
 
PostPosted: Sat Oct 06, 2007 1:57 pm 
User avatar
Joomla! Champion
Joomla! Champion

Joined: Sun Aug 21, 2005 2:25 pm
Posts: 6168
Edit: Link has been provided by Barrie for a direct download of the pdf.  See original post.  :)

_________________
Co-author of the Official Joomla! Book http://officialjoomlabook.com
Marpo Multimedia http://marpomultimedia.com


Last edited by Jenny on Sun Oct 07, 2007 3:41 pm, edited 1 time in total.

Top
 Profile  
 
PostPosted: Mon Oct 08, 2007 10:31 am 
User avatar
Joomla! Guru
Joomla! Guru

Joined: Thu Aug 18, 2005 8:53 am
Posts: 824
Location: Switzerland
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 ("
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


Top
 Profile  
 
PostPosted: Mon Oct 08, 2007 4:09 pm 
User avatar
Joomla! Ace
Joomla! Ace

Joined: Fri Aug 26, 2005 1:31 am
Posts: 1347
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


Top
 Profile  
 
PostPosted: Mon Oct 08, 2007 5:20 pm 
User avatar
Joomla! Intern
Joomla! Intern

Joined: Mon Jul 31, 2006 12:44 am
Posts: 68
Location: Zhuhai, China
Thanks Barrie - superb tutorial!

Please keep up all the good work!  ;D

_________________
http://www.cooscreations.com


Top
 Profile  
 
PostPosted: Fri Nov 02, 2007 7:14 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Fri Nov 02, 2007 7:02 pm
Posts: 5
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!


Top
 Profile  
 
PostPosted: Fri Nov 02, 2007 7:39 pm 
User avatar
Joomla! Ace
Joomla! Ace

Joined: Fri Aug 26, 2005 1:31 am
Posts: 1347
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


Top
 Profile  
 
PostPosted: Fri Jan 25, 2008 7:37 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Mon Feb 26, 2007 11:15 pm
Posts: 31
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


Top
 Profile  
 
PostPosted: Fri Jan 25, 2008 7:40 pm 
User avatar
Joomla! Ace
Joomla! Ace

Joined: Fri Aug 26, 2005 1:31 am
Posts: 1347
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


Top
 Profile  
 
PostPosted: Fri Jan 25, 2008 7:51 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Mon Feb 26, 2007 11:15 pm
Posts: 31
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


Top
 Profile  
 
PostPosted: Fri Jan 25, 2008 7:56 pm 
User avatar
Joomla! Ace
Joomla! Ace

Joined: Fri Aug 26, 2005 1:31 am
Posts: 1347
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


Top
 Profile  
 
PostPosted: Fri Jan 25, 2008 9:36 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Mon Feb 26, 2007 11:15 pm
Posts: 31
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


Top
 Profile  
 
PostPosted: Sat Jan 26, 2008 7:23 am 
Joomla! Fledgling
Joomla! Fledgling

Joined: Sat Jan 26, 2008 7:12 am
Posts: 1
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


Top
 Profile  
 
PostPosted: Sun Jan 27, 2008 8:10 pm 
User avatar
Joomla! Ace
Joomla! Ace

Joined: Fri Aug 26, 2005 1:31 am
Posts: 1347
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


Top
 Profile  
 
PostPosted: Mon Jan 28, 2008 4:30 pm 
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Sat Jun 16, 2007 6:34 pm
Posts: 178
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!


Top
 Profile  
 
PostPosted: Mon Jan 28, 2008 6:10 pm 
User avatar
Joomla! Ace
Joomla! Ace

Joined: Fri Aug 26, 2005 1:31 am
Posts: 1347
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


Top
 Profile  
 
PostPosted: Fri Feb 01, 2008 6:46 pm 
Joomla! Fledgling
Joomla! Fledgling

Joined: Fri Feb 01, 2008 12:04 am
Posts: 1
Location: Kuala Lumpur, Malaysia
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!


Top
 Profile  
 
PostPosted: Sat Feb 02, 2008 4:51 pm 
Joomla! Hero
Joomla! Hero

Joined: Sun Jun 25, 2006 12:12 am
Posts: 2853
Location: Salisbury, NC/USA (N. of Charlotte)
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.

_________________
http://www.200mphMedia.net
Author: Joomla 1.6 Picture Yourself Series book @ Amazon.com
Book also covers Version 1.7, 2.5, which had no notable/major user-side changes.


Top
 Profile  
 
PostPosted: Sat Feb 02, 2008 5:03 pm 
User avatar
Joomla! Champion
Joomla! Champion

Joined: Sun Aug 21, 2005 2:25 pm
Posts: 6168
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


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic This topic is locked, you cannot edit posts or make further replies.  [ 22 posts ] 



Who is online

Users browsing this forum: No registered users and 11 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group