Hyperion Demo Content |
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. The Top & Bottom MenuOn 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 :-
Recent VideosRecent Videos is a video script which uses the power of flash to present its content. To setup Recent Videos, follow the instructions belowThe 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> RokIntroScroller - ModuleRokIntroScroller is a mootools based module that scrolls your articles in a horizontal manner. The module works by loading articles from designated categories/sections inside the styled, javascript effect.We will take a quick look at the parameters you will find when you install this module.
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> Read More ButtonsRead 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> If you wish to have a smaller button for your content items, then use the second read more button. The syntax is below:- <a href="your_link" class="readon2">More</a> |