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.
Next I want to center my page in my browser. I added the align=”center” to my table with the .ms-main class.
I 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.
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.
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
body.ms-BuilderBackground {
text-align: left !important;}
to my CSS and my RTE is now aligned left.
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.
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('pmblog-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.
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;}
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.
Here is the CSS code I used:
body {text-align: center; margin: 0px auto;}
body .mybody #contentwrapper,
body #aspnetForm {
height: 100%;
background: url('pmblog-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.