|
NB - The following is NOT a definitive guide, it is aimed squarely at a beginner or someone with very little html/css experience
STOP PRESS
>>> ! Now you can create your own Template with a special program <<<
Make your own template cont...
WARNING: If your experience of html and css is minimal, you will have to spend a lot of time (especially with css - cascading style sheets) gaining some competency the subject. This could be very time consuming.
Making your own template: Method 1
- The easiest way is to take an Open Source template (GPL) and modify it. I recommend that you choose one which is purely css coded in the index.php file. How will you know? Use a text editor (or swop to ithe template in the template manager and then choose "edit html" to have a look) and look for lots of div statements with code like "id="id_name" and/or "class="Class_name" with little or NO code containing "<table...> or "<td...> etc.
- Here's some chunks of examples of the above:
This is a CSS-based index.php file from a template folder -
------------------------------------------------------------------------------------
<div id="center">
<div id="main_bg">
<div id="content_bg">
<div id="header">
<div id="newflash">
<div>
</div>
</div>
</div>
<div id="topmenu">
</div>
<div id="content">
<div class="padding">
Home  How to Joomla Templates Making your Own Template
Parse error: syntax error, unexpected $end in /home/usejooml/public_html/mambots/content/DirectPHP.php(64) : eval()'d code on line 1
<div class="highlight">
</div>
Parse error: syntax error, unexpected '}' in /home/usejooml/public_html/mambots/content/DirectPHP.php(64) : eval()'d code on line 1
</div>
</div>
<div id="navigation">
<div class="padding">
Newsletter - Signup and Learn to use Joomla!
| (Get a Free Report on the Best Joomla! Extensions upon Signup!) |
</div>
</div>
<div id="footer">
Designed by <a href="http://www.rockettheme.com">rockettheme.com</a>
</div>
</div>
</div>
</div>
------------------------------------------------------------------------------------
OK, what you are seeing above makes anything you want to change fairly simple, IF it's just a matter of font size, color and maybe width etc changes.
All you need to do is go to the css file in the css folder for your template, and change parameters for the code you see above.
An example...
Look at <div id="footer"> from the above example.
Now go to the css file and find...
------------------------------------
#footer {
clear: both;
height: 30px;
line-height: 30px;
color: #999;
}
------------------------------------
You could now change the (font) color without causing any harm... !
- Now go to "Altering a Free Template" to see how to change the header image (if any) and Company name.
Method 2 - Make your own template from scratch ! (not recommended)
|
