Tutorial For Newbies Theme Developer
1. General
The structure of a theme's package is the following:
/templates/
where
The main file to describe the page is index.php. Into this file, to describe the page, are called in sequence the followings files:
header.php
hmenu.php
left_col.php
right_col.php
footer.php
These files are the mains to build the page. Then there are few minors:
credits.php
pagenotfound.php
and finally the css file to give a beautiful shape to the page:
The images to be used as background, banner, etc, are located into the directory:
images
To start with a new template, you shall choose a name (i.e. mytheme).
Then you will create the directory "mytheme" under the directory "/templates" so you will have the following:
/template/mytheme/
At this time you will copy into this directory all the files from another theme (i.e. basic, if you need a two columns).
You shall rename the css file as mytheme.css and then shall create the directory
/templates/mytheme/images/
and there you shall copy your images for the background and banner if you need them.
Now you are ready to modify the mytheme.css file to change the aspect of theme or the file index.php if you want modify the structure of the theme. Don't forget to point to your css file in the head of your index.php.
If you are adapting your template from another (i.e. from Wordpress template) do not forget to put the credits on file "credits.php".
If you want share your template, make a snapshot of the template homepage and add this image called:
[your_theme]
The image must have a max dimensions of 640x480. This will become the preview image in the admin panel.
If you are not familiar with css, php and templates, there are good explanations for newbies. In any case you can try to modify one line at time and see what happens. For Italian people there is a good tutorial from Massimiliano Carnevale downloadable at
http://www.maniegrafiche.it
and others from
http://www.html.it
When you have finished, copy the whole directory "mytheme" into the "templates" directory and choose it from Config panel of the Dashboard.
In the templates directory there is an example called "skeleton" that you can study and adapt for your template adding banners and images. It's not a best css file, but you can have an idea...
Happy design.
Note: If you need a two column template, the left and right column can be put one after the other in the order you prefer. If you are thinking to design a thin template, take into account that the minimum best view for the blog column is 430 px. A width less than 430px will result in a bad view in the page of comments.
2. Structure tree of theme's design:
/templates/mytheme/basic.css
credits.php
footer.php
header.php
hmenu.php
images/
index.php
left_col.php
pagenotfound.php
right_col.php
3. Others details
Some pages of templates could use icons. These icons stay in the /icons/ directory :). These icons are used mainly in the administration section but can be used in the templates because are just in the root directory. If you need particular look for your template, just add your icons here and /or change the icons used in your template (i.e. download icons).
Wrote on: 04.10.2009 - 21:11
Modified: 04.10.2009 - 21:14