Designing a Centered Fixed Width WSS Site

I am about to release some centered skins that are a fixed width.  These have a background image that is very easy to change.  Before these can be sold, I have to overcome a few issues when using a background image and trying to use a centered content area.

When creating skins I try to stay hands off the master page as much as possible.  So some of the changes that I make are perhaps adding a class to a table or adding a link to a CSS file.

OOTB the master page has a class applied to the table called .ms-main, so my first order of business is to add some styling to the .ms-main.

.ms-main {
    background: #fff;  width: 1020px !important;
    height: 100%; margin: 0px auto !important;}

 

 

Now my master page will be a fixed width.

imageNext I want to center my page in my browser.  I added the align=”center” to my table with the .ms-main class.

imageI also add to my CSS some code to make sure everything gets moved to the center and that it will look right in the browser.

body {text-align: center; margin: 0px auto;}

 

I am going to add to more changes to my master page, an ID to the form and to the body tag.

<BODY class="mybody" scroll="yes" …"> <form id="myform" runat="server" onsubmit…>

 

So now I have a little more control over the body tag, the form, and the main table.  I am going to go one step further and add a content wrapper around my table area (I like control).  This is just a div with the ID contentwrapper.

<div id="contentwrapper">
    <table class="ms-main" width="100%" height="100%" align="center">

 

QUICK TIP: Instead of scrolling down to the bottom and making sure you are at the closing part of a selection, in SharePoint Designer try this: hit CTRL SHIFT and ; (semicolon) and the selection will be highlighted for you.

Now I have my master page with the changes; the CSS link, the IDs/Classes on the body, form and added a wrapper.

Your site should now have a fixed width centered page that you can work with.

image Here is my CSS code so far:

body {text-align: center; margin: 0px auto;}
body .mybody #contentwrapper, /* controlling my master page */
body #aspnetForm /* this helps with control on the _layouts pages */
{height: 100%;  margin: 0px auto !important;}
#aspnetForm {height: 100%;}
#myform {background: none !Important;}
.ms-main { background: #fff;  width: 1020px !important; height: 100%;
margin: 0px auto !important;}

 

Looks good, but I have one problem.  Since I set my body to text-align: center, my RTE is out of wack.

image Here is where that extra control will help.  I want to tell my .ms-main to align the text to left, so I add table.ms-main {text-align: left} to my CSS.  With some searching I finally figured out what class I needed to control the centering of the RTE body.

The RTE has a class of its own called .ms-BuilderBackground.  So I add the following to my CSS and my RTE is now aligned left.

body.ms-BuilderBackground { text-align: left !important;}

 

 

image So far this is pretty cool and I could brand my site from here but I want to show you one more step.  Let’s add a background image.

For demo purposes I am just picking a random image and have placed the CSS file and the image file in the master page gallery.

image I added a line to my CSS style for my body…

body .mybody #contentwrapper, /* this is for my master page */
body #aspnetForm /* this is for my _layouts pages */ {
height: 100%;  background: url('bg.jpg') no-repeat center top;
margin: 0px auto !important;}

 

 

Now I have a cool background to my site, but what about the RTE, lets see what’s happened there.

image

image Not bad, but I can see some of the image creeping in at the top and since I am picky I don’t want anything there.

To remove the background image from my RTE, I add a new line of CSS

body.ms-BuilderBackground #aspnetForm
{background-image: none !important;}

 

image Voila – I now have a Fixed Width Centered Master Page with a background image that does not interfere with the RTE.

There is one more thing I have to add to my CSS file to make sure the other parts are working. For instance when I want to add a webpart to my page, the box that pops up is missing the ADD and CANCEL button and has inherited the background image.

With more research I find the classes I will need to add to my CSS style sheet to fix this problem.

body table#mainTable {
    background: #fff; height: 100%; width: 100% !important;}
#WebpartPickerTable {height: 100%;}

 

After this has been added my Web Part Picker Table has the ADD and CANCEL button and no background image.

And with my skinning technique the _layouts pages has the same look and feel as the main pages.

image Here is the CSS code I used:

body {text-align: center; margin: 0px auto;}
body .mybody #contentwrapper,
body #aspnetForm {
    height: 100%;
      background: url('bg.jpg') no-repeat center top;
    margin: 0px auto !important;}
#aspnetForm {height: 100%;}
#myform {background: none !Important;}
.ms-main {
    background: #fff;
    width: 1020px !important;
    height: 100%;
     margin: 0px auto !important;}
table.ms-main {text-align: left;}
body.ms-BuilderBackground {
    text-align: left !important;}
body.ms-BuilderBackground #aspnetForm {background-image: none !important;}
body table#mainTable {
    background: #fff;
    height: 100%;
    width: 100% !important;}
#WebpartPickerTable {height: 100%;}

Give it a try and let me know how it works for you.

, , ,