mojoPortal Tips: Creating a Unique “Home” Navigation Menu Link

Not too long ago, I received a request for a custom mojoPortal skin; since the site is baseball-oriented, the design incorporated a “Home Plate” for the “Home” link on the menu. I actually enjoyed working on this project very much – let’s take a look at how this was done.

Custom Home Link

This is the finished site; as you can see, we’ve got the “Home Plate” link in place. The CSS required to do this is in multiple parts:

ul.art-hmenu > li:first-child > a .t
{
 color: #074A07 !important;
}
.art-nav-homeplate {
 background-color: transparent;
 background-image: url("/Data/Sites/1/skins/1_beisboldata/images/base1.png") !important;
 background-position: 10px center;
 background-repeat: no-repeat;
 height: 64px;
 padding-left: 10px;
 position: absolute !important;
 width: 996px;
}

.art-nav-homeplate is a custom class I created to wrap the menu, in order to maintain the rest of the menu formatting undisturbed; this is how it was implemented:

<div class="art-nav">
 <div class="art-nav-homeplate">
 <div class="art-nav-l"></div>
 <div class="art-nav-r"></div>
 <div class="art-nav-wrapper">
 <div class="art-nav-inner">
....
</div>

Occasionally, you will need to add custom features to your layout.master file in order to implement a unique design element, custom module, or other feature specific to your client’s needs. This approach allowed me to create a custom skin and incorporate a unique design feature for the customer.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

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

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 *


× 2 = 16

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>