1How to add a new module
to your newly installed Joomla!
(when you didn't install the sample data)?
To recreate the template demo design, you will have to install the Joomla! 1.7 Quickstart. If you manually installed the template on your existing setup, you will have to manually create each article and module to suit your needs.
I will show you here how to enable the mod_breadcrumbs module as one of my new friends asked me how.
Here we go:
- go to Modules Manager
- click New button
- select the mod_breadcrumbs module
- make sure it’s published, it's assigned to the template breadcrumbs position and is set to be displayed on all pages
- click Save.
Congrats! Now you have the module published on your development setup.
If you don’t see the white arrow in the pathway (mod_breadcrumb), you will need to download it here and copy this image inside the http://your-site.com/media/system/images folder or upload it to your localhost/your-joomla-root/media/system/images folder of your live development environment.
Please note that the template will hide the entire navhelper block in the front-page. This block holds the breadcrumbs module position and also the date.
Next we will deal with the mod_search module. The module used in the demo requires setting some parameters in order to recreate it.
So here's what to do:
- again go to Modules Manager
- click the New button
- select the mod_search module
- make sure it’s published, it's assigned to the template search position and is set to be displayed on all pages
- check Yes for Search Button parameter
- check Yes for Search Button Image parameter (this image is already in the template images folder so you don't need to do anything)
- click Save.
Now you have the mod_search module published on your development setup.
Keep on doing this with the other 187 modules. Yeey!
2How to keep the vertical rhythm
when using images,
forms and other elements?
Sick of the non professional and poor (or flat) look of many websites? It's a matter of Typography! The design of the text content and images insertions need to create and maintain the vertical rhythm. Luckily this template is already designed to accomplish this goal, you only need to learn how to use it for your needs.
It all started with the darn paragraph! The template default font size is 12px and line height of 1.5 witch means that each text line of the paragraph is exactly 18px and requires a 1.5em margin-top and margin-bottom to preserve this 18 pixels based sizing and spacing. Wait there's some math coming (you will love it!).
Images need to be sized in such way that they don't break the lines of the vertical rhythm. The floating images don't need this usually (although it would help a lot), but images that fill the entire line do.
So what's to do?
- crop your images to fill the full width of the content body or the module you want to create and
the height must be multiple of 18px. Examples: 36px, 54px, 72px, 90px, 180px, 360px, etc
- wrap the non-floating images in <p> </p> tags to inherit the margins
- use the vertical rhythm checker of the Tools panel to make sure it's perfect
- that's it folks!
Forms need to be taken care as if they were images with variable width x height. Why? Cross-browser support of course. Chrome renders forms quite different than Firefox.
So what's the solution?
Setting a maxim-height to be a multiple of 18px would be perfect and make sure elements inside fill the form equally spaced. This should do the dew.
Another unwanted line breaker. Well, there is almost nothing in this template to use borders because I don't want to break the line in anyway, but if you choose to use one border-top or one border-bottom let's say the line break is not so visible and even 2 pixels, but if there are solutions, why not use them?
Solution is simple:
Use box-shadow: 0 0 1px #333 inset; -webkit-box-shadow: 0 0 1px #333 inset; (for boxes)
orbackground: url(../images/pb2.png) repeat-x top; (for one line)
3How to customize
the Tools panel,
just to suit your needs?
The template comes with an easy to customize tools panel to serve as a customization tool and also to provide various navigation, design and layout information.
In order to customize it, you need to locate it your-site/templates/skywalker/blocks/panel.php and open it with your favorite code editor. As follows, I'll show you some basics on customizing it for your various needs.
You may want to show the site name there? Something like MyWeb Tools.. well it's pretty easy right in the code! Open panel.php file and find line 17:
<span style="text-transform:capitalize"><?php echo $template; ?></span> Showcase</h2>
<span style="text-transform:capitalize"><?php echo $site_name; ?></span> Tools</h2>
or simply what ever you want:
<span style="text-transform:capitalize">I am the God of Helfire </h2>
If you don't want to use this feature anymore, please open the your-site/templates/skywalker/blocks/panel.php file with your favorite editor and delete lines 80 - 100.
If you want to use the template wide background images for your own needs, delete the existing ones and copy your in the your-site/templates/skywalker/images/backgrounds folder. Make sure they are wide resolution, good quality, jpg compressed (8 of 10 would do, that's about 200-300kb) and you don't brake any copyright laws.
Next you need to update the panel.php file so open it and find lines 88-98. Delete the <li> (list items) and for each of your new background images, add a line like this
<li><a href="#ja-panel" id="image-name">Image Name</a></li>
Save the file and refresh your front-end.
Disable vertical rhythm checker
If you want to disable this feature I recommend commenting it's code so if you need it, just move the comments and re-activate the checker. It's really useful! So find lines 118 - 129 and comment with <!-- the code -->. That's it!
Is there anything missing? Don't hesitate to say it right here!