- Error
Joomla! 1.5 and the Million Dollar Wedding
Joomla!, quick, rapid, fast, speedy and custom
Written by Arno Zijlstra
Step 6: The fun part, it’s play time! Yeehaw!
Now once the above is done you are ready to start playing with your actual design.
The motto is, don’t be afraid just try and find out!
I’ve put some CSS background images in the template, you can just replace them with your own beautiful images and see the site change with incredible speed.
In the file called “reset.css” there is CSS that you normally don’t have to change. The CSS reset was created by web guru Eric Meyer at http://meyerweb.com and there are pro’s and con’s for using it, but I like it, so I use it. What it does is basically reset different interpretations of CSS that browsers begin with so that you have a known, blank start to work with.
The file called “pageframe.css” is the file that just holds the CSS for the frame of the site. This is the place where I set the header values, the position of the sidebar etc etc
The file called “pagestyle.css” is where the candy goes, menu styles, module styles and everything that is really a site frame matter.
The reason I make such a separation is that by having the frame CSS in its own file I can very easily change the layout of the site, for example having the site-bar appear right instead of left.
The file called “index.php” is where the markup lives, just open it up in a text-editor and have a look at what is in there.
Here are some things you will find:
- The statement, below, is a Joomla! security check to make sure the file is only be used trough the CMS and not called directly through a browser URL:
<?php defined('_JEXEC') or die('Restricted access'); ?> - The DOCTYPE declaration tells a browser how to render the site.
- The HTML tag which also passes information to the browser,; there is a end HTML tag way below which is the end of the page.
- Between the <head> and </head> tags Joomla will generate Meta information for the browser to read and insert CSS and JavaScript files that are to be included in the page rendering. Joomla! has a tag that will generate the default information and files and it looks like this:
<jdoc:include type="head" /?>
- Next, you will see the <body> and at the end just before the </html> tag there is a </body> tag. In between those tags is the markup which produces your website’s looks.
- You’ll see a <div id=header-container>something else</div> which is of course the header container of your site. The ID is used by the CSS to add presentation rules and should always be unique, used just once per page. Look in pageframe.css for an example:
#header-container { height: 200px; background: url(../images/header_back.png) 0 0 no-repeat; } - You’ll also see things like <div class=”inner”>something else</div?> which I’ve put in there to show that something with a class can be used many times on a page. The inner in this case puts a 10pixel padding inside some of the containers. The padding is set in frame.css, look for:
.inner { padding: 0 10px 10px 10px; /* no top padding */ } - Some divs have a class=”clearfix” which is a “hack” that makes sure a div wraps around two or more floating elements inside that div but that’s not something to break your head over now.
- You’ll also find things like:
<?php if($this->countModules('content_top')) : ?> <jdoc:include type="modules" name="content_top" style="raw" /?> <?php endif; ?>
Which are the Joomla! tags that render your modules. The above will first check/count if there are modules published on the position “content_top” and if there are will show all modules that are published for that position with a “raw” style which is minimal markup. You could change that to xHTML for example and have some more markup per module to style.
2008-11-28 09:14:11
2008-12-03 19:55:16
2008-12-10 12:52:44
A very good article.I would like to read more regrading template development.
thanks
2009-01-25 05:34:37
2009-07-02 21:06:59
I just completed this tutorial, and I set-up my first "from scratch" template. I must say I agree with you... building your own design code is way better and faster. I used to work over off-the-shelf templates, but spent most of my time figuring-out where things were through trial & error.
Many thanks for your help here:
Here is a link to the site I just built using this very tutorial:
London Laser Training
I look forward to any new articles you might write in the future
--Rob
2009-09-16 05:31:02