Getting started Branding SharePoint sites

Considering you are a complete novice to web development, where do you start and how do you go about learning to brand SharePoint sites. I will give you an account of how I went about branding SharePoint. When I started, I was a total fresher to web development and ASP.NET. Note that the post below assumes you already have a template or the HTML, CSS and image files created by a web developer. The post below only describes how to go about integrating the template into SharePoint to get the desired look and feel. This post does not cover concepts related to creating templates using Dreamweaver and Photoshop.


 Firstly you need to know the basics of HTML and CSS. For this you may use http://www.w3schools.com/ to get a jump start. I advise you to use the “TRY IT OUT’s” in the tutorials and experiment. Once you have a grasp of HTML and CSS concepts to an extent. You could try creating a master page in Microsoft Visual Studio. You may download the free express versions from here. You may skip the above step and start designing in SharePoint 2010 designer if you want, but creating a master page in SharePoint will be much easier once you are familiar with concepts related to master pages and layouts in ASP.NET.


Download the SharePoint designer 2010 (Its free of charge) and install it onto your target machine. You may download the 32 bit version (recommended for most users) of SharePoint designer from here or the 64 bit version of SharePoint designer from here. Start off by going through Randy Drisgill’s articles on SharePoint 2010 branding. Note that these articles are based on SharePoint 2007 site but they give you an understanding of the basic concepts involved branding SharePoint. 
Thats it, get started branding  your site. All the best :D. 

SharePoint 2010 Branding Tips and Fixes

Sl no.	Issue	Solution
SharePoint 2010-Master page
1	Starter master page by Randy Drisgill not displayed when uploaded into SP designer 2010.	To solve this problem go into site settings->Master pages and page layouts, here change the property of the starter master page file from page layout to Publishing master page in order to have the master page displayed in the Master pages gallery rather than the page layouts gallery.
2	Hide ribbon from anonymous view	Use security trimmed control. Refer http://www.topsharepoint.com/hide-the-ribbon-from-anonymous-users for further information.
3	Scroll bar missing on adding security trimmed control in SharePoint 2010.	Make the following change in the embedded style in the master page: body { height:100%; overflow:auto; width:100%; }
4	Displaying favicon	Use the control <SharePoint:SPShortcutIcon runat="server" IconUrl="/Style Library/sitename/favicon.ico"/> Use your custom path instead of the above bolded text.
5	Applying a Favicon /Favicon not getting applied	· Make sure the image is a .ico image · Use the control <!-- favicon --> <SharePoint:SPShortcutIcon runat="server" IconUrl="/Style%20Library/images/favicon.ico"/> · Make sure to include %20 symbol instead of blank spaces.
6	Hide ribbon from anonymous view	Use security trimmed control. Refer http://www.topsharepoint.com/hide-the-ribbon-from-anonymous-users for further information.
7	How to move controls, HTML links into the ribbon’s blue bar beside the welcome/login control in SharePoint 2010 master page.	Move the contents into the <div class="s4-trc-container-menu"> “Your Content” “Welcome Controls etc” </div>
8	Planning the navigation for the site	Global navigation (AKA top navigation): Generally the top nav is to be included in the master page in a majority of the cases.
		Current navigation (AKA Left navigation) The current navigation may be included in the master page or within the page layout
9	Customizing items displayed in navigation area using browser site settings menu	Global navigation (AKA top navigation): To change the items displayed in the global navigation. Go to site settings->Navigation( Under Look and Feel section), here modify the items such as options of whether subsite to be displayed, subsite limit, adding manual links to global nav etc.
		Current navigation (AKA Left navigation) Same as above.
10	How to include quiclaunch/left navigation in page layout	Use the below control in the page layout to obtain the desired result: <SharePointWebControls:AspMenu ID="currentNav" StaticDisplayLevels="2" MaximumDynamicDisplayLevels="0" StaticSubMenuIndent="0" SkipLinkText="" ItemWrap="True" StaticEnableDefaultPopOutImage="false" DynamicEnableDefaultPopOutImage="false" DataSourceID="currentNavDS" CssClass="currentNav" runat="server"> <LevelMenuItemStyles> <asp:MenuItemStyle CssClass="currentNavHeader"/> <asp:MenuItemStyle CssClass="currentNavItem"/> </LevelMenuItemStyles> <LevelSubMenuStyles> <asp:SubMenuStyle CssClass="currentNavHeaderMenu"/> <asp:SubMenuStyle CssClass="currentNavItemMenu"/> </LevelSubMenuStyles> <LevelSelectedStyles> <asp:MenuItemStyle CssClass="currentNavHeaderActive"/> <asp:MenuItemStyle CssClass="currentNavItemActive"/> </LevelSelectedStyles> </SharePointWebControls:AspMenu> <PublishingNavigation:PortalSiteMapDataSource ID="currentNavDS" SiteMapProvider="CurrentNavSiteMapProvider" StartFromCurrentNode="true" ShowStartingNode="false" TrimNonCurrentTypes="Heading" runat="server"/> <!-- ================================= Left Nav Bar Ends Here =========================== -->
11	How to remove the social links tags, I like it from the master page	Set the visibilty of the control shown below to false: <SharePoint:DelegateControl ControlId="GlobalSiteLink3-mini" Scope="Farm" runat="server" Visible="false" /> in the master page.
12	To remove page title from master page ( The one in the master page not the one that appears on the browser)	Set the visibilty of the control shown below to false: <asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server" Visible="false" /> In the master page.
13	Two scroll bar for anonymous user in custom master page	Remove the id=”s4-workspace” from the custom master page.
14	How to add the breadcrumb control in customized starter master page	Place the control below in a div with styling <asp:SiteMapPath runat="server" SiteMapProviders= "SPSiteMapProvider,SPXmlContentMapProvider" RenderCurrentNodeAsLink="false" NodeStyle-CssClass="breadcrumbNode" CurrentNodeStyle-CssClass="breadcrumbCurrentNode" RootNodeStyle-CssClass="breadcrumbRootNode" HideInteriorRootNodes="true" SkipLinkText=""/>
15	document.getElementById() is null or not an object error in SharePoint site	Do not comment out any of the important placeholders in the SharePoint master page, especially the search placeholder.Use the css property display:none to hide any of the divs and make the placeholder to visible:none.
Branding Search in SharePoint 2010
16	Customizing search site for intranet site	Use minimal.master as a starting point or use V4 master page. Note that the search results as displayed in the breadcrumb control. Therefore place the breadcrumb control appropriately in the master page to obtain the desired result. (Important Note: The above method is to be used only when the master page of the default search site collection needs to be modified. You may alternately consider the method shown below as well)
17	Customizing search for internet sites (Public facing sites)	Create a custom search page and make the appropriate change in Central admin. Note that you may use any page layout once the search site is made. Also, The master page applied to the search site.
18	Changing the search icon with custom image	Use the link given below http://erikswenson.blogspot.com/2010/01/change-sharepoint-search-icon-with-just.html Load the custom search image into any of sharepoint images library and refer it in the styles prescribed in the blog post link above.
Branding the Content Query web part in SharePoint 2010
19	Content/ Some fields, of a list in content query web part not visible to anonymous users	Publish the ItemStyles.xsl file after checking it in to make it available to other users (including anonymous users).
20	Getting junk values such as below <div class="ExternalClass65A1E736"><p><span class="Apple-style-span" style="text-transform:none;text-indent:0px;border-collapse:separate;font:medium &quot;times new roman&quot;;white-space:normal;letter-spacing:normal;word-spacing:0px"><span class="Apple-style-span" style="text-align:left;border-collapse:collapse;font-family:verdana;font-size:11px">SharePoint Foundation 2010 has changed the way themes work, making them easier to customize. You can import Microsoft PowerPoint 2010 themes directly into SharePoint Foundation 2010</span></span>​</p></div>	Use the bolded code line <xsl:value-of select="@Description" disable-output-escaping="yes"/>
21	Need to display date created or modified of a document or list in CQWP.	Attach the following bolded lines to the itemstyle.xsl at the top <xsl:stylesheet version="1.0" exclude-result-prefixes="x d xsl msxsl cmswrt" xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" xmlns:ddwrt= "http://schemas.microsoft.com/ WebParts/v2/DataView/runtime" xmlns:cmswrt= "http://schemas.microsoft.com/ WebParts/v3/Publishing/runtime" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt"> Add the following code to display date created <xsl:value-of select="ddwrt:FormatDate(@Modified, 1033, 1)" /> You may use @Created instead of @modified to display the date the item was created.
22	To show the web part title typed under the appearance section of the CQWP in edit web part mode using itemstyle.xsl	Use <xsl:value-of select="$FeedTitle"></xsl:value-of>