Tuesday, February 26, 2013

Change ‘SharePoint’ in top left bar in Sharepoint 2013 with Logo

'SharePoint' on the top left of the new SharePoint 2013 site (in the blue bar) can be replaced by overriding one of the new Delegate Controls.This text is displayed using 'SuiteBarBrandingDelegate' delegate control and to change it, you would need to Override SuiteBarBrandingDelegate with you own custom control and deploy it in your farm.
In this post we will look at the detailed steps to replace the text ‘SharePoint’ with 'My Logo' using the custom SuiteBarBrandingDelegate control.

Out Put:




Steps:

1. Create an empty SharePoint project.




2. Next add a new User Control Item.





3. The solution bar should look like below.

















4. Next add the code in the User Control that you added.The code will replace “SharePoint” text with a Logo. The Logo is already uploaded in the styles Library at path – ‘/Style%20Library/Images/My_logo.png’.
using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
namespace CustomSuiteBarBrandingDelegate.ControlTemplates.CustomSuiteBarBrandingDelegate
{
public partial class SuiteBarBrandingDelegateCtrl : UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected override void Render(HtmlTextWriter writer)
{
writer.RenderBeginTag(HtmlTextWriterTag.Style);
writer.Write(“.ms-core-brandingText {display: inline-block;}”);
writer.RenderEndTag();
writer.AddAttribute(HtmlTextWriterAttribute.Class, “ms-core-brandingText”);
writer.Write(“”);
base.Render(writer);
}
}
}

5. Next add the Elements file for the Control.





Add the following in Elements file for Overriding the ‘SuiteBarBrandingDelegate’ Control.


Sequence=”9″
ControlSrc=”/_ControlTemplates/15/CustomSuiteBarBrandingDelegate/SuiteBarBrandingDelegateCtrl.ascx”>



6. Finally Build and Deploy.

7. Resulting Logo.