The demo for Hyperion utilises a large stock of custom code and styling to make the most of every content item and show what Hyperion 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 Hyperion. If you would like to quickly deploy a replica of our Hyperion demo for a new Joomla site, be sure to check out our RocketLauncher package.
On the demo, you notice a top menu with icons and a bottom menu in the footer area. For the top menu, you will need to use the following settings in Admin -> Extensions -> Module Manager -> Top Menu :-
For the bottom menu, you will need t use the following settings in Admin -> Extensions -> Module Manager -> Other Menu :-
The first step is to create a custom module. To do this, navigate to Admin > Extensions > Module Manager > New > Custom HTML. This will take you to the Custom Module setup page. Fill out the normal parameters such as Title, Show Title, Menu Items, Position etc... On the demo, we are using the Advert1 position.
The next step is to add the custom script code into the Custom Output box which is as follows. Note the path where the scripts and file are being loaded from.
<script type="text/javascript" src="templates/rt_hyperion_j15/js/swfobject.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
var flashVars = {
titlesColor: '0x' + $$('a')[0].getStyle('color').substr(1)
};
var flashParams = {
wmode: 'transparent',
base: 'templates/rt_hyperion_j15/flash'
};
var rnd = $time() + $random(0, 10000);
swfobject.embedSWF("templates/rt_hyperion_j15/flash/hype_vid.swf?cache=" + rnd, "recent-videos-object", "635", "310", "9.0.0", "templates/rt_hyperion_j15/js/expressInstall.swf", flashVars, flashParams);
});
</script>
<div id="recent-videos">
<div id="recent-videos-object">
<h1></h1>
<p><a href="http://www.adobe.com/go/getflashplayer"><img style="margin-top: 1em;" src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>
</div>
The final stage is to add your own content to Recent Videos. This is done via a XML file in the directory where the flash is placed, in the case of the demo, /templates/rt_hyperion_j15/flash and the file's name is video.xml. Below is the snippet from the demo to give you an example. See the Custom modules page for details on the code itself
<content> <item> <title>Realguys-RunFatboyRun</title> <description>We began with the belief that people are good.</description> <path>thumbs/image1.jpg</path> <data>http://blip.tv/file/get/Realguys-RunFatboyRun385.flv</data> </item> <item> <title>Thomas Lennon Interview</title> <description>We began with the belief that people are good.</description> <path>thumbs/image2.jpg</path> <data>http://blip.tv/file/get/Mahalodaily-MD127Reno911ThomasLennonInterview458.flv</data> </item> <item> <title>60 Frames-Car Bangers</title> <description>We began with the belief that people are good.</description> <path>thumbs/image3.jpg</path> <data>http://blip.tv/file/get/60Frames-CarBangers537.flv</data> </item> <item> <title>Moblogic-Georgia Covers The Death Penalty</title> <description>We began with the belief that people are good.</description> <path>thumbs/image4.jpg</path> <data>http://blip.tv/file/get/Moblogic-GeorgiaCoversTheDeathPenalty463.flv</data> </item> <item> <title>Realguys-RunFatboyRun</title> <description>We began with the belief that people are good.</description> <path>thumbs/image1.jpg</path> <data>http://blip.tv/file/get/Realguys-RunFatboyRun385.flv</data> </item> <item> <title>Thomas Lennon Interview</title> <description>We began with the belief that people are good.</description> <path>thumbs/image2.jpg</path> <data>http://blip.tv/file/get/Mahalodaily-MD127Reno911ThomasLennonInterview458.flv</data> </item> <item> <title>60 Frames-Car Bangers</title> <description>We began with the belief that people are good.</description> <path>thumbs/image3.jpg</path> <data>http://blip.tv/file/get/60Frames-CarBangers537.flv</data> </item> <item> <title>Moblogic-Georgia Covers The Death Penalty</title> <description>We began with the belief that people are good.</description> <path>thumbs/image4.jpg</path> <data>http://blip.tv/file/get/Moblogic-GeorgiaCoversTheDeathPenalty463.flv</data> </item> </content>
Below is an example of a content item we are using on the demo:-
<img src="images/stories/1.png" alt="" /> <h4>Nam id ligula. Nunc arcu</h4> <p>lacus, lacinia vitae, mollis.</p>
<a href="your_link" class="readon">Read More...</a>
<a href="your_link" class="readon2">More</a>