The Joomla! Forum ™

Compass Design has published a six part tutorial series about creating a valid xhtml/css joomla template . Starting from building the index.php the series offers a blank CSS file for download and shows how to build a 3 column joomla website with CSS.

Tutorial 1: Creating a W3C valid Joomla template for your website
http://www.compassdesigns.net/resources/articles/validjoomlatemplate/
Summary: In this series of tutorials, we'll be building a valid joomla template. Joomla is an open source Content Management System (CMS) that is freely (literally) available and supported by a large on-line community. The site will actually be live on-line from the very beginning, you'll be able to see the different stages as the design develops. As this is a CSS designed site, you'll be able to slowly see the raw joomla design get styled step by step.

Tutorial 2: Installing Joomla, doctype and the blank template
http://www.compassdesigns.net/resources/articles/joomladoctypeblanktemplate/
Summary: 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.

Tutorial 3:Free Web Design Tools
http://www.compassdesigns.net/resources/articles/freewebdesigntools/
Summary: 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.

Tutorial 4: A Blank Template CSS file for Joomla
http://www.compassdesigns.net/resources/articles/joomlablanktemplatecss/
Summary: In an earlier section, we discussed a slightly different design process. Instead of creating the design and then doing the CSS layout, we will be doing it the other way round, the Joomla CSS first. We are doing this because we want to make an blank CSS template file that can be reused by anyone.

Tutorial 5: Making a 3 column Joomla Theme for your website
http://www.compassdesigns.net/resources/articles/3columnjoomlatheme/
Summary: 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.

Tutorial 6: Enhancing a Template for SEO
http://www.compassdesigns.net/resources/articles/joomlaseowithcss/
Summary: So we have a very basic shell of a web site. Doesn't look very interesting does it. Well, we can soon change that, let's make a few changes. We will also optimize the template for SEO. Joomla has some challenges compared to a static website, but techniques such as those we describe here can improve your joomla SEO efforts.


If anyone has any suggestions on what they would like to see in the next phase of tutorials as the live site develops, contact me at contact@compassdesigns.net

_________________
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

Hey compass

Thanks so much for all the effort you've put into this thread, I was on the live site last night trying to figure out a problem I'd been having. I read thru your notes and hey presto within 5 minutes I'd worked it out, it was something simple I'd overlooked

Haaris

_________________
http://www.bulletprooftemplates.com/ - Joomla Templates and Consultancy
http://www.bulletprooftemplates.com/for ... =viewtopic - The home of the Blank Skeleton Template for Joomla! 1.5

Hey, you're welcome!

The next few tutorials should be even better, I'll be starting to make it look like a "real website"!

_________________
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

Hi!

i'm going to read your tutorial this evening,but 1 or quick questions if  i may. I want to have a joomla site that is truly mine,is it best to use an already made template and just change the CSS file?or should i make my own from scratch?i would like to have it done as quickly as possible,but also have it nice as well.
2)unrelated question. i have downloaded numerous joomla components and modules,can i put them in my site to allow others to download?

Well, even if you use a free template, its still your site (or maybe you meant unique?)

I have found that adapting templates can end up taking longer than starting from scratch. You have to figure out whay/why the designer did stuff.

Another note would be validation, I only know of two designers that are producing W3C valid designs right now (I actually did a survey of the 20 most popular designers recently and looked if their own sites were valid), so if that's important to you, you'll have to take the solo route.

Its my understanding that as long as they were free you can host them. The best way is to check for the license posted on the oringinal site.

_________________
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

OK,you're the expert,i'll start from scratch! and yes i meant unique can this be achieved by someone who has very little html and bassically no php experience?i'm in the process of self learning,but it's hard to know where to start!
  i've got Dream Weaver+fireworks +photoshop+jsas and my own webspace.

Very little HTML and CSS skills will be the bigest problem (also perhaps your graphic design skills?). Essentailly there are many ways to achieve things when designing a site. Some will work on some browsers, some on others, some will work on all browsers but not validate etc etc etc. These things can take a lot of learning and time to make. Personally validation isn't a big thing for me or people I have made things for although it would be better to learn things right from the start and not get into bad habbits.

So basically to design your own site isn't the hard part as Joomla has paid good attention to this to make it easy. The main thing is your knowledge in general web design in the first place. Dreamweaver won't be much good to you although I believe some poeple make templates like this. The best and in my opinion only way to make a site is with a good text edior and this is even more true for a joomla template.

So I guess in general it may be a longer harder road to go down but in the end you will be far better off for it. I'm new to joomla though and so perhaps someone more experienced could shed better light on the difficulties involved.

_________________
Acrilla Studios - Web Design, Graphic Design, PHP Programming, Database Management

Hi Dyson,

That is the main reason i'm making a web site is to learn it! if the road is long or hard it doesn't matter because (Hopefully i've got time) and this all interests me very much! I wish i could go back in time,i would have learned this!!!

Awsome well then I guess the best place to learn about XHTML and CSS is at http://www.w3schools.com

When you run into the many CSS problems you will encounter I find the easiest way to find a solution is to go to google and type in a basic description. There are sites out there that list a bunch of techniques but obviously they are very specific and I find I don't need them all the time so it's easier to do a search than to look through a site listing. (As in I wouldnt look around for CSS sites and bookmark them and read through them all as it's WAY more info than you will need.)

In contrast to this the best way to learn graphic design and a program is to do every tutorial you can find! Then read up on some graphic design priciples and web design principles.

Places like http://www.cssbeauty.com/ showcase awsome sites so a trip there should give you ideas for the design of your site.

Next after learning all that I would design a site in photoshop, cut it, and then code it. finally read the above tutorials to show you ahve to turn a static page desing into a joomla template.

The above is the general way I would go about learning it and w3schools is a good place to start if you havent already found it.

_________________
Acrilla Studios - Web Design, Graphic Design, PHP Programming, Database Management

Hi!

thanks for the tipps! i talked to someone and he said learn html first that i shouldn't even think about php before that!
but i don't have any patients 

Well,

You don't really need to know php. You can get by with just knowing about the specific bits of code that insert the modules. There are a few good tutorials around for this.

_________________
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

If you does not hack the mosimage.php and your site using , your mark-up will never be W3C validated!

Why? The problem is:

-CASE 1: If you've set all the attributes for your image, would generated a code like that

0px; float: right; text-align: center; margin: 4px; padding: 4px;">
    your-image" width="230" height="175" alt="your-alt" title="your-ttl" border="0" />
   

width: width:100px;; text-align: center;">Your Caption

-CASE 2: If you've set all the attributes for your image but forgot the image caption width, would generated a code like that

0px; float: right; text-align: center; margin: 4px; padding: 4px;">
    your-image" width="230" height="175" alt="your-alt" title="your-ttl" border="0" />
   

width: ; text-align: center;">Your Caption

-------------------------------------------------------

So, what can we do to fix this problem? The solution is:

-SOLUTION 1: Using image only without any caption or... do not use

-SOLUTION 2: HACKING the mosimage.php:

LINE 152:         $width = ' width: '. $attrib[7] .'px;';
Change to  -->  $width = 'width: '. $attrib[7] .'px; ';


LINE 166:         $caption = '

';

Change to  -->  $caption = '

';

------------------------------------------------------

Here is just my individual ideal, hope it could be helful!

_________________
JoomlArt.com
Joomla/Mambo Professional Templates Club
JoomLancers.com
Get Joomla projects done today ?

Last edited by nnth on Fri Dec 23, 2005 11:15 am, edited 1 time in total.

Joomla! now is not fully support Useability and Accessibility compliance.

But I think it will be in the near future.

Some good stricks hehe

_________________
If you think it will be - it will be.

Hey Compass,

LOL, you say (and teach) someone about validate, but look at your site, is it passed ?

http://jigsaw.w3.org/css-validator/vali ... medium=all

Yes indeed!

My xhtml is valid, but I have 3 errors in my CSS:

document.body.clientWidth > 900? "900px": "auto" is some code for IE to get min/max width to work. It won't validate.

I also have opacity and the Tan hack in there, again for IE.

I view validity as a goal rather than a holy grail. If I need some design aspect that will invalidate my code, I'll go ahead and use it. There are plenty of sites out there that validate but are neither usable, accessible nor attractive!

_________________
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

Hi Compass,

Great guide, any ideas when part 7 will be released?

Thanks
Lee

i liked of your URLs, what you use to this?

_________________
André Domarques
DMD2 Soluções em TIC
http://www.dmd2.com.br

i was kinda curious about this validation effort as well... my sites rarely [never?] are perfectly "validated"... but they work over all browsers as far as i can tell. im just stating to learn CSS to design now, but it is much harder imo logically to work with than nested tables and the [god forbid] spacer.gif, let alone javascript menus.

i have been going through these tutorials and finding them very helpful, although that blank CSS file makes my head spin with all the tags and "overwritten" tags. i started to go through it taking out earlier tags that are later overwritten in the file but it made my head hurt trying to keep track. it would almost be nice to have a joomla standard css set with description for each to print out to have handy as a quick ref card or something. i am finding i need to make my CSS from scratch rather than try to edit [and swipe others CSS coding ideas as well]

_________________
barrett
pro:create.multimedia @ http://www.procreatemultimedia.com

I am using opensef for my url's.

There a a few people working on just the joomla set. I would estimate a few weeks to a month maybe and you will see one.

I know what you mean by the overwrites . Remember, its really a developer production template. I just it for designs I do so I have good sense of what I need to change. Its basically saving me type all the styles out.

_________________
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

Hi
I was looking forward to using your tutorial but it seems your site is down??

mmm

Was for a second, back up now. Links have changed to as I re-organized my content. Everything is now in "articles"

_________________
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

This is an excellent write up.  It focuses what is important in site design.

The plus is from the added information and links inside the tutorial.  This really would have been a good ready before I tried developing my template. 

Thanks for the excellent tools

htsolutions

_________________
-Your Goals Our Solutions-
http://www.homtechsol.com
http://www.htsolutionsllc.com

Hi compass

Great Tutorial ! Very nice made !
I am waiting for Tutorial 7 !

I am a beginner and only since I found your tutorial I am trying to do a Theme myself. Its much better for understanding Joomla then just get a free theme somewhere.  Thanks again !

I have one small favor to ask: I got somehow lost between tut4 and tut6. After finishing the tutorial, my side looks not at all like your example site. 

I would like to compare the files to find out where i made the mistakes. Would it be possible for you to have the final "tutorial-template" ready for download ?

would be great and probably very helpful for all beginners (or dummies) like me 
ciao
Marco

_________________
Visit:
http://www.swissgate.com
http://www.freizeitportal.ch

Great tutorial compass, I too am looking forward to the next installment.

I know it would be a pain in the ass, but, it would be cool if there were different templates set up, each at the various levels of progression, so that a user who jumps in now can take a look at the site as it will look after tutorial 2, maybe even screenshots.

Anyway, I was wondering if you plan to explain the process of slicing and dicing a mock-up image in fireworks or imageReady, obviously not in detail (unless you wanted to which is good with me), I feel that this will give the joomla the community the ability to stamp their ID on a site, something which is not explained in too many place. Obviously, the rest of the tutorial is doing that but it would be nice to take it from the mock-up stages.

Thanks.

I like your tutorials. I started a demo site for a friend  http://www.demohungry.com  and I almost have the template the way I want it.
I have been trying to find a tutorial on what I need to put in the xml file so that I can package a zip and install a template like I install a component or module.  Would your xml file accomplish this or is this still an all manual method?

        Best Regards

                        Ty

_________________
You do not have to always know the answer, just understand the question

http://www.tysonmaly.com

Good work compass.

Nice tutorial here. Helps me a lot.

_________________
"“Don't count the days- make the days count." - Jd. Abenaza
Dahil mag kajoomla! tayo! - http://www.joomla.org.ph/

An initial 'browse' of you tut- yes I'm as impressed as everyone else, (bookmarked for further exploration   but I was wondering if this is right section to ask you a question, a problem I'm having with a template (my first one lol) I made with another tutorial?...just before I start throwing up screenshots/code etc.  Basically, just a simple template (header, main body, footer with a few modules) but the banners do now show and the footer at bootom of web page, just get weird error codes..

_________________
"Seek and ye shall find..OK not too original, but sooo true of this forum!!