Customizing the blog layout in mojoportal for 2 right columns

Posted by craig Monday, May 04, 2009 11:46:52 AM

For my blog I really wanted to have 2 right hand columns.  1st the one with the calendar, categories, and other usual stuff supplied with the blog, and then a second column which will be used for arbitrary content, in my case I use the generic mojoportal html content.

Getting the spacing right can be a bit tricky, but following the steps below should do the trick:

1).  Make a Copy your skin to a new skin (just to be sure we don’t mess things up) note that the skins are under Data/skins (for the global reference skins) and Data/Sites/#/ for the skins currently in use for a given site. If you want to make your new modified skin available to all sites, it should be included under Data/skins

2) Select the new skin on the blog , I like this feature of Mojo portal, we can use a different skin for different pages.  The blog now has the copy of the original skin e.g. Data/Sites/#/skin-copy

 

3) Goto the file styleLayout.css and (in the directory with the skin for the blog) Data/Sites/#/skin-copy.

Modify the top lines as desired, to get the two right columns I modified the top as follows:

----------------------------------

body { margin: 0px 0px 0px 0px; }
#wrapwebsite { margin: 5px auto; width: 800px; }
#wrapheader {position: relative; clear:left; width: 800px;height: 135px;
    margin: 0; padding: 0; }
#wrapcenter { margin: 0px 5px 0px 5px; clear:left; min-height: 300px;width: 850px;  }
#wrapfooter { }
.leftside { float:left; width:28%; margin: 5px 2px 0px 0px;}
.center-nomargins {float:left; width: 100%;}
.center-rightandleftmargins {float:left; width: 40%; margin: 10px 5px 0px 5px; }
.center-rightmargin {float:left; width: 75%; margin: 5px 0px 0px 5px;}
.center-leftmargin { float:left; width: 70%; margin: 10px 0px 0px 5px; }
.rightside { float:right; width:24%;  margin: 5px 0px 0px 0px;  }

------------------------------

NOTE: I increased the total width to 800 to make place for the main blog text, in addition I changed .center-rightmargin to 75% (from 70%) in order to increase the space.  The right panel should now be positioned correctly.

Copyright 2009 AnyTime
Comments are closed on this post.