#4: Welcome Menu
The Welcome Menu shown in Figure A-26 includes the following CSS elements. The drop-down element uses the same classes as the Site Actions menu. Refer to those classes specified earlier in this chapter as needed.
- Welcome Menu Container
- Welcome Menu Inner Container
- Welcome Menu Text
- Welcome Menu Icon
Figure A-26. SharePoint 2010 Welcome menu
Welcome Menu Container
This class is used to float the element to the left and add in some margins, as shown in Figure A-27. Listing A-26 shows the standard CSS properties.
Figure A-27. SharePoint 2010 Welcome menu container
- Style Sheet: COREV4.CSS
- Class: s4-trc-container-menu
Listing A-26. Welcome Menu Container CSS
.s4-trc-container-menu{
float:left;
margin:12px 3px;
}
Welcome Menu Inner Container
The first class is used to add padding, margins, font size, and font family, as shown in Listing A-27. The second class within Listing A-27 adds the border and background image styles for when you hover over the user's name.
Listing A-27. Welcome Menu Inner Container CSS
.ms-welcomeMenu{
padding:2px 5px 3px;
margin:0px 3px;
font-size:1em;
font-family:Verdana,sans-serif;
border:1px solid transparent;
display:inline-block;
}
.ms-welcomeMenu.ms-SpLinkButtonActive{
border-color:#8b929a;
background:url("/_layouts/images/bgximg.png") repeat-x -0px -489px;
background-color:#21374c;
}
Welcome Menu Text
This class is used to add margins, text color, and text decoration, as shown in Figure A-28. Listing A-28 shows the standard CSS properties.
Figure A-28. SharePoint 2010 Welcome menu text
- Style Sheet: COREV4.CSS
- Class: ms-menu-a
Listing A-28. Welcome Menu Text CSS
.ms-welcomeMenu .ms-menu-a{
margin-right:5px;
}
.ms-welcomeMenu a:link{
color:#fff;
}
.ms-welcomeMenu a:hover{
text-decoration:none !important;
}
.ms-welcomeMenu.ms-SpLinkButtonActive a:link{
color:#fff;
}
Welcome Menu Icon
This is the same icon and style used for the site actions menu. It is displayed by using the “fgimg.png” sprite image and having inline CSS to position the icon as shown in Figure A-29. Listing A-29 shows the inline CSS properties.
Figure A-29. SharePoint 2010 Welcome menu icon
- Style Sheet: Inline CSS
Listing A-29. Welcome Menu Icon Inline CSS
left: 0px !important;
top: -491px !important;
border: none;
position: absolute;
Within this next section I will describe the main container elements that frame the header and content areas.