Apply style to welcome menu text in SharePoint 2010 master page

In this post I will explain the various styles applied to welcome menu text

.s4-trc-container-menu	This class is applied to DIV tag that binds the welcome text .s4-trc-container-menu {     float: left! important;     margin: 12px 3px!important; }
.ms-SPLink	This class is applied to SPAN tag .ms-SPLink {     color: #32B0A4!important;     font-family: 'Tahoma’, ‘Lucida Grande’, Verdana,Arial,sans-serif! important;     font-size: 0.8em!important; }
.s4-trc-container-menu .ms-SPLink	.s4-trc-container .ms-SPLink {     display: inline!important;     vertical-align: middle!important; }
.ms-SpLinkButtonInActive	.ms-SpLinkButtonInActive, .ms-SpLinkButtonActive {     padding: 1px 1px 1px 3px!important; } .ms-HoverCellInActive, .ms-SpLinkButtonInActive {     background-color: transparent!important;     border: medium none!important;     color: #3F3F3F!important;     margin: 1px!important;     vertical-align: top!important; }
.ms-welcomeMenu	.ms-welcomeMenu {     border: 1px solid transparent!important;     display: inline-block!important;     font-family: Verdana,sans-serif!important;     font-size: 1em!important;     margin: 0 3px!important;     padding: 2px 5px 3px!important; }
.ms-welcomeMenu  a:link	.ms-welcomeMenu  a:link { Color:#fff!important; }
.ms-welcomeMenu a:hover	.ms-welcomeMenu  a:hover { text-decoration:none!important; }
.ms-viewselector-arrow	.ms-viewselector-arrow {     vertical-align: middle; }

Now we will add current login user photo nearby the welcome menu text. In order to do so add the below register tag in the master page

<%@ Register Tagprefix="SPSWC" Namespace="Microsoft.SharePoint.Portal.WebControls" Assembly="Microsoft.SharePoint.Portal, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

Then find the div tag with class “s4-trc-container-menu” and add the below line in next line after this class 

<SPSWC:ProfilePropertyImage PropertyName="PictureUrl" style="float: left; height: 20px;" ShowPlaceholder="true" id="PictureUrlImage" runat="server"/>

text-decoration:nonetext-decoration:nonetext-decoration:nonetext-decoration:none}

SharePoint 2010 Custom Master page Design and Register custom CSS

In this article, I will help you to understand how to design master page and register custom CSS. SharePoint 2010 comes with OOB Master Pages; v4.master page is the default master in SharePoint 2010. Master pages are basically used to give consistent look throughout the site as well as it includes common elements throughout the site.

We will be using copy of v4.master page to design the custom master page. Firstly I will explain how to register custom CSS in master page; so open your site in SharePoint 2010 Designer

Click on the Master page from left menu and copy v4.master page and rename it

Next we need to overrides the default core4.css applied to the newly created master page (BrandingTeamsite.master); click the All files from left menu and open the Style library. Right click on the Style library and add new CSS file.

Open the BrandingTeamsite.master page and search the head tag. Add the below link in the master page

            <SharePoint:CSSRegistration name="/Style Library/Teamsite.css" After="corev4.css" runat="server"/>

Or

            <SharePoint:CSSRegistration name="<%$SPUrl:~SiteCollection/Style Library/Teamsite.css%>"  After="corev4.css" runat="server"/>

In the future article we will focus on how to apply css to master page.

How to hide/show the SharePoint 2010 ribbon according to SharePoint group

In this post, I will explain how to hide/show the SharePoint 2010 ribbon according to SharePoint group. Use the following code to do so
Sharepoint:SPSecurityTrimmedControl runat="server" Permissions="EditListItems">
!—Ribbon code-->
/Sharepoint:SPSecurityTrimmedControl>