Fixed Width SharePoint

Fixed-Width SharePoint 2010 Master Page with Centered Content

I have been working on a project to create a sharepoint site collection that looks like Adobe Labs, for announcing and displaying software products under development across the company.

CSS

CSS is the key here, the following will create the fixed width, centered, with scrollbars:

html{background-color:#444444;overflow/**/:auto;}

body.v4master {width:950px;margin:0px auto;overflow:visible;background-color: transparent !important;}

.ms-dialog body.v4master {height: 100%;overflow: hidden;width: 100%;}
 
body #s4-workspace {left: 0;overflow: auto !important;overflow/**/: visible !important;position: relative;width: 100% !important;display:table;border-spacing:0px;}

.ms-dialog body #s4-workspace{display:block !important;overflow/**/: auto !important;}

CSS for the welcome text:

.WelcomeArea {padding-top:6px;}
.WelcomeText {color:#FFFFFF;font-size:11px;float:right;}

CSS for the navigation and ribbon:

/* Aligns the Top Bars */
.ms-cui-ribbonTopBars {width: 950px !important;margin-left:auto;margin-right:auto;}

/* Turns off the border on the bottom of the tabs */
.ms-cui-ribbonTopBars > div {border-bottom:1px solid transparent !important;}

/* Navigation list */
.s4-tn{
background-color:#CCCCCC;
padding:0px; margin:0px;
font-family:"Myriad Web Pro";
font-size:12px;
}

/* Global navigation */
.s4-tn li.static > .menu-item{
color:#444444; 
white-space:nowrap;
border:1px solid transparent;
padding:6px 10px 4px 10px;
line-height:12px;
height:15px;
}

/* Hover */
.s4-tn li.static > a:hover{
/*background:url("/_layouts/images/selbg.png") repeat-x left top;*/
background-color:#E9E9E9;
color:#444444;
text-decoration:none;
}

/* Selected */
.s4-toplinks .s4-tn a.selected{

/*background:url("/_layouts/images/selbg.png") repeat-x left top;*/
background-color:#E9E9E9;
color:#444444;
text-decoration:none;
border:1px transparent solid;
padding-right:10px;
padding-left:10px;
margin:0px;
}

Master Page


I had to do some rebuilding of the page, but thankfully the heavy commenting in this master page allows me to understand everything I am moving.

Comments

Popular posts from this blog

SharePoint Designer 2013 Approval Workflow with Comments

Change SharePoint server hostname and Web Application Names

SharePoint Search - Content Processing Pipeline Failed to Process the Item