The demo for Perihelion utilises a large stock of custom code and styling to make the most of every content item and show what Perihelion 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 Perihelion. If you would like to quickly deploy a replica of our Perihelion demo for a new Joomla site, be sure to check out our RocketLauncher package.
The Bottom Menu
For the bottom menu, you will need t use the following settings in Admin -> Extensions -> Module Manager -> Other Menu :-
- Position: bottom
- Menu Class Suffix: -bottom
- Menu Style: Flat List
Starbucks Banner
On the frontpage, you will observe an advertisement type module for Starbucks. Below are instructions on how to set this up on your site:-
- Go to Admin > Extensions > Module Manager > New
- Set the module position to header
- Use the module class suffix of -flush (this will reduce the padding/margin surrounding the module)
- Insert the following into the Custom Output:-
<div class="promo"> <img alt="image" src="images/stories/test2.jpg"/> <span class="promo-title">Starbucks Coffee</span> <span class="promo-desc">Lorem ipsum dolor sit amet, Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet</span> </div>
Highlighted Areas
In the User4-6 area on the frontpage, you will notice a ribbon type graphic surrounding the content, this is a module class suffix. This module class suffix is -banner.
Recent Blog Entires
On the frontpage, you will notice a module named Recent Blog Entries. Below are instructions on how to set this up on your site:-
- Go to Admin > Extensions > Module Manager > New
- Set the module position to user7
- Insert the following into the Custom Output:-
<div class="shield"> <span class="shield-month">Aug</span><span class="shield-date">03</span> <a href="#">Lorem ipsum dolor sit amet,</a> <br /> Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <br /> <em>Posted 01 August 2008 by John Leach</em> <a href="#">Add comment</a> </div>
Read More Buttons
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>
Read More Type 2
The Read More type 2 button has the arrow image placed to the right of the text, this only works if you have a set width so will only work for words with 4 characters, i.e. More … as used on the frontpage. Use the following code:
<a href="your_link" class="readon2">More</a>
If you wish to change the width to have longer/shorter texts with the arrow, edit the following in template.css:-
.main-column-right a.readon2, .main-column-left a.readon2, #section-three a.readon2 { display: block; line-height: 12px; margin-top: 16px; padding: 0pt; text-transform: uppercase; width: 48px; }