|
The demo for Catalyst utilises a large stock of custom code and styling to make the most of every content item and show what catalyst can do. This basically
means that the HTML used in the custom modules and content have customisations
which employ the characteristics of the template to make the "perfect" content.
This demo content section will take you through some of the content areas and general techniques used to further your understanding and help you realise the true potential of Catalyst. If you would like to quickly deploy a replica of our Catalyst demo for a new Joomla site, be sure to check out our RocketLauncher package.
If you wish to place a Static Content Item on the frontpage, you will have to do the following:-
- Create your Static Content Item
- Go to Admin > menu > mainmenu
- Click the New button
- Select Link - Static Content
- Fill out the menu parameters
- Save
The Catalyst demo front page features a large promo graphic in the "header" module position. This image, by default, features a landscape and briefcase with a location for slogan.
To set up the promo graphic, you will need to create a new custom module and publish this module to the "header" module position.
- Go to Admin > Modules > Site Modules
- In the top right corner, select the "New" button
- Be sure to set the Show Title to "No", and the Module Position to "header"
Next, paste in the following code to the Custom Output section at the bottom of the edit screen:
<img src="templates/rt_catalyst/images/promo.png" alt="promo" class="png" id="promo" />
Catalyst features a location for featured modules in the Advert1-Advert4 module positions. These can be seen on the action in the demo just under the promo graphic, featuring 4 module blocks each with an icon and a slogan. To create these, do the following:
- Go to Admin > Modules > Site Modules
- In the top right corner, select the "New" button
- Be sure to set the Show Title to "No", and the Module Position to "advert1" (or advert2, advert3, advert4)
Next, paste the following code to the Custom Output section at the bottom of the edit screen:
<div class="featured-1 png"></div> <span class="featured-header">Why Use Us?
</span><span class="featured-desc">We are the absolute best at what we do!</span>
Your text and icons can be customized to whatever you wish, the classes can be found in the template's "template_css.css" file where you can make adjustments to various elements.
Once you have your advert modules in place, you will notice that on the demo there is a "jiggle effect" animation when mousing over those blocks. This can be added to your own template by creating a new module and inserting custom javascript.
- Go to Admin > Modules > Site Modules
- In the top right corner, select the "New" button
- Be sure to set the Show Title to "No", and the Module Position to "debug"
Next, paste the following code into the Custom Output section at the bottom of the edit screen:
<script type="text/javascript">
window.addEvent('domready', function() {
var fx_duration = 50;
var fx_margin = 3; // px
var blocks = $$('#featuredmodules .block');
if (blocks.length) {
blocks.setStyle('cursor', 'pointer').each(function(block) {
var fx = new Fx.Style(block, 'margin-top',{
duration: fx_duration,
transition: Fx.Transitions.Quad.easeInOut,
wait: false
}).set(0);
block.addEvents({
'mouseenter': function() {
fx.start(fx_margin).chain(function() {
this.start(-fx_margin);
}).chain(function() {
this.start(0);
});
}
});
});
};
});
</script>
Catalyst features an exciting new RokSlide powered tabbed module system. It is designed to allow you to publish your modules into the designated locations, creating tabs for each module position which you can customise. Currently, Catalyst uses the User8-12 module positions for your tabs plus other module positions. By default, Joomla does not include these module positions, so these must be created in the Joomla admin.
They can easily be created in your Joomla administrator by going to Site > Template Manager > Module Positions In the first available "empty" module position fields, type in the name "user10" in one, and "user11" in another etc... Next, click Save in the top right corner. Now, you will be able to utilise the "User10" to "User12" module positions when assigning your module's positions in the Module Manager.
Read more buttons are automatically generated for content items that use the intro and main text option. However, you can easily insert them manually as witnessed on this demo. Use the following code:
<a href="your_link" class="readon">Read More...</a>
|
