Tutorials
Demo Content PDF  Array Imprimer Array  Envoyer

The demo for MediaMogul utilises a large stock of custom code and styling to make the most of every content item and show what MediaMogul 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 MediaMogul. If you would like to quickly deploy a replica of our MediaMogul demo for a new Joomla site, be sure to check out our RocketLauncher package.

Search Module

MediaMogul features special styling for the search module which can be seen in the right column of this demo. To activate this on your site, just publish the search module into the "Search" module position with other modules active in the Right Positions.

RokNewsRotator

Brand new for MediaMogul is the RokNewsRotator. The RokNewsRotator can display your top stories of the day and beautifully fades between them, giving your site a professional appearance. You can see this effect in action at the top of the main column on the front page of the demo. The setup is listed below.

Module Configuration

You can choose to use an installable module for the RokNewsRotator. The settings are accessible from the following path Admin > Extensions > Module Manager > RokNewsRotator . Setup is as follows:-
  • Link Title: Select if you want your titles to link to the article or not
  • Link Images: Select if you want the images to link to the article or not
  • Frontpage Items: This option controls whether frontpage items are shown
  • Count: Enter the value of how many articles you wish to have in the module
  • Category: Controls the category where the content is loaded from
  • Section: Controls the section where the content is loaded from
  • Include Mootools JS Library: Set to no unless using a template which doesn't have mootools already being called
  • Read More Label: The text placed in the read more button
  • Transition Duration: The time taken for the transition between articles in ms
  • Delay Length: The time taken for a transition to occur
  • Show Image Corners: If set to yes produces rounded cornered images, default is square
  • AutoPlay Rotator: Sets the module to automatically change articles or stay static for user input
  • Preview Length: Set a value to choose how many characters are shown as a preview of the full article
If you wish to place inside an Article, follow the instructions below:-
  1. Navigate to Admin > Extensions > Module Manager > RokNewsRotator
  2. Assign the module to the rotator position (By default, Joomla does not include this module position, so just type the rotator name into the position field.)
  3. Create your static content item
  4. Insert the following syntax {loadposition rotator} into the content item

    The article will now load the module
All you need to do now is to create some content items which are assigned to the category/section you chose in the module settings. In the content item, you will need to use the following syntax to load the image with the correct styling. The code is content editor HTML mode friendly.
<!--IMAGE image_path IMAGE-->
An example is as follows
<!--IMAGE images/stories/lego/rotator-3.jpg IMAGE-->
Place the image code at the top of your content item and write your content after it.

The Custom Script Approach

To enter custom classes into your content, you may first need to disable the default Joomla
WYSIWYG editor as it will strip out these classes when the item is saved. You can do this from your control
panel by going to Site > Global Configuration and setting apply setting Editor - N Editor
  • In the Joomla Administrator, go to Admin > Content > Article Manager. Select the New icon at the top right of the control centre.
  • Setup the static content item with the normal configuration, setting the fields for title, published etc..
  • Make sure your images are uploaded to your Joomla! /images/stories folder.
  • Scroll down to the large white box at the footer area of the content control area.
  • Insert the following at the top of this text box
<script type="text/javascript" src="templates/rt_mediamogul_j15/js/roknewsrotator.js">
</script> <script type="text/javascript"> window.addEvent('domready', function() { var rotator = new RokNewsRotator('news-rotator', { delay: 7000, duration: 800, corners: false, autoplay: true }); }); </script> <div id="news-rotator"> <div class="story-block"> <div class="image"> <img src="images/stories/lego/rotator-1.jpg" alt="story image" /> </div> <div class="story"> <div class="padding"> <h1>Imperials on Tatooine</h1> <p>In a bold move, the Empire task force has landed on the desert
planet of Tatooine in force. It's rumored that they are searching for one very
sannoying droid and his tiny companion, who may hold the key to the survival of
the galaxy.</p> </div> </div> </div> <div class="story-block"> <div class="image"> <img src="images/stories/lego/rotator-2.jpg" alt="story image" /> </div> <div class="story"> <div class="padding"> <h1>New Y-Wing Released</h1> <p>Featuring the amazing new golf ball thruster technology, the
rebel alliance has publicly announced the development of their new
secret weapon, the deadly Y-Wing. In addition to golf ball thrusters,
it also features an oak interior with chrome hardware.</p> </div> </div> </div> <div class="story-block"> <div class="image"> <img src="images/stories/lego/rotator-3.jpg" alt="story image" /> </div> <div class="story"> <div class="padding"> <h1>Firefighters Save the Day!</h1> <p>The smell of melted plastic was in the air as the well known
egoLand Tower went up in flames. Firefighters from multiple sets converged on
the location in a desperate attempt to extinguish the flame as
quickly and safely as possible.</p> </div> </div> </div> </div>

RokMediaScroller

Below are the instructions for setting up the new RokMediaScroller module to display your media feeds and content.

Module Configuration

You can choose to use an installable module for the RokMediaScroller available in the MediaMogul downloads section (mediamogul_extensions_j15). You can see the module version in action in the right column of this page. The settings are accessible from the following path Admin > Extensions > Modules Manager > RokMediaScroller . Setup is as follows:-
  • ID of Module Set unique ID's for each of your RokMediaScroller module instances so you can use more than one on a single page.
  • Count: Enter the value of how many feed items you wish to have the module display.
  • Feed URL Enter the url for the RSS feed for the media items you want to display.
  • Include rokmediascroller.js file: Set to no if another module is calling this file.
  • Transition Duration: The time taken for the transition between articles in ms

The Custom Script Approach

You can also choose to use custom script and html to create your own thumbnails and link content that will be displayed in the scrolling fashion, this approach can be seen in action in the right column of the demo frontpage. To enter custom classes into your content, you may first need to disable the default Joomla
WYSIWYG editor as it will strip out these classes when the item is saved. You can do this from your control
panel by going to Site > Global Configuration and setting apply setting Editor - N Editor
  • In the Joomla Administrator, go to Extensions > Module Manager. Select the New icon at the top right of the module control centre.
  • Setup the custom module with the normal configuration, setting the fields for position, published etc..
  • Scroll down to the large white box at the footer area of the module control area.
  • Insert the following at the top of this text box
<script type="text/javascript" src="templates/rt_mediamogul_j15/js/
rokvideoscroller.js"></script> <script type="text/javascript"> window.addEvent('domready', function() { var x = new RokVideoScroller('video-list',{ 'duration': 1000 }); }); </script> <div id="video-list" class="video-list"> <div class="video"> <div class="left"> <img alt="" src="images/stories/videos/mini1.jpg" /> </div> <div class="desc"> <p>Empire Stops Drunk Drivers</p> <p><a href="#">Watch Video</a></p> </div> </div> <div class="video"> <div class="left"> <img alt="" src="images/stories/videos/mini2.jpg" /> </div> <div class="desc"> <p>Pilot Upset Over Crash</p> <p><a href="#">Watch Video</a></p> </div> </div> <div class="video"> <div class="left"> <img alt="" src="images/stories/videos/mini3.jpg" /> </div> <div class="desc"> <p>Politicians Hold a Summit</p> <p><a href="#">Watch Video</a></p> </div> </div> <div class="video"> <div class="left"> <img alt="" src="images/stories/videos/mini4.jpg" /> </div> <div class="desc"> <p>Popular Pub Past Prime</p> <p><a href="#">Watch Video</a></p> </div> </div> <div class="video"> <div class="left"> <img alt="" src="images/stories/videos/mini5.jpg" /> </div> <div class="desc"> <p>Animal Couples Go Boating</p> <p><a href="#">Watch Video</a></p> </div> </div> <div class="video"> <div class="left"> <img alt="" src="images/stories/videos/mini6.jpg" /> </div> <div class="desc"> <p>Here's Looking at You Kid</p> <p><a href="#">Watch Video</a></p> </div> </div> <div class="video"> <div class="left"> <img alt="" src="images/stories/videos/mini7.jpg" /> </div> <div class="desc"> <p>Riots In BlockTown Again</p> <p><a href="#">Watch Video</a></p> </div> </div> <div class="video"> <div class="left"> <img alt="" src="images/stories/videos/mini8.jpg" /> </div> <div class="desc"> <p>Unhappy Pet Seeks Vengeance</p> <p><a href="#">Watch Video</a></p> </div> </div> <div class="video"> <div class="left"> <img alt="" src="images/stories/videos/mini9.jpg" /> </div> <div class="desc"> <p>Hunting Season Opens Today</p> <p><a href="#">Watch Video</a></p> </div> </div> </div

Tabbed Modules

MediaMogul 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, MediaMogul uses the User10-16 module positions for your tabs plus other module positions. By default, Joomla does not include these module positions, so these must be created in the Joomla admin.


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>
 
Using Typography PDF  Array Imprimer Array  Envoyer

A guide to implementing the included MediaMogul typography styles and elements into your site as well as instructions for inserting typography using the HTML editor option of your WYSIWYG editor.

Every RocketTheme template has its own set of content styles, these styles are known as Typography. Typography can come in a number of varying and diverse formats, ranging from simple text modifications to image insertions to improve the look, layout of your website and give it life. This tutorial will take you through the necessary steps to adding typography to your Joomla! content.

Inserting Typography with the HTML Editor

To insert the Typography into your content, you must use the HTML feature of all Joomla! content editors. The following tutorial will outline the steps in which to does this with the default Joomla! content edit, TinyMCE. Please be aware, even though there are other content editors available, all are basically the same and the steps with be just as effective if you are using another Content editor.

Please note that the following tutorial will show you how to insert HTML (typography) into Articles, the same procedure is apparent for Custom modules. You may skip steps 4 and 5 if you are using No WYSIWYG editor.

Step 1 - Login

Login to the Joomla! Administration Control Panel. Go to www.yoursite.com/administrator. Enter the Administrator's Username and password.

Step 2 - Navigation

Navigate to the Article Manager. Once you have logged in, hover over the Content link on the top taskbar, scroll down to Article Manager.

Step 3 - Article Manager

When you have selected the Article Manager link, you will be sent to the Article Manager control panel. Select either Edit (after selecting a particular content item) or New, depending on whether you want to add typography to an existing or new item.

Step 4 - HTML Icon

To add typography to your content, you must enter the HTML mode of your Content editor. In the TinyMCE editor, this an icon called "HTML", in some other content editors, it is a tab. Press the icon to enter HTML mode. This step is not necessary if you are using No WYSIWYG editor (similarly with Step5)

Step 5 - HTML Mode

A popup shall appear with your content in HTML format, only if you are using TinyMCE, with other editors, a new tab may become selected. You shall do all your editing here for typography.

Step 6 - Inserting HTML

You then proceed to add your HTML coding into the tab/textbox that appears in front of you. This can be any HTML such as span class typography or styled lists.
You will not see the effects in the content editor, all style affects are only visible on the Frontend of your Joomla! website.
 
Logo Editing PDF  Array Imprimer Array  Envoyer

The following is a step by step guide to customising your MediaMogul logo image by replacing the logo text with your own organization or company's name and logo.

In order to utilise the Fireworks Source PNG included with the MediaMogul template release, you will need Adobe Fireworks. The 30-day free trial of this software as well as more information is available here at the Adobe website.

Customising Your Logo

One of the first steps of customising your new MediaMogul template will undoubtedly be altering the logo text to reflect the name of your company / organization. RocketTheme makes this process a simple one by including both the Source PNG for the template, as well as font(s) used.

The most effective way to customise the logo is to use the included Source PNG file. When opened in Adobe Fireworks, this file contains all of the Layers in the design allowing you to tweak and change any of the image elements of the template design. The following steps will help you quickly get your new logo ready to go:

Step 1

First, open the header Source PNG file in Adobe Fireworks (source_main.png). On the right side, you will notice a taskbar named Layers. Inside this column, a list of elements within the source will appear, dividied into folders. The first is Web Layers which controls the green slices on the page that are used to export the images. Click the eye which is immediately left to the folder name Web Layers to make it invisible. This allows use to edit the logo.

Logo

Step 2

Next, double click on the logo which should be position in top-centre. This will activate the text tool so you can edit the element. Highlight the entire text box with your cursor and type your text instead(such as your company name.)
Logo
Logo
Enact the same procedure onto the slogan text below the log itself
Logo

Step 3

Once you have edited the logo to your personal preference, you will need to activate the logo area slice. On the right column where the Web layers area is, we need to reactivate it. As you did in the initial step, select the eye icon to make it visible and subsequently making the slices visible on the canvas. Select the logo slice, either on the canvas itself or in the Web Layers folder.

Logo

Step 4

To export your logo, right click on the green slice that is situated above your new logo. A popup menu should appear with numerous options. The value we want to deal with is "Export Selected Slice...". As the name suggests, this option will export/save this slice only out of the entire source window.

Logo

Step 5

If you are new to Fireworks, you may be wondering why it appears that there is only one style variation in the source. This is not the case as we take advantage of the Frame features of Fireworks. You need to simply switch frames to see all the other style variation sources.

There are a few ways to change frames and we will show 2 methods that you can use.

In the right column where you find the Layers toolbar including the Web Layers area, you should see another tab/toolbar named Frames. Just left click on the title Frames to enter the frames area. Then you can click on either of the frames which are named to show which style variant is on that particular frame.

Logo

The second method is the most easiest and simplistic. At the bottom of the Fireworks canvas is a row of buttons, arrows just as previous and next. Select the arrows to switch between frames.

Logo

Step 6

Once you have successfully edited then exported your new logo, you will need to upload it to your server. This process is best done via a FTP client such as Filezilla

  1. Open your FTP client on your local computer.
  2. Login to your web server where MediaMogul is installed.
  3. Navigate to the /templates/rt_mediamogul_j15/images/style# directory.
  4. Upload logo.png to this directory (You may need to browse on the local panel in the FTP client to find where you have exported your logo).
  5. Clear your browser cache before viewing such as using the keyboard commands on Windows, Ctrl+F5.
Ensure that you are uploading the correct logo to avoid confusion if it does not change. Also take into account hosting permissions. Sometimes, hosters which are not designed for Joomla may have permissions not suited for the setup, thus, the upload will not be complete. In this case, contact your hosting provider.
 
Basic Customisation PDF  Array Imprimer Array  Envoyer

A guide to the basic MediaMogul customisation options that can be configured in the template "index.php" file with a description of each of the available options and how they affect the presentation of the template.

MediaMogul features several built in configuration options that have been designed to be easily changed with a single control. You can take advantage of these customisation options by making changes in the MediaMogul "index.php" file. Here is a breakdown of the available options:

customisation

The PNGfix

You can turn off or on the pngfix with this setting. More info at our Tutorial Site.

Sidebar width

With the following setting, you can control the width of the sidebar with one simple setting.

Sidebar Location

With this setting, choose to have the sidebar placed on the left or right of the mainbody. The name of the module positions changes to reflect left or right.

Default Font

Based on your own personal preference, or the preference of your users; you can easily set the default font size with this setting below:-

Show Pathway

This setting controls whether the pathway appears on your site.

Module Slider

There is now a convenient toggle to show the tabbed modules or not.

Module List

With the setting illustrated below, you can control the aspects of the integrated rokslide feature to a great extent. You can control the tab title and also the module position which appears in each of the tabs.

In the code snippet, we have 5 lines, each line controls a single tab. Each line is segregated into 2 distinct parts. These are "title"=>"Tab Title", which controls the Tab Title. The second part is "module"=>"Module Position"),
 
Custom Modules PDF  Array Imprimer Array  Envoyer

Learn all about the exciting new RocketTheme exclusive modules that are included in the MediaMogul template release. Here you can find instructions for installation and configuration for each of the custom modules.

Step One: Installing the Module

  • Download the mediamogul_extensions_j15.zip archive from the MediaMogul download section of the RocketTheme Joomla! Club. Unzip the archive, inside you will find individual zip files for each of the modules.
  • Login in to your administrator console on your Joomla! website and navigate to the Extensions menu item, and select Install/Uninstall from the dropdown menu.
  • In the Upload Package File section, click the Choose File button and select one of the mod_modulename.zip that was inside of the zip file you downloaded earlier. Next click the Upload File & Install button to install the module.

Step Two: Publishing the Module

  • Now the module is installed it must be published in the appropriate module position and configured to suit our needs. From the top menu, select Extensions then Module Manager.
  • This will take you to the Site Module Manager which allows you to configure the placement and configuration of all modules in your Joomla! website.
  • Locate the module from the list. Remember there could be a few pages. Once you have found it, you can publish in 2 ways: The first is selecting the cross next to the tile or clicking the title then set Enabled to Yes followed by a Save.

RokNewsFlash

The RokNewsFlash module displays your small pieces of info across the top of your MediaMogul website. Simply publish the module to the newsflash position with the title set to hide.

RokMediaScroller

The RokMediaScroller module provides a smooth scrolling functionality allowing you to display multiple media items. The module has the ability to pull items from a feed, such as a youtube feed or flickr feed, and display them neatly on your site. Thee RokMediaScroller is available in the MediaMogul downloads section (mediamogul_extensions_j15). After installation, the parameters are accessible from the following path Admin > Extensions > Module Manager > RokMediaScroller . Setup is as follows:-
  • ID of Module Set unique ID's for each of your RokMediaScroller module instances so you can use more than one on a single page.
  • Count: Enter the value of how many feed items you wish to have the module display.
  • Feed URL Enter the url for the RSS feed for the media items you want to display.
  • Include rokmediascroller.js file: Set to no if another module is calling this file.
  • Transition Duration: The time taken for the transition between articles in ms
You can also use a script version of this functionality in order to create your own custom thumbnail and link content. This approach can be seen in action on the demo frontpage. Instructions for setting up a custom module using the raw script are available on the Demo Content Tutorial Page.

RokNewsRotator

Module Configuration

You can choose to use an installable module for the RokNewsRotator. The settings are accessible from the following path Admin > Modules > Site Modules > RokNewsRotator . Setup is as follows:-
  • Link Title: Select if you want your titles to link to the article or not
  • Link Images: Select if you want the images to link to the article or not
  • Frontpage Items: This option controls whether frontpage items are shown
  • Count: Enter the value of how many articles you wish to have in the module
  • Category: Controls the category where the content is loaded from
  • Section: Controls the section where the content is loaded from
  • Include Mootools JS Library: Set to no unless using a template which doesn't have mootools already being called
  • Read More Label: The text placed in the read more button
  • Transition Duration: The time taken for the transition between articles in ms
  • Delay Length: The time taken for a transition to occur
  • Show Image Corners: If set to yes produces rounded cornered images, default is square
  • AutoPlay Rotator: Sets the module to automatically change articles or stay static for user input
  • Preview Length: Set a value to choose how many characters are shown as a preview of the full article
If you wish to place inside an Article, follow the instructions below:-
  1. Navigate to Admin > Extensions > Modules Manager > RokNewsRotator
  2. Assign the module to the rotator position (you can type this position into the field if not in dropdown)
  3. Create your article
  4. Insert the following syntax {loadposition rotator} into the content item.

    The article will now load the module
All you need to do now is to create some content items which are assigned to the category/section you chose in the module settings. In the content item, you will need to use the following syntax to load the image with the correct styling. The code is content editor HTML mode friendly.
<!--IMAGE image_path IMAGE-->
An example is as follows
<!--IMAGE images/stories/lego/rotator-3.jpg IMAGE-->
Place the image code at the top of your content item and write your content after it.

Integrated RokSlide Tabbed Modules

For MediaMogul, we have integrated RokSlide into the core of the template so you have the RokSlide functionality in terms of tabs with stylish transitional effects with the modular layout of the template.

RokSlide by default has 5 tabs available. Each tab has a module position ranging from User12 to User16, respective to the individual tab. Therefore, you have a single modular position per tab but you have the option of applying multiple modules to a single position. For example, you can assign 3 modules to the User12 position and they will appear in a horizontal layout in Tab 1.

Configuration

Configuration of the integrated RokSlide itself is controlled in the Administrator at Admin -> Extensions > Template Manager > MediaMogul
tabber In the configuration panel, we have 5 groups, each groups controls a single tab. Each group is segregated into 2 distinct parts. These are Tab Title which controls the Tab Title. The second part is Tab Module

Module Slider Height

You will see in the above screenshot, the Module slide height settings. Similarly with the module count In addition to setting the module slider height in the parameters, you will also need to specify a height for the #moduleslider-size in the "template_css.css" as well to ensure that the module slider shows at the proper size.
#moduleslider-size {
	height: 250px;
}
 
<< Début < Précédent 1 2 Suivant > Fin >>

Page 1 sur 2
RocketTheme Joomla Templates