Branding a SharePoint Site Using Alternate CSSaz12722.vo.msecnd.net › ... › labs › lab-8-11-0...

Hands-On LabBranding a SharePoint Site Using Alternate CSSLab version: 1.0

Last updated: 5/20/2023

CONTENTS

OVERVIEW................................................................................................................................................. 3System Requirements..............................................................................................................................3

SETUP........................................................................................................................................................ 3Task 1 – Ensure SharePoint Server Publishing Feature is Enabled in On-Premise Site.........................4

Task 2 – Ensure SharePoint Server Publishing Feature is Enabled in SharePoint Online Site...............4

Task 3 – Prepare Code Snippets...........................................................................................................4

Task 4 – Create Visual Studio Toolbox Snippets...................................................................................5

EXERCISE 1: USING INTERNET EXPLORER DEVELOPER TOOLS TO IDENTIFY SHAREPOINT STYLES...................................................................................................................................................... 5

Task 1 – Identify Top Banner Style Using IE Developer Tools..............................................................5

Task 2 – Identify and Change Left Navigation Style Using IE Developer Tools.....................................8

EXERCISE 2: CREATING ALTERNATE STYLES TO BRAND SHAREPOINT 2010................................9Task 1 – Create a Style Sheet for Branding..........................................................................................9

Task 2 – Add a Feature Receiver to Enable Alternate CSS.................................................................11

Task 3 – Build and Deploy the Project...............................................................................................13

Task 4 – Add Theming Support..........................................................................................................13

EXERCISE 3: TEST THE BRANDING SOLUTION ON A SHAREPOINT ONLINE SITE.........................16Task 1 – Deploy the Solution Package to SharePoint Online..............................................................16

Task 2 – Revert the Style of the SharePoint Online Site.....................................................................17

SUMMARY................................................................................................................................................ 17

Overview

Lab Time: 30 minutes

Lab Folder: C:\%Office365TrainingKit%\Labs\8.1

Lab Overview: Customizing an intranet site with your company’s identity and branding can help create a more effective collaboration experience for your users. SharePoint 2010 relies heavily on Cascading Style Sheets (CSS) to apply a default style to a site. Theses style rules in CSS select elements of a page and set their fonts, colors, size and positioning. When multiple rules apply to the same element, CSS applies the styles based on the order and specificity of the rules defined. SharePoint takes advantage of this cascading aspect of CSS, allowing designers and developers to specify an alternate style sheet to override the out of the box look and feel and apply their own branding to a site.

In this lab, you will first learn how to use the Internet Explorer Developer Tools to identify what styles to modify. You will see how you can use these tools to quickly and easily experiment with changes. You will then learn how to construct and package a custom style sheet and related assets for use in SharePoint. Finally, you will learn how to deploy this alternate set of styles to your SharePoint site to apply your custom branding.

System Requirements

You must have the following items to complete this lab:

Internet Explorer 8 or 9

◦ These versions have the Developer Tools installed.

SharePoint 2010

Visual Studio 2010

SharePoint Online

◦ Note: You will need administrator access to an SPO site collection to perform the steps in this lab.

Setup

Note: Unlike other labs in this toolkit, you will not create a sub-site for this lab. A branding solution will likely be deployed at the site collection level and be inherited by all sites in the site collection. The lab was modeled with this in mind. If, however, you do not wish to apply branding to your top-level site, you can skip the steps that set up an event receiver to apply the alternate style and manually do so via the Site Settings >> Master Page setting page of a sub-site.

Task 1 – Ensure SharePoint Server Publishing Feature is Enabled in On-Premise Site

1. Navigate to your top-level SharePoint site; e.g.: http://intranet.contoso.com.

2. From Site Actions, choose Site Settings.

3. Under the Site Collection Administration section, click Site collection features.

4. Ensure that the SharePoint Server Publishing Infrastructure feature is activated.

a. This feature enables the ability to specify Alternate CSS for the site.


6. Under the Site Actions section, click Manage site features.

7. Ensure that the SharePoint Server Publishing feature is activated.


Task 2 – Ensure SharePoint Server Publishing Feature is Enabled in SharePoint Online Site

1. Navigate to your top-level SharePoint Online site, e.g., https://contoso.sharepoint.com.


3. Under the Site Collection Administration section, click Site collection features.

4. Ensure that the SharePoint Server Publishing Infrastructure feature is activated.



6. Under the Site Actions section, click Manage site features.

7. Ensure that the SharePoint Server Publishing feature is activated.


Task 3 – Prepare Code Snippets

This lab contains code snippets that you will use to complete the solution. You can either copy the snippets from the lab manual itself or install the code snippets so that you can access them directly from Visual Studio 2010.

1. Browse to C:\%Office365TrainingKit%\Assets\Code Snippets\CSharp.

2. Select all the files in this directory and copy them to your clipboard by pressing [Ctrl]+[a] and then [Ctrl]+[c].

3. Browse to ..\Documents\Visual Studio 2010\Code Snippets\Visual C#\My Code Snippets.

4. Press [Ctrl]+[v] to paste the code snippet files into this directory.

5. Browse to C:\%Office365TrainingKit%\Assets\Code Snippets\XML.

https://contoso.sharepoint.com/

http://intranet.contoso.com/

6. Select all the files in this directory and copy them to your clipboard by pressing [Ctrl]+[a] and then [Ctrl]+[c].

7. Browse to ..\Documents\Visual Studio 2010\Code Snippets\XML\My Xml Snippets.

8. Press [Ctrl]+[v] to paste the code snippet files into this directory.

Note: To reduce typing, you can right-click where you want to insert source code, select Insert Snippet, select My Code Snippets and then select the entry matching the current exercise step.

Task 4 – Create Visual Studio Toolbox Snippets

Some code snippets that are used in this lab can’t be formatted as Visual Studio snippets. Instead you will create them as text snippets in the Visual Studio Toolbox.

1. Open Visual Studio 2010.

2. Click View >> Toolbox to open the Toolbox.

3. Add a tab called Lab08.

4. Open C:\%Office365TrainingKit%\Assets\Code Snippets\Demo8_1_1.txt and select all its contents.

5. Drag the contents into the Lab08 tab.

6. Rename the item to 8.1.1.

7. Open C:\%Office365TrainingKit%\Assets\Code Snippets\Demo8_1_3.txt and select all its contents.

8. Drag the contents into the Lab08 tab.

9. Rename the item to 8.1.3.

Exercise 1: Using Internet Explorer Developer Tools to Identify SharePoint Styles

Task 1 – Identify Top Banner Style Using IE Developer Tools

In this task, you will use the Internet Explorer Developer Tools to view the source of a web page in your SharePoint site and identify the appropriate CSS style to override to set a new banner background image.

1. Launch Internet Explorer.

2. Navigate to your top-level SharePoint site, e.g., http://intranet.contoso.com.

3. Press F12 to open the Developer Tools window.

Note: The IE Developer Tools allow you to inspect and debug web pages. This includes viewing and editing the HTML and CSS source, profiling and debugging JavaScript and more. For full details on the IE Developer Tools see the MSDN article Discovering Internet Explorer Developer Tools.

4. If the Developer Tools open in a separate window, click the Pin button in the top right corner of the window to pin the tools to the bottom of the Internet Explorer window.

5. See that the source for the page has been loaded in the HTML tab of the Developer Tools window. Expand the nodes of the document tree to see the page structure.

6. Click on the CSS tab and open the dropdown. This shows you the different style sheets that have been loaded for the page including the main SharePoint style sheet, corev4.css. Selecting a style sheet in the dropdown will show the styles defined.

http://msdn.microsoft.com/en-us/library/dd565628(VS.85).aspx

http://msdn.microsoft.com/en-us/library/dd565628(VS.85).aspx


7. The Developer Tools allow you quickly find the page source that corresponds to the area you to click in the browser. The element hovered over by the mouse will be outlined in blue as you move the mouse and clicking will select the element and its source. To do this in the Developer Tools window, click Find >> Select Element by Click.

8. To identify the area that makes up the banner, in Internet Explorer, position your mouse to the left of the site logo and click when the blue box outlines the header banner area.

9. Note that the div element with the class s4-title in the HTML tab of the Developer Tools window is now selected. This div makes up the banner area that we want to restyle.

10. Note that in the Style window you can see that the background url image is set to /_layouts/images/bgximg.png and that this style was defined in corev4.css. In the next exercise, you will override this style to set a new background image.

Task 2 – Identify and Change Left Navigation Style Using IE Developer Tools

In this task, you will find the appropriate style to override to set a new background color for the left navigation and change the color using the IE Developer Tools.

1. In the Developer Tools window, enter “s4-leftpanel-content” into the Search HTML box and click the Search button.

2. The div element with the id s4-leftpanel-content will be selected in the HTML Tab of the Developer Tools window and the left navigation will be outlined in blue.

3. See that the background-color is set to #fcfcfc in the Style window. The div is styled using the selector BODY #s4-leftpanel-content in corev4.css. You will override this style in the next exercise.

4. To experiment with modifying this style, click the value to right of the background-color in the Style window, change the value to #e8e8e8 and press Enter. This will change the background to be the gray we ultimately want.

Note: This type of experimentation with styles will be helpful in determining what changes are needed. It will also improve productivity by quickly making changes without having to redeploy to see the results.

Exercise 2: Creating Alternate Styles to Brand SharePoint 2010

Task 1 – Create a Style Sheet for Branding

In this task, you will create a style sheet to customize the look of your SharePoint 2010 site collection.

1. Launch Visual Studio 2010 and open the lab project by clicking File >> Open >> Project/Solution...

2. Browse to C:\%Office365TrainingKit%\Labs\8.1\Source\Before\BrandingWithAlternateCSS.sln and open the solution.

3. In the Solution Explorer, click on the BrandingWithAlternateCSS project and press F4 to view the Properties window.

4. Set the Site URL property to match your top-level SharePoint site, e.g., http://intranet.contoso.com.

5. In the Solution Explorer, click on the BrandingWithAlternateCSS project to expand the project and expand the Style Library Module.

Note: The en-us folder is used for localized English resources in the United States. If your target site was created with a different language, or if you were supporting multiple languages, then you would change the folder structure to include the proper language folders.

6. Right-click on the Style Library\en-us\ContosoAlternateStyle folder and choose Add >> New Item…

7. In the Installed Templates section, select Visual C# >> Web and choose Style Sheet.

8. In the Name: textbox, enter contosoAlternateStyle.css and click Add. Visual Studio will add the file to the project and update the Elements.xml file to include it in the package.

9. In the Elements.xml file for the module, add the Type="GhostableInLibrary" attribute to the contosoAlternateStyle.css File node in the same way it is added for the other File nodes. This indicates the file should be treated as uncustomized. The code should now look like this:

XML

<?xml version="1.0" encoding="utf-8"?><Elements xmlns="http://schemas.microsoft.com/sharepoint/">

<Module Name="Style Library" Url="Style Library"><File Path="Style Library\en-us\Themable\

ContosoAlternateStyle\contosoLogo.png" Url="en-us/Themable/ContosoAlternateStyle/contosoLogo.png" Type="GhostableInLibrary" />

<File Path="Style Library\en-us\Themable\ContosoAlternateStyle\contosoAlternateStyle.css" Url="en-us/Themable/ContosoAlternateStyle/contosoAlternateStyle.css" Type="GhostableInLibrary" />

<File Path="Style Library\en-us\Themable\ContosoAlternateStyle\headerGradient.png" Url="en-us/Themable/ContosoAlternateStyle/headerGradient.png" Type="GhostableInLibrary" /></Module></Elements>

10. Save and close the Elements.xml file.

11. Open the contosoAlternateStyle.css file and replace the contents with the following CSS to define the styles for the top banner and left navigation. These styles will be used to override the default SharePoint styles that were identified in the previous Exercise.


(Toolbox code snippet 8.1.1)

CSS

/* Place the header logo behind Ribbon */.s4-title { background: url(headerGradient.png) repeat scroll 0 0;}

/* Set the background color for the left navigation area */BODY #s4-leftpanel-content { background-color:#e8e8e8;}

12. Save and close the contosoAlternateStyle.css file.

Task 2 – Add a Feature Receiver to Enable Alternate CSS

In this task, you will create a Feature Receiver that will apply the alternate style sheet created in the previous Task and a site logo to your site collection.

1. Right-click Feature1 and choose Add Event Receiver.

2. Open Feature1.EventReceiver.cs and add the following code to the existing using statements. This is required to use the SPUtility class.

(Code snippet 8.1.2)

C#

using Microsoft.SharePoint.Utilities;

3. Add the following code to the beginning of the Feature1EventReceiver class to create a helper method to return the path to the style library.


C#

// Set constant for folder so only have to maintain in one placepublic const string CONTOSO_ALT_STYLE_FOLDER = @"Style Library/en-us/ContosoAlternateStyle";

/// <summary>/// Helper method to create a url to a style asset/// </summary>/// <param name="web"></param>/// <param name="styleAsset"></param>/// <returns></returns>private string CreateAlternateStyleUrl(SPWeb web, string styleAsset){ string path = SPUtility.ConcatUrls(CONTOSO_ALT_STYLE_FOLDER, styleAsset); return SPUtility.ConcatUrls(web.ServerRelativeUrl, path);

}

4. Replace the commented out FeatureActivated method with the code below to open the root web, check in all the included style assets and update the SPWeb object to save the changes.


C#

/// <summary>/// Custom code that runs after the feature is activated/// </summary>/// <param name="properties"></param>public override void FeatureActivated(SPFeatureReceiverProperties properties){ using (SPSite site = (SPSite)properties.Feature.Parent) { using (SPWeb web = site.RootWeb) { // Check in all files so that they will be applied properly SPFolder altStyleFolder = web.GetFolder(CONTOSO_ALT_STYLE_FOLDER); foreach (SPFile styleFile in altStyleFolder.Files) { if (styleFile.CheckOutType != SPFile.SPCheckOutType.None) { styleFile.CheckIn("Checked in via feature activation.", SPCheckinType.MajorCheckIn); } } // Set alternate CSS and site logo web.AlternateCssUrl = CreateAlternateStyleUrl(web, "contosoAlternateStyle.css"); web.SiteLogoUrl = CreateAlternateStyleUrl(web, "contosoLogo.png"); web.Update(); } }}

5. Replace the commented out FeatureDeactivating method with the code below to undo the modifications made when the feature was activated by clearing out the alternate css and site logo before returning to the original branding.


C#

/// <summary>/// Custom code that runs before the feature is deactivated/// </summary>/// <param name="properties"></param>public override void FeatureDeactivating(SPFeatureReceiverProperties properties){ using (SPSite site = (SPSite)properties.Feature.Parent) { using (SPWeb web = site.RootWeb) { // Reset the alternate CSS and site logo web.AlternateCssUrl = string.Empty; web.SiteLogoUrl = string.Empty; web.Update(); } }}

6. Save and close the Feature1.EventReceiver.cs file.

Note: Feature Receivers can be extremely beneficial, but just like any other code they may require debugging from time to time which involves a slightly different process than debugging other SharePoint code. For information on debugging Event Receivers see this MSDN article.

Task 3 – Build and Deploy the Project

In this task, you will test your branding solution against your on-premise site.

1. Press F5 to deploy the package to your local SharePoint 2010 instance and debug the project.

a. Visual Studio 2010 will compile and deploy the project, activate the feature and open the specified SharePoint site in a browser window.

b. Your site should now have a Contoso logo, a blue gradient header background image, and the left navigation will have a gray background.

2. In Visual Studio 2010, stop debugging.

a. Your site should return to its previous style.

Task 4 – Add Theming Support

In this task, you will modify your styles to support Theming. Theming in SharePoint 2010 allows sites to be easily customized with a set of colors and fonts. Custom CSS styles can take advantage of these themes fonts and colors or even manipulate images to fit in better with the selected theme of a site.

1. In Solution Explorer, right-click on the en-us folder and select Add >> New Folder.

2. Name the folder “Themable.”

http://msdn.microsoft.com/en-us/library/ff798479.aspx

3. Move the ContosoAlternateStyle folder into the Themable folder by dragging it in the Solution Explorer.

a. Your folder structure should now look like this:

4. Open the contosoAlternateStyle.css file.

5. Replace the contents of the file with the following code. This will add Theme comments to the existing styles that will tint the background image and change the left navigation color based on the theme applied.

Note: The use of theme comments is not a CSS standard, but instead is a convention used by the SharePoint 2010 theme engine to designate what elements will be affected by changes in the theme.

(Toolbox code snippet 8.1.3)

CSS

/* Place the header logo behind Ribbon */.s4-title {/* [RecolorImage(themeColor:"Accent1",method:"Tinting")] */ background: url(headerGradient.png) repeat scroll 0 0;}

/* Set the background color for the left navigation area */BODY #s4-leftpanel-content {/* [ReplaceColor(themeColor:"Accent1")] */ background-color:#e8e8e8;}

6. Open Feature1.EventReceiver.cs and replace the constant that sets the path the alternate style with the following code which will now use the updated files in the Themable folder.


C#

public const string CONTOSO_ALT_STYLE_FOLDER = @"Style Library/en-us/Themable/ContosoAlternateStyle";

7. Press F5 to deploy the package to your local SharePoint 2010 instance and debug the project.

a. Visual Studio 2010 will compile and deploy the project, activate the feature and open the specified SharePoint site in a browser window.

b. Your site should now have a Contoso logo, a blue gradient header background image, and the left navigation will have a gray background.


9. Under the Look and Feel section, click Site theme.

10. From the list of Themes, select Grapello.

a. Note that Accent Color 1 is now purple.

11. Scroll to the bottom of the page and click Apply.

a. Your site should now have a Contoso logo, but the gradient header background image is now tinted purple, and the left navigation will be purple.

Note: If you view the source of the page using the IE Developer Tools, the link to your style sheet will now reference a generated “themed” url like "/_catalogs/theme/Themed/846EAEF7/contosoAlternateStyle-5FF9C8BD.css?ctag=51"



14. From the list of Themes, select Default (no theme).


16. In Visual Studio 2010, stop debugging.

a. Your site should return to its previous style.

Exercise 3: Test the Branding Solution on a SharePoint Online Site

Task 1 – Deploy the Solution Package to SharePoint Online

In this task, you will deploy the solution package to SharePoint online to confirm that it works as expected.

1. In the Solution Explorer, right-click on the BrandingWithAlternateCSS project and select Package to package the project.

2. Open Internet Explorer and navigate to your SharePoint Online site.

3. Click Site Actions and then select Site Settings.

4. Click the Solutions link in the Galleries section to view the site collection’s solution gallery.

5. Click on the Solutions tab in the ribbon and click the Upload Solution button.

6. Browse to the solution package at C:\%Office365TrainingKit%\Labs\8.1\Source\Before\BrandingWithAlternateCSS\bin\Debug\BrandingWithAlternateCSS.wsp and click Open.

7. Click the Activate button.



10. From the list of Themes, select Grapello.


a. Your site should now have a Contoso logo, a gradient header background image tinted purple, and the left navigation with a purple background.

Task 2 – Revert the Style of the SharePoint Online Site

In this task, you will deactivate your solution to revert they style of your site to its previous style.



3. From the list of Themes, select Default (no theme).


5. Click Site Actions and then select Site Settings.

6. Click the Solutions link in the Galleries section to view the site collection’s solution gallery.

7. Check the BrandingWithAlternateCSS solution and click Deactivate.

8. Click Deactivate on the dialog.

9. Your site should return to its previous style.

10. Close Internet Explorer.

Summary

SharePoint Online allows you to customize the branding using alternate style sheets. In this lab you learned how to use the Internet Explorer Developer Tools identify the styles to override and test changes on the fly. You learned how to create a custom style sheet to override SharePoint default styles and also how to make those styles work with the new SharePoint 2010 theme engine. You also learned how to use Visual Studio 2010 to build a solution to package and deploy your style assets to your SharePoint site and apply your custom branding.

Date post:	26-Jun-2020
Category:	Documents
Upload:	others
View:	1 times
Download:	0 times