When I started working with joomla, one of the most hardest thing to find was a tutorial on how to make your own joomla template. There was a bunch of templates which you can download for free, but I didn't want them since they all look the same to me. I wanted to make my own.
Although, I knew html and css pretty good, back then, php code was a matrix code for me.
Eventually, I found some tutorial for working in DreamWeaver, but since I don't usually work with DreamWeaver, I couldn't follow all the instructions, and had to made up my own proces. There are some tutorials on how to make a joomla template but you have to pay to download them...
This tutorial is here for FREE!ATTENTION: To follow this tutorial, you need to have some
preknowledge of how Joomla works. You can get tutorial about that on Joomla official webpage. This tutorial is
based on Joomla 1.0xx, not for Joomla 1.5 which is a little bit different.
Preknowledge of css and html is also required to follow these steps.
Now, lets get started...
1. Installing - First thing you need to do is to install XAMPP and Joomla on your computer (they are both FREE to download and use)
2. Creating folders - After you installed Joomla succesfully, go to folder templates and create a new folder "mytemplate" or whatever you want to call it...
Inside of "mytemplate" folder create two more folders with names "css" and "images" (these names have to be "css" and "images" and not anything else)
In folder "mytemplate" create file index.php and file templateDetails.xml (use exact names as written here).
3. Making your index.php file - Now, lets start with index.php
Open it with notepad or any other program which you usually use for coding.
First, you need to start with DOCTYPE which determines how a browser should interpret CSS.
Save the upper code in your index.php file
4. Start layering - I suppose that you have prepared some design. If not, first go to my post 8 steps for making a great web design
If you have it, start making layers as in usual html design.
Example:
When you're done with creating a skeleton html, you need to add php code for joomla.
This is when you need some preknowledge of how joomla works. The point is that Joomla has determined module positions which you can also create by yourself in backend of Joomla
Now, in your index.php you need to "call" these position with php code so that they will be shown in the layer that you want them to be shown.
Example:
You can have as much modules as you want, but try to keep it simple.
In backend of Joomla, publish your modules in positions that you want and you will now see them on your page in browser.
So, php codes which you might want to use in joomla are:
for modules
for maincontent
for date
for pathway
Only thing that is left to do now, is to play with css :D
More about that in part 2. - coming up in a few days, so stay tuned or sign up for rss or whatever... ;-))
Thursday, August 09, 2007
How to make Joomla template - part 1.
Subscribe to:
Post Comments (Atom)
9 komentari:
Thank's for tutorial. For the visitor, get more free JOomla templates in http://joomlatemplates4u.blogspot.com/
man! you rock! this is exactly what i was looking for! THANKS!
Dude......Thankx Very much.............Great work.......
Keep the Both Thumbs Up!
CMS Templates
I have my design all done in photoshop....what would be my next step after i have layout done??? Do i do a save for web and just copy the html code??? Great tutorial by the way
Great Help. Google should put this help on the top, for " how to make Joomla Template" query. Thanks.
By the way can you provide link here for your second part?
Thanks for sharing such a useful information. I was just surfing on internet and found your blog after reading this i realize that i should come here often.Buy Provillus
That was a VERY interesting one! Seriously interesting.
That was a VERY interesting one! Seriously interesting.
Post a Comment