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 Menu

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 -> Modules -> Site Modules -> Top Menu :-

  • Position: icon
  • Menu Style: Flat List
  • Show Menu Icons: Yes
  • Menu Icon Alignment: Left

For the bottom menu, you will need t use the following settings in Admin -> Modules -> Site Modules -> Other Menu :-

  • Position: footer
  • Menu Class Suffix: -bottom
  • Menu Style: Flat List

Recent Videos

Recent Videos is a video script which uses the power of flash to present its content. To setup Recent Videos, follow the instructions below

The first step is to create a custom module. To do this, navigate to Admin > Modules > Site Modules > New. 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/js/swfobject.js"></script>
<script type="text/javascript">
window.addEvent(&#x27;domready&#x27;, function() {
  var flashVars = {
    titlesColor: &#x27;0x&#x27; + $$(&#x27;a&#x27;)[0].getStyle(&#x27;color&#x27;).substr(1)
  };
  var flashParams = {
    wmode: &#x27;transparent&#x27;,
    base: &#x27;templates/rt_hyperion/flash&#x27;
  };
  var rnd = $time() + $random(0, 10000);
 
  swfobject.embedSWF("templates/rt_hyperion/flash/hype_vid.swf?cache=" + rnd, "recent-videos-object", "635", "310", "9.0.0", "templates/rt_hyperion/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/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 - Module

RokIntroScroller 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.
  1. Title: Show
  2. Position: We recommend the advert1 position.
  3. Access level: Public
  4. Published: Yes
  5. Module Class Suffix: -scroller
  6. Show Scroller Title: No
  7. Link Scroller Title: No
  8. Enable Cache: No
  9. Module Mode: You have a choice of what type of content to choose from.
  10. Frontpage items: Show or Hide
  11. Count: Enter how many items you would like to show in the RokIntroScroller.
  12. Category: Choose which Category to pull your stories from.
  13. Section: Choose which Section to pull your stories from.
  14. Click Title: You have the option to have the effect start when you mouseover the title or when you click on the title.
  15. Include Mootools library: Set to no, unless using this module with a template that does not include mootools javascript.
  16. Show Read More: Show Read More text allowing your users to be taken to the full article.
  17. Read More Label: Enter any text such as Read On, or Learn More.
  18. Transition Duration: This is the time it takes to fade to the next article on mouseover or when the title is clicked.
  19. Preview Length: This is the time your article will display for.

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>

Adding Static Content to the Front-Page

If you wish to place a Static Content Item on the frontpage, you will have to do the following:-
  1. Create your Static Content Item
  2. Go to Admin > menu > mainmenu
  3. Click the New button
  4. Select Link - Static Content
  5. Fill out the menu parameters
  6. Save

Restoring the Frontpage component to the Home link

We use Static Content as our frontpage/home content, if you wish to restore the default frontpage component setup, follow these instructions
  1. Go to Admin > menu > mainmenu
  2. Click the New button
  3. Select Component
  4. Fill out the menu parameters, selecting Frontpage from the Component's list
  5. Save
  6. Move this menu item to the top of the list

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>


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>