Domingo Jul 23

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>

Radio Online

Buscanos en:

  
Android - Iphone - Blackberry

Tutorials

Dive deeper into the world of Joomla with informative and detailed written tutorials on a variety of topics including general Joomla functions, RocketTheme template modifications, and much more at our Tutorials section.