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

Written by Carole Bennett Sunday, 26 August 2012

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!