News Feed E-mail

Get How-To's right in your inbox. Subscribe to the HowToJoomla! news feed e-mail. Just enter your email address here:

Delivered by FeedBurner

Login






Lost Password?
No account yet? Register

Affiliates

Azrul's JomComment
JoomlaShack
iJoomla
The Joomla! Store
Member of W3C Sites dot com
How to Create a Basic Template PDF Print E-mail
Written by Cory   
Monday, 25 September 2006
Article Index
How to Create a Basic Template
Step 1: Design
Step 2: HTML Markup
Step 3: CSS
Step 4: Joomlafy
Steps 5-9
Sample Template Files

Sample Template Files

You can download the sample template installation file here. Feel free to modify it and use it for whatever purpose you want. I hope that it is useful for you in your attempts to create your very own Joomla! template.

Good luck!

Trackback(0)
Comments (30)add comment
Nesin: ...
Thank you for your help Cory!
smilies/smiley.gif
1

report abuse
vote down
vote up
January 29, 2007
Votes: +0
You're welcome! smilies/smiley.gif
2

report abuse
vote down
vote up
January 29, 2007
Votes: +0
Your site is exactly what I've been looking for, Joomla is no doubt flexible and useful but it sure is packed full of strange complexities! :- Thanks for the excellent tutorials and resources, I can tell they're gonna come in handy! smilies/cool.gif
3

report abuse
vote down
vote up
May 01, 2007
Votes: +0
Thanks for your useful advice, it has definitely helped me out alot! smilies/smiley.gif
Much appreciated, Adeline
4

report abuse
vote down
vote up
June 01, 2007
Votes: +0
great! ive been looking for thoes little tidbits
5

report abuse
vote down
vote up
June 19, 2007
Votes: +0
nice tutorial..

i have a quik question tho. how do you turn off the filter search thingy?
it gives a bad look and very useless.

please reply to my email too..thanx cory..
cant wait for your next tutorial
6

report abuse
vote down
vote up
August 02, 2007
Votes: +1
Hi ghost face,

I'm not quite sure I understand your question. What filter search thingy are you talking about?

Cory
7

report abuse
vote down
vote up
August 02, 2007
Votes: +0
Harri Vienola: ...
Hi, what all means "Joomlafy", sounds complicated?
8

report abuse
vote down
vote up
August 19, 2007
Votes: +0
Harri Vienola: ...
I dowloaded this your example packet, tried to load the sites in my localhost. I got only "restricted access", I have changed the directory right to accept me. What's wrong? I have IIS, PHP an MySQL in this PC.
9

report abuse
vote down
vote up
August 19, 2007
Votes: +1
Hi Harri,

The word "Joomlafy" is just a word I use to mean "make it work in Joomla". In other words, I take my design, HTML, and CSS, then I add the necessary PHP code to make a template work in Joomla, or "Joomlafy" it. I hope that makes sense.

I'm not sure what to tell you about your directory problem. I hope you are able to get it to work.

Thanks for visiting!
Cory
10

report abuse
vote down
vote up
August 19, 2007
Votes: +0
shaax: ...
i also got the same "restricted access" as Harri Vienola did.. why is that?
11

report abuse
vote down
vote up
September 11, 2007
Votes: +0
Hi shaax,

I have not seen that problem before you and Harri. I'm not sure why it is happening. It probably has something to do with your server configuration and/or permissions.
12

report abuse
vote down
vote up
September 11, 2007
Votes: +0
ila: ...
why in my front page " There are no Items to display" ??
13

report abuse
vote down
vote up
September 13, 2007
Votes: +0
Your front page says "There are no items to display" because you have not published any content items to the front page.
14

report abuse
vote down
vote up
September 13, 2007
Votes: +0
Brian: ...
Great advice from a great guy... Thanks for the advice, thanks for your time, and thank you for the work you put into Joomla helping people.
15

report abuse
vote down
vote up
October 02, 2007
Votes: +0
Den: ...
Where to get picture showing a position of each CSS elements for rhuk_solarflare template?
(header_outer, top_outer, top_inner, other...)
16

report abuse
vote down
vote up
October 04, 2007
Votes: +0
Hi Den,

I do not know if such a picture exists. The only thing I can tell you is to look at the source HTML of your site.

Cory
17

report abuse
vote down
vote up
October 04, 2007
Votes: +0
quick: ...
"restricted access" appears if you're using Joomla 1.5.x (this template is for 1.0.x). Strange that you managed to install this template at all...anyway you just have to enable System Legacy in the Plugin Manager.
18

report abuse
vote down
vote up
November 12, 2007
Votes: +0
anand: ...
Hi cory i am anand, I am trying for this type of article from two days.
with this tutorial i got a way to start with my own template.

Thankyou very much to you.
19

report abuse
vote down
vote up
November 22, 2007
Votes: +0
anand: ...
Hi cory, really nice tutorial.
with help of your tutorial I created a template for my home page.
And I created home page for www.mavininfotech.com.
Now i want to go for all other pages, now is it necessary to create another template ?

Please answer me. Thx in advance.
Anand kumar perumalla.
20

report abuse
vote down
vote up
November 23, 2007
Votes: +0
Geert: ...
Hi, very helpfull tut.
But there is something between the design-step and the writing of the CSS.
Adobe FW and Photoshop are slicing to put your images into tables. But I want to make a tabeless website. So, is it just that easy to write down the dimensions of the graphics etc. to make a css? Maybe you can help me white that.
Greetings,Geert
21

report abuse
vote down
vote up
December 09, 2007
Votes: +1
acmedia: ... http://acmedia.eu
Thank you for this tutorial, very clear and useful tips!
smilies/smiley.gif
22

report abuse
vote down
vote up
February 17, 2008
Votes: +1
michael: ...
Hi Cory:
First of all, I would like to thank you for this excellent work you've done to help out newbies. I've had difficulties to find documentation about how to manage/modify Joomla, so your site came handy.

I just installed Joomla 1.5 in my localhost to learn and thinking in building a community site with the following
- forum, video, blog, photos, news, buy & sell, etc.

So here are some questions from a newbie:
- in your site, you recommend to use WordPress for blog, is there any other extension you recommend beside WP to have above features?
- how to build a "tab" content just like the one showing in http://www.joomlahacks.com/joo...0,0,6,6,8/ (it's on the right side of the page, under Dell. I'm thinking in having some of the sections in tab.

Sorry for those dumb questions, I just started with Joomla. Thanks in advance.[removed]void(0);
smile
23

report abuse
vote down
vote up
February 20, 2008
Votes: +0
Steve Hylton: ...
Great template tutorial! I learned a lot. Is there a plan to update it for 1.5?
24

report abuse
vote down
vote up
April 01, 2008
Votes: +0
Thanks, Steve. I hope I get a chance to update it for 1.5. Spare time is a hard thing to come by these days.
25

report abuse
vote down
vote up
April 01, 2008
Votes: +1
vinit sinha: ... http://www.mirageds.co.in
i want to just study the joomla,,in this i want to create my own template so any one can help me to solve thisproblem
26

report abuse
vote down
vote up
May 07, 2008
Votes: +1
jaynarayan: ...
acctually i want to make DIV but it is very dificult for me so how do solve my problem kindly u have a mail me.
27

report abuse
vote down
vote up
May 13, 2008
Votes: +0
Andre: ... http://none
1) Exactly how does "mosShowHead()" know what title to display( how do you set the title)? (same for meta tags)

2) How do you define new positions for modules?

3) How does "mosMainBody()" know what to display?
28

report abuse
vote down
vote up
June 14, 2008
Votes: +0
Hi Andre,

I'll try to answer your questions, but those are pretty loaded questions that are difficult to answer in a comment post:

1) mosShowHead is a function defined in the mainframe object in Joomla 1.0. It is pre-set to load certain meta tags and the page title. The page title is set to be the site name and (if you have dynamic page titles enabled in your global configuration) the title of the article or component on any given page of the site. It is possible to customize the title, but that would take too long to explain here. mosShowHead also enables component developers to dynamically add to the "head" of your html page, so for example they could add custom CSS or javascript.

2) mosLoadModules( $positionname [, $modulestyle]) - see this article for a more thorough explanation.

3) mosMainBody() is what Joomla 1.0 uses to load the currently active main component of the system. It knows what to load based on the link query parameters sent to it. For example, if the link were "index.php?option=com_content&task=view&id=1", mosMainBody knows to load the content component to view the article whose id is 1. You set up your links in the menu manager, so you can set up a menu that links to the content component (article, category, section, etc) or any other component that you have installed.

I really hope that explanation helps. There is a lot more I could say about those 3 questions, but I think this answers them as succinctly as possible.

Good luck!
29

report abuse
vote down
vote up
June 14, 2008
Votes: +0
Natasha Murphy: ...
Cory - thank you so much for this amazing resource! It is by far the most comprehensive guide that I have found so far.

Thanks to you, I successfully created my first template - archived the file - and uploaded through the joomla interface.

Only one problem... I'm a 1.5 user!

I know that you must be a busy person. However, could you please briefly list the things one must do differently when templating for 1.5? This would be such a great help to those of us who are new to joomla and using the latest version.

Thanks again for all of your great work, Natasha smilies/cheesy.gif
30

report abuse
vote down
vote up
July 01, 2008
Votes: +0

Write comment
quote
bold
italicize
underline
strike
url
image
quote
quote
smile
wink
laugh
grin
angry
sad
shocked
cool
tongue
kiss
cry
smaller | bigger

busy

 
Tag it:
Delicious
Digg
Technorati
< Prev   Next >
mosListMessenger

About HowToJoomla

HowToJoomla was started in September 2006 by me, Cory Webb, a long-time Mambo/Joomla user with a desire to give back to the community that has given so much to him.

HowToJoomla is not the best, most comprehensive Joomla tips site out there. That's not the goal. The goal is to share some of the knowledge and experience that I have gained through years of using the world's best content managment system. I hope that you will find this site useful and visit often. As I come across new tips and ideas, I will post them here for all to see.

I hope you enjoy using HowToJoomla and find it very useful.

Please take some time to read the Disclaimer.

Thanks for visiting!

About Me

I am a 28-year-old husband and father of a beautiful baby girl named Lucy. I have a degree in Electrical Engineering from the University of Texas at Austin, an MBA from Baylor University, and over 4 years experience working with the Mambo/Joomla CMS.

On February 1, 2008, I started a web design, development, and consulting company specializing in designing and developing custom Joomla-powered websites. The new company is aptly named Cory Webb Media, LLC. The double meaning is purely unintentional, but with a last name like "Webb" it is difficult to escape the obvious puns. If you are looking for professional assistance with your website, please feel free to contact me to discuss your project.

I also run HowToJoomla, CoryWebb.com (my personal website/blog), and JoomlaForm.com (a site dedicated to promoting good design in the Joomla! community). In my spare time (if there is such a thing), I volunteer with the youth ministry at my church.

Copyright © 2006 - Cory Webb Media, LLC - All rights reserved.
Powered by Joomla!