mojoPortal Tip: How to Break Out of The Mold and Into the Grid

By default, mojoPortal skins support a 3-panel mode; with a bit of tweaking, as shown in Ian’s article, you can add an additional header/footer pane. Even with all these options, creating an interesting, non-standard layout in mojoPortal, that’s still friendly to non-designers left to the task of creating and updating content can be a real challenge. If you are creating a mojoPortal-driven site for a client whose talents lie in other realms, it’s best to keep content management as simple as possible.  With that in mind, let’s look at applying custom layouts to a mojoPortal implementation.

I’ll be using screenshots from a custom skin I’m in the process of finishing; if you would like to follow along using an existing mojoPortal skin, I recommend using the 5-pane skin forRamblingSoul-5ContentPanes.

After you’ve logged into your mojoPortal instance, select “Site Settings”, and choose “forRamblingSoul-5ContentPanes” as your site default skin. After you’ve saved your settings, go to your page of choice, and select “Edit this page” from your admin bar.

Once you’re on the Page Content Admin, you’ll notice something different about your content panes:

Caption 1: There are extra content panes!

You’ll notice that there are extra content panes, in addition to the traditional 3-pane layout that ships by default with mojoPortal. In this screenshot, you will notice that I have 4 feature instances loaded into the top pane. Using the traditional values for content, you would expect to see them stacked top-to-bottom in the UI – let’s take a look, shall we?

Caption 2: Froggies all in a row?

Well, they are all in a left-to-right row, aren’t they? And equally proportioned, to boot.  Nice! This will make it much simpler for my client to edit her content at a later point in time, without needing to know anything about HTML, tables or the like.  I bet you’d like to see how this was done – well, let’s look at the steps to make this happen.

First, we’ll look at one of the content instances:

Caption 3: A custom CSS

Here, you can see the custom CSS “floatQuarters” in the setting for the content instance. That’s half of the magic. Here is the other half:

.floatQuarters
{
float:left!important;
width:24%!important;
margin:2px!important;
min-height: 270px!important;
}
.altcontent1
{
margin-left: 6px;
    width: 968px !important;
}

This allows me to set a specific width for my top pane, and stack my 4 HTML instances from left-to-right.  Clean, easy and so much less of a headache for my client to update!

This is a great way to incorporate grid-based web design into a CMS format, while reducing the opportunity for your content contributors to “break” your design. I’d like to express my thanks to Joe Davis at i7MEDIA for pointing out that “float:left;” works in the custom classes, thus allowing the side-by-side configuration.

And that’s it!

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 *


7 × = 56

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>