Dimensions Demo Content
The demo for Dimensions utilises a large stock of custom code and styling to make the most of every content item and show what Dimensions 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 understand and help you realise Dimensions' true potential. If you would like to quickly deploy a replica of our Dimensions demo for a new Joomla site, be sure to check out our RocketLauncher package.
When using the following example code, you may need to first disable Joomla's default WYSIWYG Editor as it tends to strip out classes and code elements. To disable, go to Site > Global Configuration in your Joomla administrator and set "Default WYSIWYG Editor" to "No WYSIWYG Editor"
Many of the images featured in the demo are integrated into the content items and modules along with text. The images appear with a padding and border around them, and are aligned to either the left or the right with the text flowing to the side.
This effect is easily achieved by adding either the "content-left" or "content-right" class to your image code. In the following example, the image is aligned to the left, with the text to the right. The code used in the example below is as follows:
<img src="images/background1.jpg" alt="image" class="content-left" />
In the next example, the image is aligned to the right with the text flowing around on the left. The code used in this example is as follows:
<img src="images/background1.jpg" alt="image" class="content-right" />
The Dimensions demo features a styled search module in the top left hand corner of the template. This is the standard Joomla search module that has been placed into the template supported module position "search". By default, Joomla does not include a module position named "search", so this must be created in the Joomla admin.
It can easily be created in your Joomla administrator by going to
Site > Template Manager > Module Positions In the first available "empty" module position field, type in the name "search". Next, click Save in the top right corner. Now, you will be able to utilise the "Search" module position when assigning your search module's position in the Module Manager.
Dimensions 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, Dimensions uses the User7-11 module positions for you tabs. By default, Joomla does not include the module positions named "user10" or "user11", 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. Next, click Save in the top right corner. Now, you will be able to utilise the "User10" and "User11" module positions when assigning your module's positions in the Module Manager.
The Promo image on the front page directly underneath the header is published into the "Inset" position. This is the perfect locations for promotional materials or banners. You can use any image you like here, but you will get the best results with a transparent image as we have done in the demo.
Using the following code, you can implement a simple solid image into the inset area. If you are using a transparent PNG, be sure to include the "width" and "height" attributes for the image for compatibility with IE6 and Dimensions built in IE PNG Fix.
<div align="center">
<img src="yourimage.jpg" alt="image" />
</div>
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>
