#5: Content Containers
The content area shown in Figure A-30 includes the following CSS elements.
- Workspace
- Body Container
- Title Row
- Title Area
- Title Inner
- Title Table
Figure A-30. SharePoint 2010 page breadcrumb
Workspace
This ID is used to set the height and width to automatic and assign the overflow properties. Based on this ID, JavaScript is used to automatically set the height and width of the DIV based on the size of the browser window. Listing A-30 shows the standard CSS properties.
- Style Sheet: COREV4.CSS
- ID: s4-workspace
Listing A-30. Workspace CSS
body #s4-workspace{
overflow:visible !important;
width:auto !important;
height:auto !important;
}
body #s4-workspace{
overflow-y:scroll;
overflow-x:auto;
position:relative;
left:0px;
}
Body Container
This ID includes a min-width for both the header and content elements. Listing A-31 shows the standard CSS properties.
Listing A-31. Body Container CSS
body #s4-bodyContainer{
min-width:760px;
}
Title Row
This ID and CSS is a container for the logo, page breadcrumb, social tags, top navigation search, and the help icon. The ms-titlerowborder class adds a border to the right of these elements, as shown in Figure A-31. Listing A-32 shows the standard CSS properties.
Figure A-31. SharePoint 2010 title row
- Style Sheet: COREV4.CSS
- ID: s4-titlerow
- Class: s4-pr s4-notdlg s4-titlerowhidetitle ms-titlerowborder ms-titlerowborder
Listing A-32. Title Row CSS
body #s4-titlerow{
display:block !important;
}
.ms-titlerowborder{
border-right:1px solid #b8babd;
}
Title Area
This CSS is used to add padding to the left of the site logo, set a minimum height, add a background image with color, and set the horizontal overflow to hidden, as shown in Figure A-32. Listing A-33 shows the standard CSS properties.
Figure A-32. SharePoint 2010 title area
- Style Sheet: COREV4.CSS
- Class: s4-title s4-lp
Listing A-33. Title Area CSS
.s4-title{
padding:0px 0px 0px 10px;
margin:0px;
min-height:64px;
background:url("/_layouts/images/bgximg.png") repeat-x -0px -1023px;
background-color:#f9f9f9;
word-wrap:break-word;
-ms-word-wrap:break-word;
overflow-x:hidden;
}
Title Inner
This CSS is used to set a minimum height on the title area. Listing A-34 shows the standard CSS properties.
- Style Sheet: COREV4.CSS
- Class: s4-title-inner
Listing A-34. Title Inner CSS
.s4-title-inner{
min-height:64px;
}
Title Table
This CSS is used to set the height, width, and font properties for the title table. Listing A-35 shows the standard CSS properties.
- Style Sheet: COREV4.CSS
- Class: s4-titletable
.s4-titletable{
border:0px;
height:64px;
width:100%;
font-family:Verdana,Arial,sans-serif;
font-size:8pt;
}
Within this next section I will cover the elements that are contained within the site table. The first element is the site logo that gets displayed within the title area on the left.