MojoPortal: Adding Header and Footer Content Panes to a Skin

This article explains how you can change an existing skin to add in header or footer content panes and how to make a few minor changes manually to the CSS files to get the look that you are after.

MojoPortal is generally setup to have 3 panes: center, left and right.

This is sufficient in most cases, but there may be cases where additional panes are useful. I have found this in particular when taking an existing website as a starting point. I have been approached by a client who is happy with their existing website, but want to be able to add extra features or functionality, or want the benefits of CMS.

First a word of warning: you should give serious consideration to whether or not you can achieve a good result without adding extra panes first, because if you do add extra panes, there may be downsides; such as difficulties swapping skins.

If you have not created your own skin yet, refer to the post for tweaking an existing skin, which shows you how to copy a skin within MojoPortal so you can work on a copy of the skin. This will also show you how to turn off CSS caching while you are editing your skin. You should make sure you now have your skin selected (you can do this from the admin menu by selecting Administration | Settings) and CSS caching turned off.

Locate the skins in your file system and use Notepad++ to open layout.master for your skin and forRamblingSoul-5ContentPanes to use as a reference. Search for ‘divAlt’ to find the two sections in the reference file that relate to the extra two panes. Copy and paste them into a similar place in yourlayout.master.

Notice that I have highlighted the CSS Class. I will come back to that later.

Back on your website, use the admin menu to start editing a page.

You will now see that you have top pane and bottom pane available as well as the pre-existing left, center and right panes. Add some content to the right pane.

I also add other content so that I have HTML content in the top pane, a blog in the center, and HTML and links in the right pane:

I can then check to see how my page looks:

It is a step in the right direction, but my links logo is too wide for its allocated space. Now I have the panes that I want, but I also want to change the proportions for the panes, to make the right pane a little wider.

To do this, locate the style.css file and open it for editing. You’ll find a section that deals with pane widths which you can edit as necessary.

After making changes, save the .css file and refresh your browser (F5) and you should see your changes (if you do not, have you disabled the cache? see above).

That has now sorted out the width, but there is still some unwanted space above my links logo. And the lower content does not seem to line up with the border around the top pane. It can be a bit hard to see where the panes begin and end. You may find it useful to temporarily put a border around the bottom panes to make it a bit clearer.

Now it is easier to see that the pane housing the test blog is not lined up on the left, and the right pane does not look lined up because of some empty space around it.

I might decide to get rid of the left hand margin of the test blog pane and put a border around the right pane to even things up (tip: make sure your changes are not overridden by any lines further down).

Then, I can see how it looks:

Well, that is it for this article! I hope it has been of use to you.

If you are new to CSS, it is worth downloading and printing out the CSS cheat sheet – it is a useful reference for CSS to keep by your side.

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

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

Leave a Reply

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


9 + 6 =

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>