mojoPortal Tips: How To Add A Front-Page Rotator in 15 Minutes

Quite often, a client will want to be able to add a “featured content” rotator to their website, with little or no time to create a custom module. With mojoPortal, you do not have to do any custom programming at all; with a bit of CSS, the built-in HTML Content module, and your favorite graphics editor, you can create and add a rotator to your mojoPortal installation in no time at all. Here is how it is done!

The key element that makes this possible is mojoPortal’s built-in support for jQuery; you do not even have to include a link to the latest jQuery library, because it is already integrated into mojoPortal. The rotator we will be looking at today leverages the jQuery UI Tabs functionality, but with an alternative CSS layout.

Here is an example of the CSS I used for a recent client:

<style type="text/css">
#featured{
	width:800px;
	padding-right:498px;
	position:relative;
	border:none;
	min-height:283px;
margin-top:-2px!important;
padding-bottom:6px;
}

.ui-tabs .ui-tabs-nav li a
{
padding:2px!important;
padding-right:5px!important;
}

#featured.ui-widget-content{
background:transparent!important;
}

#featured ul.ui-tabs-nav{
	position:absolute;
	top:0; left:484px;
	list-style:none;
	padding:5px; margin:0;
	width:340px;
        background:none;
 	border:none;
        height:60px;
        margin-bottom:4px;
}

#featured ul.ui-tabs-nav li{
	padding:0;
	font-size:12px;
	color:#e9b844;
        white-space:normal!important;
        border:none;
        background:none;

}
#featured ul.ui-tabs-nav li img{
	float:left; margin:0px 5px;
	padding:1px;
	border:1px solid #e9b844;
        margin:3px;
}
#featured ul.ui-tabs-nav li span{
	font-size:11px;
	line-height:18px;
}
#featured li.ui-tabs-nav-item a{
	display:block;
	line-height:20px;
        border:1px solid #e9b844;
        margin-bottom:0px;
        width:246px!important;
        color:#ddd08a!important;

}
#featured li.ui-tabs-nav-item a:hover{
        color:#6a320a!important;
}
#featured li.ui-tabs-selected{
	background:none;
border:1px solid #e9b844;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
        font-weight:bold;
}
#featured .ui-tabs-panel{
	width:475px;
        height:283px;
        position:relative;
        padding:0px;
        border:1px solid #e9b844;
        border-radius: 0px;
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
        margin-top:2px;

}
#featured .ui-tabs-panel .info{
	position:absolute;
	top:183px; left:10;
	height:100px;
        width:475px;
border-top: 1px solid #e9b844;
border-bottom: 1px solid #e9b844;
}
#featured .info h2{
	font-size:18px!important; font-family:Georgia, serif;
	color:#ddd08a!important; padding:5px; margin:10px 0 10px 0;
	overflow:hidden;
}
#featured .info p{
	margin:0 5px;
	 font-size:12px;
	line-height:15px; color:#e9b844;
}
#featured .info a{
	text-decoration:none;
	color:#ddd08a;
}
#featured .info a:hover{
	text-decoration:underline;
}
#featured .ui-tabs-hide{
	display:none;
}
</style>

The HTML itself looks like this:

<div id="featured">
<!--Begin Thumbnails -->
<ul class="ui-tabs-nav" style="list-style-type: none;">
<!--First Thumbnail-->
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1">
<a href="#fragment-1">
<img alt="" height="55" id="domestic_sm" src="/Data/SiteImages/1x1.gif" width="95" /> 
<span>Feature 1<br />
<i>Feature Content 1</i> </span></a>
</li>
<!--nth Thumbnail-->
...
</ul>
<!--End Thumbnails -->
<!-- First Main Content Pane -->
<div class="ui-tabs-panel" id="fragment-1">
<img alt="" height="283" id="domestic_lg" src="/Data/SiteImages/1x1.gif" width="475" />
<div class="info">
<h2>
<a href="#">Domestic Vehicles</a></h2>
<p>Lorem Ipsum...</p>
</div>
</div>
<!-- nth Content -->
...
</div>
</div>

And finally, your last bit of code (be sure to add this in “Source” view, not HTML view):

<script type="text/javascript">
    $(document).ready(function () {
        $("#featured").tabs({ fx: { opacity: "toggle", duration: '500'} }).tabs("rotate", 5000, true);
</script>

You will probably want to adjust the CSS to your own layout requirements, but this is enough to give you a good head start. The best part is how easy it is to change out text and images, or adjust your rotation speed. Have fun!

Looking for quality mojoPortal Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , | Posted under MojoPortal | RSS 2.0

Author Spotlight

Carole Bennett

Carole Bennett is the founder and principal of IndigoTea. As a professional IT consultant, Carole has provided solutions for companies as diverse as Verizon, Frito-Lay, Capital One Auto Finance, and Zales Jewelers, parlaying a unique talent for acting as a translator between the worlds of business challenges and technology solutions. She considers multi-tasking skills gained from simultaneously 1) managing a fire performance troupe, 2) raising a family, and 3) working as a full-time IT consultant excellent preparation for her current career incarnation as the driving force behind IndigoTea. "Fire-breathing redhead on a mission" is not just a metaphorical description!

Leave a Reply

Your email address will not be published. Required fields are marked *


3 − = 2

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>