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.
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!