#1: The Ribbon Container
The Ribbon shown in Figure A-2 includes the following CSS elements.
Figure A-2. SharePoint 2010 Ribbon
- Ribbon Row/Ribbon Hide Title
- Ribbon Cont DIV Tag
- Ribbon Container
- Ribbon CUI
- Ribbon CUI Top Bar 2
- Ribbon CUI Tab Container (Ribbon Control)
- Tab Row Left (Site Actions and Breadcrumb)
- Ribbon Tabs
- Tab Row Right (Welcome Menu)
Note I have removed some of the CSS comments that are used for the standard SharePoint 2010 themes in the listings below to keep the display of the CSS properties simple and easy to read.
Ribbon Row/Ribbon Hide Title
This is the container for all of the items in the top Ribbon. It is the first DIV element that can be used to hide the whole Ribbon element if needed. This applies the background to the main Ribbon and also sets the vertical overflow to hidden so if the height goes beyond 43 pixels it will not show. There is also a CSS reference that is used to hide the whole Ribbon when you are printing out the page based on the @ media Print Element. Listing A-1 shows the standard CSS properties.
- Style Sheet: COREV4.CSS
- ID: s4-ribbonrow
- Class: s4-ribbonrowhidetitle
Listing A-1. Ribbon Row Base CSS
body #s4-ribbonrow{
min-height:43px;
background-color:#21374c;
overflow-y:hidden;
}
@media print{
body #s4-ribbonrow{
display:none;
}
Ribbon Cont DIV Tag
This is the second-level DIV that includes the repeating background image Sprite PNG file. Listing A-2 shows the standard CSS properties.
- Style Sheet: COREV4.CSS
- ID: s4-ribboncont
Listing A-2. Ribbon Cont DIV Tag CSS
body #s4-ribboncont{
padding:0px;
background:url("/_layouts/images/bgximg.png") repeat-x -0px -565px;
}
Ribbon Container
This is the third-level nested DIV that includes a CSS property of setting the height of the DIV to auto. Listing A-3 shows the standard CSS properties.
- Style Sheet: COREV4.CSS
- ID: RibbonContainer
Listing A-3. Ribbon Container CSS
body #RibbonContainer.loaded{
height:auto !important;
}
Ribbon CUI
This is the third-level nested DIV that includes a CSS property of setting the height of the DIV to auto. Listing A-4 shows the standard CSS properties.
Listing A-4. Ribbon CUI CSS
.ms-cui-ribbon,.ms-cui-menu,.ms-cui-toolbar-toolbar{
font-family:"Segoe UI",Tahoma,Verdana,sans-serif;
font-size:8pt;
color:#6c6e70;
}
Ribbon CUI Top Bar 2
This class is used to add height to the Ribbon area and also provides a border color. This bottom border and other border colors might get changed depending on the Ribbon tab that you have selected. For example, if you are in an announcement list and you click on the Items or List tabs within the list tools container, as shown in Figure A-3, the border on the bottom gets added automatically. Listing A-5 shows the standard CSS properties.
Figure A-3. SharePoint 2010 list tools with added border colors
- Style Sheet: COREV4.CSS
- Class: ms-cui-topBar2
Listing A-5. Ribbon CUI CSS
.ms-cui-topBar2{
border-bottom:1px solid #cad2db;
height:43px;
}
Ribbon CUI Tab Container (Ribbon Control)
This class is used for the containing DIV tag, as shown in Figure A-4. This class is not referenced in any style sheet but can be used if you need to stylize the container DIV element.
Figure A-4. SharePoint 2010 Ribbon tab container
- Style Sheet: No Reference Used
- Class: ms-cui-tabContainer
Tab Row Left (Site Actions and Breadcrumb)
This class is used to float the site actions, breadcrumb, and Edit icon to the left of the Ribbon area, as shown in Figure A-5. Listing A-6 shows the standard CSS properties.
Figure A-5. SharePoint 2010 Ribbon tab row left elements
- Style Sheet: COREV4.CSS
- ID: RibbonContainer-TabRowLeft
- Class: ms-cui-TabRowLeft ms-siteactionscontainer
Listing A-6. Ribbon Tab Row Left CSS
.ms-cui-TabRowLeft,.ms-cui-QATRowCenter{
float:left;
}
.ms-cui-TabRowLeft{
margin-top:19px;
font-size:0px;
}
Ribbon Tabs
This class is used to set the height of the Ribbon tabs and also float it to the left. There is a property to set the element to not wrap and hide the overflow for both horizontal and vertical. This element is shown in Figure A-6. Listing A-7 shows the standard CSS properties.
Figure A-6. SharePoint 2010 Ribbon tabs
- Style Sheet: COREV4.CSS
- Class: ms-cui-tts
Listing A-7. Ribbon Tabs
.ms-cui-tts,.ms-cui-tts-scale-1,.ms-cui-tts-scale-2{
display:block;
float:left;
white-space:nowrap;
height:44px;
overflow-y:hidden;
overflow-x:hidden;
margin:0px 0px -1px 0px;
padding:0px;
list-style-type:none;
}
Tab Row Right (Welcome Menu)
This class is used to float the Welcome Menu text container that displays your name to the right. It also sets the top margin to zero and vertically aligns the element in the middle, as shown in Figure A-7. Listing A-8 shows the standard CSS properties.
Figure A-7. SharePoint 2010 Welcome Menu container
- Style Sheet: COREV4.CSS
- ID: RibbonContainer-TabRowRight
- Class: ms-cui-TabRowRight s4-trc-container
Listing A-8. Ribbon Welcome Menu Container
.ms-cui-TabRowRight,.ms-cui-QATRowRight{
float:right;
}
.ms-cui-TabRowRight{
margin-top:0px;
vertical-align:middle;
}
.s4-trc-container{
padding-right:0px;
}
The next section that I will cover is based around the Site Actions menu button and icon, and also its drop-down menu that shows when you click on Site Actions.