RokMininews Module

RokMiniNews is a powerful module to display your articles, perfect for news and media sites. It is highly configurable and is javascript enabled to allow for user interaction. A truly versatile extension.

We will take a quick look at the parameters you will find when you install this module. There are 4 columns, parameters, options, demo and description. The parameter column lists each available setting for the module; options lists the available options to choose from; demo lists the options chosen on the demo and description outlines what the module does.

Demo Content

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

Feature Thumb

The code below is the required HTML to mimic the appearance of the frontpage article thumbs, i.e. the red banner place on top of them.

<div class="feature-thumb">
	<img class="feature" alt="image" src="/path/to/image"/>
	<span>Subscribe Now</span>
</div>

Frontpage Article Content

With the frontpage articles, we used the following HTML content:-

<div>

<div class="feature-thumb"><img src="images/stories/thumb1.jpg" alt="image" class="feature"/><span>Subscribe Now</span></div>

<h4 style="margin-top: 10px;"><span class="highlight-bold highlight-grey">Repainting entire <span class="highlight-blue">streets</span> with an obscure colour scheme</span></h4>

<span class="highlight-grey" style="font-size: 110%;">Boston City Council, due to an ordering mistake, found itself with many gallons of red building paint. Therefore, as it would be costly to dispose of the paint, several streets in the city centre now boast an eye-catching exterior.</span>
<br /><br />

</div>

MoreNews content

The MoreNews area is located in the User4 position below the mainbody. This is a custom module which you can setup by following the instructions below:-

1. Login into the Joomla administrator at www.yoursite.com/administrator
2. Go to Extensions > Module Manager
3. Hit the New button, located in the top right of the Module Manager
4. Fill out the relevant details such as Title, Position and Menu Items
5. Insert the following in the Custom Output area
   
   

   <div class="rokdemo-morenews-outer">
   <h4><span class="highlight-grey">New Shows</span></h4>
   
   <div class="rokdemo-morenews-block">
   <img src="images/stories/advertisements/ad9.jpg" class="rokdemo-morenews-img1" alt="blank" /><br />
   <span class="highlight-bold highlight-grey">The Pea Story</span><br/>A documentary based on the life of a pea. A must see.
   <a style="font-weight: bold;" href="#">More</a>
   </div>
   
   <div class="rokdemo-morenews-block">
   <img src="images/stories/advertisements/ad10.jpg" class="rokdemo-morenews-img1" alt="blank" /><br />
   <span class="highlight-bold highlight-grey">Visual Atlas.</span><br />Indepth program touring the worlds many wonders.
   <a href="#" style="font-weight: bold;">More</a>
   </div>
   
   <div class="rokdemo-morenews-block">
   <img src="images/stories/advertisements/ad11.jpg" class="rokdemo-morenews-img1" alt="blank" /><br />
   <span class="highlight-bold highlight-grey">Little Dorrit.</span><br />Entertaining drama set in the early Victorian era/period.
   <a href="#" style="font-weight: bold;">More</a>
   </div>
   </div>
   
   <div class="rokdemo-morenews-block2">
   <h4><span class="highlight-grey">Music Spotlight</span></h4>
   <img src="images/stories/advertisements/ad12.jpg" class="rokdemo-morenews-img2" alt="blank" /><br />
   <span class="highlight-bold highlight-grey">Album goes Platinum</span><br />
   After many weeks of record breaking sales, the album has gone platinum!
   <a href="#" style="font-weight: bold;">More</a>
   </div>
   
   <div class="clr"></div>
   

Previous Issues

The Previous Issues area is located in the User4 position below the mainbody. This is a custom module which you can setup by following the instructions below:-

1. Login into the Joomla administrator at www.yoursite.com/administrator
2. Go to Extensions > Module Manager
3. Hit the New button, located in the top right of the Module Manager
4. Fill out the relevant details such as Title, Position and Menu Items
5. Insert the following in the Custom Output area
   
   

   <div style="width: 325px; float: left;">
   
   	<div style="width: 315px;">
   		<div class="feature-thumb"><img class="feature" alt="image" src="images/stories/advertisements/ad8.jpg"/><span style="top: 60px;">Subscribe Now</span></div>
   			<span class="highlight-bold">Science and <span class="highlight-red">Religion</span> a history of conflict</span><div style="height: 5px;"></div>
   			The deep struggle between science and religion is not as prevalent today but in the...<br/>
   			<a href="#" style="font-weight: bold;">More</a>
   	</div>
   
   
   <div class="clr"></div>
   
   	<div style="width: 315px; margin-top: 10px;">
   		<div class="feature-thumb"><img class="feature" alt="image" src="images/stories/advertisements/ad13.jpg"/><span style="top: 60px;">Subscribe Now</span></div>
   		<span class="highlight-bold">Embrace <span class="highlight-green">nature</span> - become one with the world</span><div style="height: 5px;"></div> 
   		This series focuses on how to maintain our modern lifestyles but with a green mindset...<br/>
   			<a href="#" style="font-weight: bold;">More</a>
   	</div>
   
   </div>
   
   <div style="width: 315px; float: left;">
   
   		<div style="width: 315px;">
   			<div class="feature-thumb"><img class="feature" alt="image" src="images/stories/advertisements/ad14.jpg"/><span style="top: 60px;">Subscribe Now</span></div>
   				<span class="highlight-bold">Allergies, <span class="highlight-blue">what</span> to do about them?</span><div style="height: 5px;"></div> 
   				Dr Thompson provides detailed information on allergies from their causes to possible cures...<br />
   				<a href="#" style="font-weight: bold;">More</a>
   		</div>
   
   
   	<div class="clr"></div>
   
   	<div style="width: 315px; margin-top: 10px;">
   			<div class="feature-thumb"><img class="feature" alt="image" src="images/stories/advertisements/ad15.jpg"/><span style="top: 60px;">Subscribe Now</span></div>
   				<span class="highlight-bold">Mens <span class="highlight-orange">Fashion</span> - the how to guide</span><div style="height: 5px;"></div> 
   				Fashion and Men? Not too long ago, an unlikely combination but is now a central part of...<br />
   				<a href="#" style="font-weight: bold;">More</a>
   		</div>
   
   </div>
   
   <div class="clr"></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 class="readon" href="your-link">
<span class="readon-full">Read more</span>
</a>

Using Typography

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

Video Tutorial Currently Available! Launch the Joomla Using Typography Video Tutorial now!

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 Article, the same procedure is apparent for Content Items and Custom modules. You may skip steps 4 and 5 if you are using No WYSIWYG editor. 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

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

In order to utilise the Fireworks Source PNG included with the mixxmag 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.

Logo Editing Video Tutorial

Learn how to customise your Mixxmag logo using Adobe Fireworks with this detailed video tutorial. Watch Now!

One of the first steps of customising your new Mixxmag template will undoubtedly be altering the logo text to reflect the name of your company / organisation. RocketTheme makes this process a simple one by including both the Source PNG for the template, as well as the 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 mixxmag-logo-source.png file in Adobe Fireworks. On the right side, you will notice a taskbar named Layers. Inside this column, a list of elements within the source will appear, divided 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.

Step 2

Next, double click on the logo. 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.)
Next, double click on the slogan which is beneath the logo. 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 slogan). You may need to drag and move the second text block
You will also notice the 3 circular images to the right of slogan. Select these and change them if you so desire. In this guide, we shall delete them.

Step 3

Next, reactivate the Web Layers slice. 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. If you find the slice is too small, hover your cursor the blue points around the slice and drag it to a new size.

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.

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.

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.

By default, the source should set the export file format to PNG32. If this is not the case, you will need to change your Fireworks export settings. Firstly, expand the Optimise & Align taskbar in the upper right of Fireworks. From the available dropdowns, select PNG32.

Step 5

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 Mixxmag is installed.
3. Navigate to the /templates/rt_mixxmag_j15/images/style#/logo directory.
4. Upload logo.png (and any other logo related images) 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, hosts 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.