Styling the Portal

Styling the Datatel Portal (SharePoint 2010)

Portal 3.0ILP 1.5

February 15, 2011

Datatel Portal

For corrections and clarifications to this manual, see AnswerNet page 8357.


© 2011 Datatel, Inc. All Rights Reserved

The information in this document is confidential and proprietary to and considered a trade secret of Datatel, Inc., and shall not be reproduced in whole or in part without the written authorization of Datatel, Inc. The information in this document is subject to change without notice.

ActiveAdmissions, ActiveAlumni, ActiveAthletics, Colleague, Datatel, Datatel Recruiter, ExpressWay, Intelligent Learning Platform, Strategic Academic Enterprise, SuccessOrchestrator, DataOrchestrator, Retention Alert, Successpartners, The Datatel Center for Institutional Effectiveness, MOX, and WebAdvisor are trademarks or registered trademarks of Datatel, Inc. Other brand and product names are trademarks or registered trademarks of their respective holders.

Datatel, Inc.4375 Fair Lakes CourtFairfax, VA 22033(703) 968-9000(800) DATATEL

Table of Contents

7 Introduction

9 About This Manual9 Who Should Read This Manual9 What This Manual Covers

10 How This Manual Is Organized11 Typographical Conventions12 Important Notices12 Alerts12 Notes12 Technical Tips

13 Overview to Styling13 In This Chapter14 Before You Begin15 High-Level Procedures15 Steps for Styling the Datatel Portal16 SharePoint 2010 Custom Styling Components17 Styling Components18 Timing Your Styling Customizations

19 Styling Procedures

21 Creating Custom Themes21 In This Chapter22 Understanding Themes22 Applying a Theme22 Modifying Color Swatches23 Modifying Text and Background Colors24 Modifying Datatel Theme Colors26 Procedures for Customizing Themes26 Identifying Colors for a Custom Theme30 Creating Custom Themes31 Deploying a Custom Theme as a Feature33 Applying Your Custom Theme

Styling the Datatel Portal (SharePoint 2010), February 15, 2011 3© 2011 Datatel, Inc.

Table of Contents

35 Creating Custom Stylesheets35 In This Chapter36 Understanding Cascading Stylesheets38 Creating a Custom Stylesheet38 Procedure for Creating a Custom Stylesheet41 Stylesheet Customization Examples41 Example 1: Stylesheet - Changing the Logo Image42 Example 2: Changing the Header Background Design

Image43 Example 3: Changing the Footer Image44 Example 4: Changing the Side Bar Images45 Example 5: Stylesheet - Custom Styling for the Navigation

Menu

47 Creating Master Pages and Page Layouts47 In This Chapter48 Understanding Master Pages and Page Layouts48 Master Pages49 Layout Pages51 Creating a Custom Master or Constituency Site Layout Page54 Master Page and Page Layout Examples54 Example 1: Master Pages – Adding a Link to the Header56 Example 2: Layout Pages – Adding a New Web Part Zone

57 Creating Custom Templates57 In This Chapter58 Understanding Templates58 SharePoint Site Templates59 Datatel-Provided Templates59 Custom Templates60 Template Naming Conventions60 Template Selection for Constituency Sites61 Template Selection for Class Team Sites61 Template Selection for Social Team Sites61 Template Selection for Department Team Sites62 Procedure for Creating a Custom Template64 Template Customization Examples64 Example 1: Adding or Removing a Web Part65 Example 2: Modifying Web Part Properties66 Example 3: Adding a Custom Feature67 Example 4: Adding a Document Library

4 Styling the Datatel Portal (SharePoint 2010), February 15, 2011© 2011 Datatel, Inc.

Table of Contents

69 Styling My Sites69 In This Chapter70 Understanding My Sites71 Disabling the Datatel Theme on My Sites72 Creating My Sites with a Custom Theme73 Determining the My Sites Host URL74 Applying a Custom Theme to the My Sites Host75 Specifying a Custom Theme for New My Sites78 Applying a Theme to Existing My Sites

81 Appendices

83 Custom Color Planning Worksheet83 In This Appendix84 Planning Worksheet

85 FAQs and Tips & Tricks85 In This Appendix86 Frequently Asked Questions (FAQs)88 Tips and Tricks88 Basic Testing Concepts89 Using a Test Server to Test Changes90 Moving Changes and Files Between Servers91 Styling Your Datatel Portal Efficiently


Table of Contents



Introduction

Introduction

About This Manual

Who Should Read This ManualAnyone responsible for styling their installation of the Datatel Portal should read this manual. Typically, the procedures in this manual would be performed by system administrators.

A representative list of administrator roles include:

Colleague administrator. Manages Colleague and Envision updates.

Network administrator. Manages Active Directory and maintains the computer network. This includes deployment, configuration, and monitoring of active network equipment.

Webmaster. Manages websites; especially the public website.

SharePoint administrator. Manages Datatel Portal.

What This Manual CoversThis manual contains information and procedures for styling your client installation of the Datatel Portal. For a high-level overview of styling features, see the “Overview to Styling” beginning on page 13.


Introduction: About This Manual

How This Manual Is Organized“About This Manual,” which you are reading now, provides information about this manual and its organization.

“Overview to Styling” provides information about the steps to take when styling your Datatel Portal installation and a high-level overview of styling the Datatel Portal.

“Creating Custom Themes,” “Creating Custom Stylesheets,” “Creating Master Pages and Page Layouts, “Creating Custom Templates,” and “Styling My Sites,” contain a series of procedures that you can use to customize your Datatel Portal site.

“Custom Color Planning Worksheet” contains a worksheet that you can use to record your desired color conversions.

“FAQs and Tips & Tricks” contains frequently asked questions and proposed solutions to those questions in addition to some tips on how to style your portal more easily and efficiently.


Typographical Conventions

Typographical Conventions The following presentation conventions are used in this book to help you identify important information quickly and easily.

Table 1 illustrates the typographical styles used in this book, and explains their significance.

Table 1: Typographical Conventions Used in This Manual

Style Type of Information Examples

bold Items that you can select, such as menu items, buttons, or other options that appear on the screen.

On the File menu, point to New, and then click Folder.

Select 100% from the drop-down list box for the Zoom field.

Click Cancel to return to the previous form.

bold Courier

Text that you must type exactly as shown. Type the following at the operating system prompt:

cd /deptdir/mydir

Specific entries that you make in a field, typically by typing one or more of the letters in the entry.

In the Update Mode field, enter Yes.

(Note that to enter “Yes” in a field, you normally need to type just the letter Y.)

italic Text that can vary, depending on the specific item or record involved. Note that the text might also be italic courier if it is part of a message displayed on your screen, or italic bold courier if it is something that you must type, substituting your own value for the italicized word or words.

Type dictname_SQL, where dictname is the name of the dictionary.

If the system displays the message PersonID Not Found, proceed to Step 4 to create a new Person record.


Introduction: About This Manual

Important Notices

Particularly important information is emphasized in the following types of notices.

Alerts

Alerts call attention to critical information for users. For example, Alerts are used to warn you of situations where data loss or corruption could occur if certain actions are performed incorrectly. An example is shown below.

Notes

Notes provide special additional information that you might want to know, or that might help you perform a task. An example is shown below.

Technical Tips

Technical tips provide details that might help system administrators or power users. Examples include explanations of behind-the-scenes processing, lists of file names, and names of validation code tables. An example is shown below.

ALERT! Be extremely cautious not to delete the VOC; this will cause serious damage to your data.

Note: Colleague uses the Account Type information to determine the default path prompts.

Technical Tip: The stylesheet print server will create a temporary file in the printdata directory (within the stylesheet print server directory) to hold a print job. This file will then be parsed into 2MB files in order to be sent to the printer. Be aware that the initial file may become very large, depending on the size of the print job. Make sure you have ample available drive space when using stylesheet printing.


Introduction

Overview to Styling

In This ChapterThe Datatel Portal 3.0 delivery includes a user interface (UI) that utilizes select Microsoft® SharePoint 2010 user interface features. This document assists you as you apply your own institution’s branding to the Datatel-delivered look and feel of the Datatel Portal. It includes best practices and tips to assure that your custom branding components will interact well with both Datatel and Microsoft branding.

Table 2 lists the topics covered in this chapter.

Table 2: Topics in This Chapter

Topic Page

Before You Begin 14

High-Level Procedures 15

Styling Components 17

Timing Your Styling Customizations 18


Introduction: Overview to Styling

Before You BeginThe following prerequisites are recommended for the successful ability to tailor SharePoint sites. Table 3 lists tasks to complete before you continue with the procedures in this document.

Table 3: Before You Begin

Task Reference

Familiarize yourself with the SharePoint interface such as adding web parts to pages and creating sites.

Obtain a working knowledge of CSS, HTML, and XML.

Obtain an understanding of the basic concepts of customizing a SharePoint portal site and WSS sites. (optional)

You can access an overview at:

http://msdn.microsoft.com/en-us/library/dd776256(v=office.12).aspx

Upgrade from SharePoint 2007, if applicable.

Upgrading the Datatel Portal to SharePoint 2010


http://clients.datatel.com/support/documentation/acportal.cfm

High-Level Procedures

High-Level ProceduresThis section contains a high level outline of the steps you can take to style your installation of the Datatel Portal.

Steps for Styling the Datatel Portal

Table 4: Steps for Styling the Datatel Portal

Step Procedure Results

1. “Overview to Styling” page 13 Ready to continue styling the Datatel Portal.

2. “Creating Custom Themes” page 21 You have created custom theme files for branding.

3. “Creating Custom Stylesheets” page 35 You have created custom stylesheet files for branding.

4. “Creating Master Pages and Page Layouts”

page 47 You have created custom master page and page layout files for branding.

5. “Styling My Sites” page 69 You have a custom theme you want to apply to My Sites.

6. “Creating Custom Templates” page 57 You have created custom site templates in SharePoint 2010.



SharePoint 2010 Custom Styling Components

If you want to brand your SharePoint 2010 portal using custom styling components, you can refer to the custom components in Table 5 on page 16.

If you are upgrading from SharePoint 2007, you can apply these components after the visual upgrade. For detailed procedures, see the Upgrading the Datatel Portal to SharePoint 2010 manual, available from the Documentation area of the Datatel client website.

Note: Creating a new portal site (or upgrading your portal to SharePoint 2010) results in the inclusion of the files listed in Table 5 on your SharePoint server.

Table 5: Portal Styling Components - Paths and Files

Component Path and Name Description Custom Equivalent

Theme FEATURES\Datatel Themes\DatatelTheme

Datatel.thmx

Datatel theme file.

FEATURES\D01 Themes\D01Theme

D01Custom.thmx

Stylesheet LAYOUTS\1033\STYLES\ Themable\DATATEL

Datatell2010PortalMain.css

Datatel main stylesheet file.

LAYOUTS\1033\STYLES\Themable\ DATATEL

Datatel2010PortalMainCustom.css

Master page FEATURES\DatatelMasterAndLayouts\MasterPages

datatelv4.master

SharePoint master page file used for migrated or new sites.

FEATURES\D01MasterAndLayouts\ MasterPages

D01v4.master

Layout pages FEATURES\DatatelMasterAndLayouts\Layouts

MainConstituencyLayout.aspx, etc.

SharePoint layout page file

FEATURES\D01MasterAndLayouts\ Layouts

D01ConstituencyLayout.aspx

Templates Site Templates

DATATEL_CONST, etc.(folders)

Templates used in creating constituency sites and team sites.

Site Templates

CUSTOM_CONST, etc.(folders)




Styling Components

Styling ComponentsThe following are summaries of each of the styling components that you can use to customize your SharePoint 2010 portal.

Theme. You can use a theme to customize the visual appearance of SharePoint. When a theme is applied, SharePoint auto-generates the stylesheet (CSS) file and images for the theme on-the-fly, and stores them in the _themes folder of the site where the theme is applied. For more information, see “Understanding Themes” on page 22.

Stylesheet. A custom stylesheet (CSS) file allows your institution to change colors and fonts, backgrounds, images, and layout properties such as margins and borders. For more information, see “Creating a Custom Stylesheet” on page 38.

Master page. A master page defines the elements that are common to all pages in a SharePoint top-level site and its subsites. This includes items such as the top banner, tool bars, navigation bars, a school logo, the footer, and a search box. When you define all of these elements in one master page file, they can be referenced by all of the other pages in the portal. This makes it easier to change the general look and feel of a site. When you change one file, then all of the pages and sites using the master page are automatically updated. See “Creating Master Pages and Page Layouts” on page 47.

Layout page. In combination with master pages, a layout page defines the layout of elements on a page (except for anything that is defined directly in the master page). This includes web part zones and their locations, and code or elements that belong in pages using a specific layout only. For example, a tool bar that is not part of the main master page might be needed for other pages in the portal. A layout page does not include specific web parts. Those are defined in the template files. See “Creating Master Pages and Page Layouts” on page 47.

Site template. A custom site template allows you to define the properties of new sites created using the template. You can create custom site templates to define web parts or other components for all newly created sites. For example, you might decide that all constituency templates should contain the Contacts web part.

My Site. This is a personal space where users can save documents and share work with others. A Datatel-delivered theme is enabled and applied to all My Sites that you create after installing the Datatel Portal software. See “Disabling the Datatel Theme on My Sites” on page 71 if you want to disable the Datatel My Site theme styling.



Otherwise, you can provide users with a customized My Site theme page that uses colors from the main Client portal. See “Creating My Sites with a Custom Theme” on page 72 for more information.

Timing Your Styling CustomizationsWhen you plan your customizations, there are styling tasks that you can perform at any time – either before you create a site or after it is live. Other tasks should be performed during the planning phase and as you create a site.

Custom templates. Because templates are used for site creation only, they are like blueprints for a site. Customize these during the design and construction of a site but not after it is up and running. After you create a site from a template, changes made to the template are not reflected in any existing sites.

CSS files. You can customize stylesheet (CSS) files anytime. When you apply your CSS modifications to a site, the changes take effect immediately. If a site already references a CSS file and you update the file, those changes take effect immediately.

Custom master pages and page layouts. You can modify custom master pages and page layouts at any time; before you create a site or after it is live. You can apply a new master page to a site at any time and the new master page content will show up in existing sites immediately. If a site is using a master page and you update the code in the master page, then the changes will be seen immediately in a site using the master page.

Technical Tip: After you create a site, you should use the SharePoint interface to make any necessary changes to properties that are defined in the template.



Styling Procedures

Styling Procedures

Creating Custom Themes

In This ChapterThis chapter contains a series of procedures that you will need to perform as you style and customize your Datatel Portal site.



Topic Page

Understanding Themes 22

Procedures for Customizing Themes 26


Styling Procedures: Creating Custom Themes

Understanding ThemesSharePoint 2010 gives you the ability to make styles into a theme.1 This means that you can replace Datatel-delivered stylesheet colors for fonts and solid backgrounds, and even recolor images with a tint.

A specific Datatel theme is delivered as a feature of the Datatel Portal. This theme is provided to give you a head start in creating your own custom theme. For example, the colors included in the Datatel theme align with the colors contained in the Datatel-delivered stylesheets. You can map which colors apply to the interface and where.

Applying a Theme

You can modify SharePoint 2010 color swatches while creating a custom theme. You can also choose to modify the colors contained in the Datatel-delivered theme.

Modifying Color Swatches

SharePoint 2010 provides ten color swatches that you can modify if you want to change a theme. These ten colors contain five shade variations (Darkest, Darker, Medium, Lighter, and Lightest) that are determined when the new theme is applied. See Figure 1 on page 23.

Text and Background (4). Colors named Dark 1, Light 1, Dark 2, Light 2

Accents (6). Colors named Accent 1 through Accent 6

Hyperlinks (2). Colors named Hyperlink and Followed Hyperlink

1. The default SharePoint CSS files are tagged with comments that tell SharePoint to substitute colors and images with the values from the theme. If you switch themes, SharePoint generates a new set of CSS files and images with the result of this substitution.

Note: See “Understanding Cascading Stylesheets” on page 36 for an overview of Datatel-delivered stylesheets. You can use the steps in “Creating a Custom Stylesheet” on page 38 if you would rather just customize the stylesheets.


Understanding Themes

Figure 1: Datatel Theme Color Selections

Modifying Text and Background Colors

Text and background colors have the following visibility rules:

Light Background. The Dark 1 and Dark 2 colors, when used for text, are always easily legible over the Light 1 and Light 2 background colors.

Dark Background. The Light 1 and Light 2 colors, when used for text, are always easily legible over the Dark 1 and Dark 2 background colors.

Accent Colors are visible over all possible background colors (Dark 1, Dark 2, Light 1, and Light 2). See Figure 2 on page 23.

Figure 2: Datatel Background Color Selections

Note: Datatel recommends that you keep Dark 1 as black and Light 1 as white when creating a custom theme.



Modifying Datatel Theme Colors

You can modify the colors contained in the Datatel theme. Make sure to name and save your theme.

Table 7: Datatel Theme Colors

Color RGB Values Where Used

Light 1 R 255, G 255, B 255 Body background Site Actions link text Welcome/login text color Web part backgrounds Web part titles Left panel background color

Light 2 R 244, G 243, B 235 Web part borders Background color for My Week and Picture of the week web parts

Dark 1 R 51, G 51, B 51 Top navigation text color Web part Text color Bread crumb text color WebAdvisor border color My Week calendar text Web part “Add New” and “Upload” Links Row borders

Dark 2 R 22, G 96, B 118 Selected navigation text and border My Week calendar header background text and borders WebAdvisor text “Add new” and “Update” link hover text Row titles Background behind Site Actions and Browse navigation Course catalog search results titles

Accent 1 R 188, G231, B 240 Header/Footer background color Portal Help icon My Week calendar day header background Course catalog tips box for Course and Sections Homepage Course Catalog Search page borders Course Catalog section info header Admin page menu bar background

Accent 2 R 77, G 77, B 77 Not used by Datatel

Accent 3 R 141, G 213, B 236 Web part title bars My Week calendar selected day, weekend day, and past or future month days background To-do list To-do info background color Course Catalog “Add to preferred list” button Course Catalog web part borders


Understanding Themes

Accent 4 R 220, G 220, B 220 Constituency navigation link borders My Bookmark separators WebAdvisor line breaks Horizontal rule line below bread crumbs Course Catalog alternating row browse results

Accent 5 R 255, G 174, B 120 Calendar day selection My Learning Provider Classes web part background My Notifications header background Side bar border color Add to list warning icon Add to list hover background Calendar today background color

Accent 6 R 181, G 174, B 120 Sidebar background WebAdvisor menu background My Week calendar event day row background Web part row background color

Hyperlink R 77, G 77, B 77 Picture Rotator title color Most hyperlinks throughout the site

Followed Hyperlink

R 0, G 0, B 0 Course Catalog “Enrolled” button “Add to preferred list” background color

Table 7: Datatel Theme Colors (cont’d)

Color RGB Values Where Used



Procedures for Customizing ThemesUse the following sets of procedures as you customize themes.

Table 8 lists the topics covered in this section.

Identifying Colors for a Custom Theme

Before creating a custom theme, you may want to identify which colors to use.

Perform the following procedure to identify colors for a custom theme.

Step 1. In a browser, access the top-level site of the main portal site collection as an administrator.

Step 2. At the left end of the SharePoint ribbon, click Site Actions and then Site Settings.

Step 3. Click Site theme in the Look and Feel category.

Note: You may want to create a series of custom themes as you test out your color choices and styles. You can follow the steps in “Creating Custom Themes” on page 30. After you decide on a custom theme that you would like to implement as a SharePoint feature, then you can follow the steps in “Deploying a Custom Theme as a Feature” on page 31.

Table 8: Topics in This Section

Topic Page

Identifying Colors for a Custom Theme 26

Creating Custom Themes 30

Deploying a Custom Theme as a Feature 31

Applying Your Custom Theme 33


Procedures for Customizing Themes

Step 4. To apply a theme, select the “Specify a theme to be used by this site and all sites that inherit from it” option in the Inherit Theme section.

Step 5. Select the Datatel theme in the Select a Theme subsection as shown in Figure 3 on page 28.

Note: You might prefer to start from any of the Microsoft themes in the list.



Figure 3: Apply the Datatel Theme

Step 6. To help you determine which colors to use for your own theme, Datatel recommends that you make changes to the color swatches provided in the interface and preview them until you are satisfied.



Step 7. To make color changes, click the Select a color link next to the color swatches in the Customize Theme section (Figure 4). Then choose from the colors provided or type in your own colors.

Step 8. To view how colors will be applied, click on Preview in the Preview Theme section to view the newly themed site in a pop-up window.

Figure 4: Color Swatches

Step 9. When you are satisfied with your color choices, make a note of the colors (hexadecimal numbers) using the “Custom Color Planning Worksheet” on

page 83 for the future creation of your own custom theme file.2

ALERT! Make sure you have recorded your changes. Any changes to the theme from this page are named as “Custom” by SharePoint and can be applied to the site. They will not be stored for later use and should not be considered permanent. Instead, you would need to create a custom theme file.

2. You can use a printed copy of the Custom Color Planning Worksheet for each custom theme that you create.



Creating Custom Themes

If you want to use a program to help you easily create themes, you can download a program such as Microsoft® Theme Builder from http://connect.microsoft.com/ThemeBuilder. The procedure below uses the free Microsoft ThemeBuilder application.

Perform the following procedure to create custom themes.

Step 1. From your SharePoint server, access the top-level site of the portal site collection as an administrator.


Step 3. In the Galleries section, click Themes.

Step 4. Click on the Datatel theme. This will download the Datatel.thmx file.

Step 5. Save it as a custom file (for example, D01Test.thmx or D01Custom.thmx) in a folder you create, such as a My Custom Themes folder on the SharePoint Server located under, for example: C:\Program Files\Common Files\

Step 6. Using a program such as Theme Builder, open a custom theme file. For example, D01Custom.thmx.

Note: Click on the color swatches and input your own choice of colors using the conversions from your chosen hexadecimal numbers to RGB values recorded in the “Custom Color Planning Worksheet” on page 83.

Step 7. If you want to deploy the new theme as a feature, continue with the steps in “Deploying a Custom Theme as a Feature”.

Note: If you want to convert hexadecimal numbers to their RGB (Red, Green, Blue) equivalents, you may want to locate a converter program. For example, Firefox® ColorZilla contains a color picker that allows you to choose exact colors from a website. It then provides the information as Hexadecimal numbers, HSV (Hue, Saturation, Value) and RGB.


http://connect.microsoft.com/ThemeBuilder

http://connect.microsoft.com/ThemeBuilder


Deploying a Custom Theme as a Feature

Now that your custom theme is ready, you can deploy it as a feature named, for example, Custom Portal Theme.

Perform the following procedure to deploy your custom theme.

Step 1. Access the FEATURES folder on the SharePoint Server located under C:\Program Files\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\FEATURES

Step 2. Make a copy of the Datatel Themes folder including all files and subfolders.

Step 3. Rename the folder for your new custom theme. For example, D01CustomTheme

Step 4. Rename the DatatelTheme subfolder to D01Theme.

Step 5. Save your desired custom file (for example, D01Custom.thmx) in the D01CustomTheme\D01Theme subfolder that you created in Step 4.

Step 6. Edit the Feature.xml file in the D01CustomTheme folder.

Replace the existing GUID with a newly generated one.

Enter a Title and Description for the feature that will be displayed to identify your custom feature.

Enter your custom THMX file.

Note: You will need a unique ID (GUID) for your feature. You can use Visual Studio to generate a new GUID. Otherwise, you can Google “GUID Generator” for an online generator to use.

<Feature xmlns=“http://schemas.microsoft.com/sharepoint/” Title=“Custom Portal Theme” Description=“Portal theme with custom colors” Id=“Your unique guid here” Scope=“Site”> <ElementManifests> <ElementManifest Location=“D01Theme\Elements.xml” /> <ElementFile Location=“D01Theme\D01Custom.thmx” /> </ElementManifests></Feature>



Step 7. Edit the Elements.xml file in the D01Theme subfolder. Fill in the following information:

Step 8. Install the new feature by running the following stsadm command:

C:\Program Files\Common Files\Microsoft Shared\web server extensions\14\BIN\stsadm.exe -o installfeature -filename Your custom theme folder here\feature.xml

Replace “Your custom theme folder here” with the name of the folder that you created in Step 3 on page 31.



Step 11. Go to Site Settings > Site Collection Administration > Site collection features to activate your new feature (Figure 5 on page 33).

<?xml version=“1.0” encoding=“utf-8”?><Elements xmlns=“http://schemas.microsoft.com/sharepoint/”> <Module Name=“DatatelTheme” Url=“_catalogs/theme” RootWebOnly=“TRUE” > <File Type=“GhostableInLibrary” Path=“D01Theme\D01Custom.thmx” Url=“D01Custom.thmx” /></Module></Elements>



Figure 5: Activating Your Custom Feature

Step 12. Reset IIS by entering the iisreset command at the command line.

Applying Your Custom Theme

Perform the following procedure to apply a custom theme.



Step 3. Click Site Theme in the Look and Feel category.

Step 4. To apply a theme, select the “Specify a theme to be used by this site and all sites that inherit from it” option in the Inherit Theme section.

Step 5. Select your custom theme from the list, and select the “Apply the selected theme to this site and reset all subsites to inherit this setting” option and then click Apply.



Step 6. Test out your new theme.

Note: Because the images are tinted, there may be places where the transitions between gradient images and background colors may not be as smooth as you prefer. You will need to create custom images and stylesheets for those and any branding images you choose to use such as the logo and the footer text.


Styling Procedures

Creating Custom Stylesheets

In This ChapterThis chapter contains a series of procedures that you will need to perform as you style and customize your Datatel Portal site.



Topic Page

Understanding Cascading Stylesheets 36

Creating a Custom Stylesheet 38

Stylesheet Customization Examples 41


Styling Procedures: Creating Custom Stylesheets

Understanding Cascading StylesheetsMicrosoft® delivers various cascading stylesheets (CSS) files with the SharePoint portal. The properties defined for each class in these CSS files determine the look and feel of the SharePoint portal in general and specific sections of the portal. For more information, see “Creating a Custom Stylesheet” beginning on page 38.

Microsoft also allows you to use a global custom CSS file for each SharePoint portal. The properties defined in this CSS file can override specific properties for any given class defined in the default out-of-the-box Microsoft stylesheets. To override a class defined in a standard Microsoft CSS file, you can redefine the class in a custom CSS file and reassign values to any property in the class.

Datatel delivers the following CSS files:

Datatel2010Core.css contains styles for:• Global Page Styles (Header, Body, Footer) • Constituency Pages and Teamsites (Header, Side Bar, Footer) • Admin and Login Pages (Header, Body, Footer)

Datatel2010BaseWebParts.css contains styles for web part properties that are shared by all web parts (title, header and content).

Datatel2010WebParts.css contains styles for specific Datatel web parts where styles are not repeated in other web parts (including MyWeek, To Do List, My Classes, and others).

Datatel2010CourseCatalog.css contains styles specifically for the course catalog.

Datatel2010PortalMain.css is a single file that dynamically aggregates all stylesheet references into a single location.

Note: The Datatel2010PortalMain.css file allows for a single stylesheet to be specified for the site collection and have access to all styles specified in the different Datatel stylesheets. Each site created by a Datatel template will be set to use the Datatel2010PortalMain.css file.


Understanding Cascading Stylesheets

The Datatel2010PortalMain.css file contains the following code:

@import “Datatel2010Core.css”;@import “Datatel2010BaseWebParts.css”;@import “Datatel2010WebParts.css”; @import “Datatel2010CourseCatalog.css”

Note: The order of the files listed above is important for displaying the look and feel properly. In CSS, the last style overwrites all others before it (for example, styles in Datatel2010CourseCatalog.css take precedence over all other styles in the stylesheets above it).



Creating a Custom StylesheetA custom stylesheet allows you to change colors and fonts, backgrounds, images, and layout properties such as margins and borders. Implementing a custom stylesheet is easy and can be done after your sites have already been created.

Procedure for Creating a Custom Stylesheet

To get started creating your own custom stylesheet, you can begin by using the Datatel-delivered stylesheets which you can find in the following location:

C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\1033\STYLES\ Themable\Datatel

Perform the following procedure to create a custom stylesheet.

Step 1. Open the Datatel2010Branding.css stylesheet. This stylesheet includes:

References to images found in the Datatel-delivered stylesheets only. The styles contain comment tags to explain which images they reference. They are organized based on the stylesheet from which they come.

Step 2. Create a blank custom stylesheet with a custom name such as D01Branding.css.

Step 3. Copy and paste image styles from the Datatel2010Branding.css file into your custom stylesheet (D01Branding.css).

Note: Alternatively, you can use themes to customize the visual appearance of SharePoint. When a theme is applied, SharePoint automatically generates the stylesheet file and images for the theme on-the-fly, and stores them in the _themes folder of the site where the theme is applied. See “Understanding Themes” on page 22 for more information.

Note: After you' have created your theme and determined which images need to be replaced, you can use the Datatel2010Branding.css stylesheet to help you identify which images you want to replace. Then you can copy and paste only those styles to a new custom stylesheet.


Creating a Custom Stylesheet

Copy only the image styles for which you intend to replace the image references in your custom stylesheet as shown in Figure 6.

Step 4. Make sure your new images contain custom names.

Examples of two images you are likely to replace

The header logo image

.datatelv4 .site-image-title{ background-image:url(“/_layouts/images/Datatel/DatatelPortal-logo2.png”); }

The footer text image

.datatelv4 .dt-footertext { background-image:url(“/_layouts/images/datatel/footertext.png”); }

Make sure to save your new images to the following location:

C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\IMAGES\Datatel\

Figure 6: D01Branding.css Example

Step 5. Open the Datatel2010PortalMain.css file and save it as Datatel2010PortalMainCustom.css.

Note: If you choose not to use the same folder that Datatel has provided, then make sure the style path includes the new folder reference.

/*** Custom Branding Stylesheet ***/

/* Header Logo Image */.datatelv4 .site-image-title{background-image:url("/_layouts/images/Datatel/D01Portal-logo2.png");}

/* Footer text image */.datatelv4 .dt-footertext {background-image:url("/_layouts/images/datatel/D01footertext.png");}

Note: It is important that you use this exact name (Datatel2010PortalMainCustom.css) for the custom version of your stylesheet.



Step 6. Add a reference at the bottom of the stylesheets listed for your custom branding stylesheet (@import D01Branding.css) as shown in Figure 7.

Figure 7: Adding Custom Branding to Main Stylesheet

Step 7. Save the file.

If you have applied site themes, your changes may not appear immediately because SharePoint caches themed stylesheet files. Go to Central Administration and select Manage web applications under the Application Management category. Select your web application in the list and click on Manage Features. For the Datatel Refresh Themes entry, click to Activate. If it is already activated, then click to Deactivate and then Activate.

Note: Because of a SharePoint bug in rendering the order of the stylesheets, you might need to change the order of the stylesheet references from that shown in Figure 7. See AnswerNet page 8379 for instructions.

@import “Datatel2010BaseWebParts.css”;@import “Datatel2010Core.css”;@import “Datatel2010WebParts.css”;@import “Datatel2010CourseCatalog.css”;@import “D01Branding.css”;

ALERT! Do not change the classes directly in the Datatel-delivered CSS file because your customizations will be overwritten the next time Datatel delivers updates to DatatelPortalMain.css.


Stylesheet Customization Examples


Example 1: Stylesheet - Changing the Logo Image

Changing the logo image in the top banner will require copying the existing style from the Datatel2010Branding.css file into your custom stylesheet, changing the image URL to reflect the new image and identifying the height and width of your new image.

Figure 8: Example Datatel2010Branding.css Style

Figure 9: Example Change to Style in D012010Branding.css Custom Stylesheet

Note: The Datatel placeholder logo is a transparent PNG file at 301 pixels wide and 81 pixels in height. Keeping the height of your new image to 100 pixels or less is recommended.

.datatelv4 .site-image-title{background-image:url("/_layouts/images/Datatel/DatatelPortal-logo2.png");}

.datatelv4 .site-image-title{background-image:url("/_layouts/images/Datatel/ D01-PortalLogo.png ");width: 320px;height: 90px;}



Example 2: Changing the Header Background Design Image

Changing the decorative header background image in the top banner will require copying the existing style from the Datatel2010Branding.css file into your custom stylesheet, changing the image URL to reflect the new image and identifying the height and width of your new image.



Note: The Datatel design background is a transparent PNG file at 1006 pixels wide and 103 pixels in height. Keeping the height of your new image to 103 pixels or less is recommended.

/* Datatel graphic image floating on far left of header gradient */.datatelv4-overlaydesign{background-image:url("/_layouts/images/Datatel/Header-designbkgrd.png");

/* Datatel graphic image floating on far left of header gradient */.datatelv4-overlaydesign{background-image:url("/_layouts/images/Datatel/D01Header-designbkgrd.png")}



Example 3: Changing the Footer Image

Changing the footer text image in the footer will require copying the existing style from the Datatel2010Branding.css file into your custom stylesheet, changing the image URL to reflect the new image and identifying the height and width of your new image.



Note: The Datatel placeholder footer text image is a PNG file at 332 pixels wide and 44 pixels in height. The footer text uses the same gradient as the footer background gradient image footerpixel.png. The footerpixel.png gradient image is 1 pixel wide and 44 pixels in height, and will be modified by any color theme changes you made. It is recommended that you create a new version of the footerpixel.png gradient image in addition to a new image for the footertext.png image using the same background gradient to keep things consistent.

/* Footer background gradient image */.datatelv4 .dt-footer {background-image:url("/_layouts/images/datatel/footerpixel.png");}/* Footer text image */.datatelv4 .dt-footertext {background-image:url("/_layouts/images/datatel/footertext.png");}

/* Footer background gradient image */.datatelv4 .dt-footer {background-image:url("/_layouts/images/datatel/D01footerpixel.png");}/* Footer background gradient image */.datatelv4 .dt-footer {background-image:url("/_layouts/images/datatel/D01footertext.png");}



Example 4: Changing the Side Bar Images



Changing the side bar images on either side of your site will require copying the existing style from the Datatel2010Branding.css file into your custom stylesheet, changing the image URL to reflect the new image and identifying the height and width of your new image.

The Datatel placeholder footer text image is a PNG file at 1 pixel wide and 768 pixels in height. The background gradient will repeat horizontally but not vertically. A background color will be identified by your color theme for any content that extends beyond your gradient image height. It is recommended that you add a custom background color to your new style (the color at the very bottom of your Background-gradient.png file would be the best choice and will make for a smooth transition between your gradient and solid color).

/* Styles to control the centering, sidebars and masterpage content */.DatatelBody{background-image: url("/_layouts/images/Datatel/Background-gradient.png");}

/* Styles to control the centering, sidebars and masterpage content */.DatatelBody{background-image: url("/_layouts/images/Datatel/D01Background-gradient.png");background-color: # 9d2b2b;}



Example 5: Stylesheet - Custom Styling for the Navigation Menu

The top navigation links and drop-down menus in SharePoint 2010 have only been modified in theme color by Datatel. If the theme changes that you have made do not result in the desired effect, you can copy and paste the styles listed in Figure 16 on page 46 into your custom stylesheet and make changes as needed.

Note: The images used are in the Microsoft Images folder (and not the Datatel Images folder). These gradient images contain transparency, so it will be necessary to change the background color in the styles in addition to making changes to the background images in order to obtain the desired effect.



Figure 16: Example Navigation Menu Styling

/* Top navigation links */body #s4-topheader2{background-image:url("/_layouts/images/selbg.png");background-repeat: repeat-x;background-position: left top;background-color:#f6f6f6;vertical-align:middle;min-height:25px;border-top:1px solid #e0e0e0;border-bottom:1px solid #b8babd;}.s4-tn li.static > .menu-item{color:#666;white-space:nowrap;border:1px solid #d3d3d3;padding:4px 10px;margin-left:5px;display:inline-block;height:15px;vertical-align:middle;}.s4-tn ul.dynamic{background-color:white;border:1px solid #D3D3D3;}.s4-tn li.dynamic > .menu-item{display:block;padding:3px 10px;white-space:nowrap;font-weight:normal;}.s4-tn li.dynamic > a:hover{font-weight:normal;background-color:#D3D3D3;}.s4-tn li.static > a:hover{color:#44aff6;text-decoration:underline;}.s4-toplinks .s4-tn a.selected{border-color:#91cdf2;border-bottom-color:#addbf7;border-top-color:#c6e5f8;background-image:url("/_layouts/images/selbg.png");background-repeat: repeat-x;background-position: left top;background-color:#ccebff;color:#003759;padding:4px 5px;margin:0px 5px;}.s4-toplinks .s4-tn a.selected:hover{color:#003759;}


Styling Procedures

Creating Master Pages and Page Layouts

In This ChapterThis chapter contains a series of procedures that you will need to perform as you customize your Datatel Portal site using master pages and layout pages.



Topic Page

Understanding Master Pages and Page Layouts 48

Creating a Custom Master or Constituency Site Layout Page 51

Master Page and Page Layout Examples 54


Styling Procedures: Creating Master Pages and Page Layouts

Understanding Master Pages and Page Layouts

When a SharePoint Server 2010 site user opens a web page in a SharePoint site, the page is rendered based on a set of elements that have each been planned and designed separately in the website. Separating elements of a page in this manner enables site planners and designers to treat different elements of the site in unique ways.

Master Pages

A master page defines the elements that are common to all pages in a SharePoint top-level site and its subsites. This includes items such as the top banner, tool bars, navigation bars, a school logo, the footer, and a search box. When you define all of these elements in one master page file, they can be referenced by all of the other pages in the portal. This makes it easier to change the general look and feel of a site. When you change one file, all of the pages and sites using the master page are automatically updated.

Master pages include content holders that act as placeholders (often empty, sometimes not) for specific elements on a page. These placeholders are filled in with specific elements from each layout page.


Understanding Master Pages and Page Layouts

Figure 17: Master Page and Layout Pages

Layout Pages

In combination with master pages, a layout page defines the layout of elements on a page (except for anything that is defined directly in the master page). This includes web part zones and their locations, and code or elements that belong in pages using a specific layout only. For example, a tool bar that is not part of the main master page might be needed for other pages in the portal. A layout page does not include specific web parts. Those are defined in the template files.

All sites in the Datatel Portal share a single Master Page. The Datatel constituency template has a default.aspx layout page that contains web part zones where you can add web parts.

Master Page

Layout Page

Layout Page

Content Page

Master Page



Various portal pages can share the same layout while containing completely different content. For example, a layout page might define three columns with several web part zones in each column. Different templates might then identify completely different sets of web parts that go into each of these zones.

Figure 18: Constituency Subsites

Note: Layout pages are not used by team sites. For team sites, the default.aspx page defined in the site template defines the layout of the page.

Layout Page

Faculty Subsite Home Page

Master Page

Student Subsite Home Page Clerk Subsite Home Page

Layout Page

Master Page

Layout Page

Master PageEach subsite has its own set of web parts and content that are defined by the template for that constituency.

Content: Student

Web Parts

Content: Clerk

Web Parts

Content: Faculty

Web Parts


Creating a Custom Master or Constituency Site Layout Page


Perform the following procedure to create a custom master page or layout page.

Step 1. Access the SharePoint Server and find the FEATURES folder typically located under:

C:\Program Files\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\

Step 2. Create a new folder that will hold the new custom feature. For example, D01MasterAndLayouts

Step 3. In this same folder, locate the DatatelMasterAndLayouts subfolder. Copy the following files and folders from DatatelMasterAndLayouts to the new custom feature folder D01MasterAndLayouts:

Feature.xml

ProvisionedFiles.xml

Layouts\MainConstituencyLayout.aspx

MasterPages\datatelv4.master

Step 4. Use Visual Studio to generate a new GUID.

Step 5. Edit the Feature.xml file in your new custom D01MasterAndLayouts folder and replace the old GUID with the newly generated one. For example:<Feature Id=“{72FDF19D-73ED-47ec-B3C2-7BEE6CF60AAF}”

will be replaced with<Feature Id=“Your new GUID here”

Step 6. Access the MasterPages subfolder in your custom feature folder and rename the file datatelv4.master with your new master page name. For example, D01v4.master



Step 7. Access the Layouts folder and rename the file MainConstituencyLayout.aspx with your new page layout name. For example, D01ConstituencyLayout.aspx

Step 8. Edit and modify the ProvisionedFiles.xml file to define a module for each of your two files.

Follow the samples included in the file for Datatel. At the end, this file should contain only two modules; one for each of your new custom files (D01v4.master and D01ConstituencyLayout.aspx). For example, the D01.master module would look like this:<Module Name=“CustomMaster” Url=“_catalogs/master page” Path=“MasterPages”> <File Url=“D01v4.master” Type=“GhostableInLibrary”> <Property Name=“ContentType” Value=“master page” /> <Property Name=“MasterPageDescription” Value=“Custom Master Pages for D01” /> </File> </Module>

Step 9. Edit the Feature.xml file and modify the ElementManifest element to include only ElementFile elements for your custom master pages and layout pages.

For example, your new ElementManifest element might look like this:<ElementManifests>

<ElementManifest Location=“ProvisionedFiles.xml”/><ElementFile Location=“MasterPages\D01v4.master”/>

</ElementManifests>

Step 10. Run the “stsadm installfeature” to install the feature in the server and “stsadm activatefeature” to activate the feature in a site

An example of running it to install the D01MasterAndLayouts feature would be:

C:\Program Files\Common Files\Microsoft Shared\web server extensions\14\BIN\stsadm.exe -o installfeature -filename D01MasterAndLayouts\feature.xml

Step 11. Edit each of your two new files to make the desired changes using HTML and ASP.



Step 12. Access the site and change the master page settings by going to Site Actions > Site Settings > Master page under the Look and Feel category to select the newly created master page.

Note: If this is a top level site (home page of a site collection), an option can be selected on this same page to “Apply this master page to all subsites”.



Master Page and Page Layout Examples

Example 1: Master Pages – Adding a Link to the Header

If you followed the procedure outlined in “Creating a Custom Master or Constituency Site Layout Page” on page 51, you now have a file called D01v4.master in your new feature folder. This is the file you can edit to add a new help desk icon (and link) that will show up in all of the pages contained in a site collection.

Before making any updates, you will see the following code in the D01v4.master (Figure 19):

Figure 19: Before Updating Header Link

<SharePoint:DelegateControl ID="DelegateControl2" runat="server" ControlId="GlobalSiteLink0" /><a href="#" tabindex="-1" style="display:none"></a><a href="#" tabindex="-1" style="display:none"></a><div class="s4-trc-container-menu"><wssuc:Welcome id="IdWelcome" runat="server" EnableViewState="false"></wssuc:Welcome><wssuc:MUISelector runat="server"/></div> <AllUsersWebPart WebPartZoneID="CenterLeftColumn" WebPartOrder="2"><![CDATA[<webParts><webPart xmlns="http://schemas.microsoft.com/WebPart/v3"><metaData><type name="Datatel.Portal.WebPart.MyToDo.MyToDoPart, Datatel.Portal.WebPart.MyToDo, Version=1.0.0.0, Culture=neutral, PublicKeyToken=55c547a3498c89fb" /><importErrorMessage>Cannot import the Datatel.Portal.WebPart.MyToDo.MyToDoPart Web Part.</importErrorMessage></metaData><data><properties><property name="Title" type="string">My To Do</property></properties></data></webPart></webParts>]]></AllUsersWebPart>


Template Customization Examples

Adding a web part

To add a web part to a template, open the onet.xml file for a template that does have that web part, copy the section of text for that web part, and paste it into the onet.xml file for your custom template.

Removing a web part

To remove a web part from a template, simply remove that section of text from the onet.xml file.

Example 2: Modifying Web Part Properties

Each web part has its own section of text in the <Modules> section of the onet.xml file. Figure 24 is an example for the Unread Messages web part.

Figure 24: Section in the onet.xml File for the Unread Messages Web Part

In this case study, the properties emphasized in Figure 24 will be modified:

The web part will be moved to a different zone on the page.

The title of the web part will be changed from “Unread Messages” to “Unread Mail.”

The web part will be provided with a border by changing the chrome type from None to Default.

Figure 25 on page 66 shows that section of text after the changes.

<AllUsersWebPart WebPartZoneID="CenterUnreadMessages" WebPartOrder="1"><![CDATA[<webParts><webPart xmlns="http://schemas.microsoft.com/WebPart/v3"><metaData><type name="Datatel.Portal.WebPart.UnreadMessages.UnreadMessages, Datatel.Portal.WebPart.UnreadMessages, Version=1.0.0.0, Culture=neutral,

PublicKeyToken=55c547a3498c89fb" /><importErrorMessage>Cannot import the Datatel.Portal.WebPart.UnreadMessages.UnreadMessages Web Part.</importErrorMessage></metaData><data><properties><property name="Title" type="string">Unread Messages</property><property name="ChromeType">None</property></properties></data></webPart></webParts>]]></AllUsersWebPart>



Figure 25: The Same Section After Changes to the Web Part Properties

Example 3: Adding a Custom Feature

You may decide to create a new SharePoint feature to deliver some new functionality, such as a custom list or a feature that will deliver a custom master page. When you create a new feature, you give it a new “GUID” (unique ID). For this feature to be automatically activated in sites created from your custom template, add a reference to the new feature in the <WebFeatures> section in the <Configuration> section of the onet.xml file. Figure 26 is an example.

Figure 26: Section in the onet.xml File for a Custom Feature

<AllUsersWebPart WebPartZoneID="CenterLeftColumn" WebPartOrder="1"><![CDATA[<webParts><webPart xmlns="http://schemas.microsoft.com/WebPart/v3"><metaData><type name="Datatel.Portal.WebPart.UnreadMessages.UnreadMessages, Datatel.Portal.WebPart.UnreadMessages, Version=1.0.0.0, Culture=neutral,

PublicKeyToken=55c547a3498c89fb" /><importErrorMessage>Cannot import the Datatel.Portal.WebPart.UnreadMessages.UnreadMessages Web Part.</importErrorMessage></metaData><data><properties><property name="Title" type="string">Unread Mail</property><property name="ChromeType">Default</property></properties></data></webPart></webParts>]]></AllUsersWebPart>

<WebFeatures>

<Feature ID="12E549A4-30B4-4969-B060-144016E58640"></Feature>

<Feature ID="D99ED157-5440-4cc4-A154-0532194C55ED"></Feature>

<Feature ID="67602aca-f66a-4a43-adff-1360ed2fa8f7"></Feature>

Existing text

Your new text


Template Customization Examples

Example 4: Adding a Document Library

A SharePoint site can contain any number of document libraries. A document library is a SharePoint list with a type of 101. To add a document library to all sites created from a template, add the section of text shown in Figure 27 to the <Lists> section within the <Configuration> section of the onet.xml file. Figure 27 is an example for a library called “Assignments by Students.”

If the <Lists> section (plural Lists) does not exist, you will need to create the opening <Lists> tag and closing </Lists> tag.

Figure 27: Section in the onet.xml File for a Document Library

<Lists>

<List Type="101" Title="Assignments by Students" Url="$Resources:core,lists_Folder;/AssignmentsByStudents"></List>

</Lists>




Styling Procedures

Styling My Sites

In This ChapterThis chapter contains a series of procedures that you will need to perform as you style and customize your Datatel Portal My Sites.



Topic Page

Understanding My Sites 70

Disabling the Datatel Theme on My Sites 71

Creating My Sites with a Custom Theme 72

Applying a Theme to Existing My Sites 78


Styling Procedures: Styling My Sites

Understanding My SitesA My Site is a personal space where a user can save documents and share their work with others, if desired. Datatel My Sites styling takes advantage of the SharePoint 2010 theming framework. A Datatel-delivered theme is enabled and applied to all My Sites that you create after installing the Datatel Portal software. See Figure 28 for a My Site with the Datatel theme colors applied.

If you decide to keep My Sites available for your constituencies, you can provide users with a customized My Site theme using the steps in “Creating My Sites with a Custom Theme” on page 72 (or you can continue to use the default My Site theme page that uses colors from the main Client portal).

Figure 28: My Site with Datatel Theme Colors

Note: See “Disabling the Datatel Theme on My Sites” on page 71 if you want to disable the Datatel My Site theme styling.

Note: The Datatel custom theme (Datatel.thmx) coordinates with the Datatel Portal look and feel.


Disabling the Datatel Theme on My Sites

Disabling the Datatel Theme on My Sites

By default, the Datatel theme is applied to all new My Sites after the Datatel Portal software is installed. If you do not want the Datatel theme applied to new My Sites automatically, you can disable this feature. Follow the steps below to disable the automatic use of the Datatel theme on My Sites.

Step 1. Access the SharePoint server and open a command prompt (cmd.exe).

Step 2. Execute the uninstall command as shown below.

Note: Disabling this feature causes all new My Sites to be created using the standard Microsoft SharePoint default theme.

C:\Program Files\Common Files\Microsoft Shared\web server extensions\14\BIN\stsadm.exe -o uninstallfeature -filename DatatelMySiteThemeStapling\feature.xml



Creating My Sites with a Custom Theme

Perform the procedures in this section to apply a custom theme to My Sites. Table 17 lists the procedures in this section.

Before performing these procedures, create your custom theme as described in “Creating Custom Themes” on page 30. Make sure this theme is deployed as a feature as described in “Deploying a Custom Theme as a Feature” on page 31.

Table 17: Procedures in This Section

Topic Page

Determining the My Sites Host URL 73

Applying a Custom Theme to the My Sites Host 74

Specifying a Custom Theme for New My Sites 75



Determining the My Sites Host URL

Perform the following steps to determine the My Sites host URL. You will need to enter this URL in later procedures.

Step 1. In a browser, access the SharePoint Central Administration site.

Step 2. In the Application Management section, click Manage service applications.

Step 3. Locate and click User Profile Service Application in the list.

Step 4. Under My Site Settings, click Setup My Sites.

Step 5. Note the URL in the My Site Host location field (Figure 29) and record it below.

__________________________________________________________

Figure 29: URL for My Site



Applying a Custom Theme to the My Sites Host

Perform the following steps to apply your custom theme to the My Sites host.

Step 1. In a browser, access My Sites host page as an administrator.

Use the URL that you determined in “Determining the My Sites Host URL” on page 73.

Step 2. .At the left end of the SharePoint ribbon, click Site Actions and then Site Settings.

Step 3. In the Look and Feel section, click Site Theme.

Step 4. On the Site Theme page, select your custom theme (Figure 30).

Step 5. Click Apply.

Figure 30: Selecting your Site Theme



Specifying a Custom Theme for New My Sites

You may decide to use a custom theme as the default for all new My Sites. To apply a custom theme to users’ My Sites, you must staple it to the standard SharePoint My Site template. Stapling allows you to add features to a template without actually touching the template at all, so there is no risk of your changes being overwritten by future updates to the My Site template.

Perform the steps below to staple your custom theme to the My Site template. Any personal My Sites created after you perform this procedure will use the custom theme.

Step 1. Access the SharePoint server and navigate to the following location:

C:\Program Files\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\FEATURES

Step 2. Create a folder named D01MySiteThemeStapling, for example.

Step 3. In the new folder, use a text editor to create a new file.

Step 4. Add the text below to the new file:

Step 5. Make a note of your unique GUID (featureid) for use in the next procedure.

Note: This procedure specifies a theme to be used in My Sites created in the future. To apply a theme to existing My Sites, use the procedure in “Applying a Theme to Existing My Sites” on page 78.

Note: You will need a unique ID (GUID) for your feature. You can use Visual Studio to generate a new GUID. Otherwise, you can Google “GUID Generator” for an online generator to use.

<?xml version=“1.0” encoding=“utf-8” ?> <Feature Id=“Your unique guid here” Title="My Site Theme Stapling" Description=“My Site Theme Stapling” Version="12.0.0.0" Scope=“Farm” Hidden=“TRUE” xmlns=“http://schemas.microsoft.com/sharepoint/”> <ElementManifests> <ElementManifest Location=“basesitestapling.xml”/> </ElementManifests> </Feature>



Step 6. Save the file as feature.xml.

Step 7. In the D01MySiteThemeStapling folder, use a text editor to create another file.

Step 8. Add the following text to the file, replacing the custom theme name with the one you creating using the procedure in “Creating Custom Themes” on page 30.

Replace the GUID with the one you created when you implemented your custom theme as a feature (featureid) in “Deploying a Custom Theme as a Feature” on page 31.

Step 9. Save the file as basesitestapling.xml.

Step 10. Reset IIS by entering the iisreset command at the command line.

Technical Tip: For a custom THMX file to be applied to My Sites, the custom theme must be implemented as a feature.

<Elements xmlns=“http://schemas.microsoft.com/sharepoint/”><FeatureSiteTemplateAssociation Id=“CC18EFD1-3A05-409a-B8DF-99B47C565035”

TemplateName=“SPSPERS#0” > <Property Key=“Datatel2010CustomTheme” Value=“Your custom theme here” /> <Property Key=“CustomThemeFeatureIdToActivate” Value=“GUID for the custom theme feature” />

</FeatureSiteTemplateAssociation><FeatureSiteTemplateAssociation Id=“CC18EFD1-3A05-409a-B8DF-99B47C565035”

TemplateName=“SPSMSITEHOST#0” ><Property Key=“Datatel2010CustomTheme” Value=“Your custom theme here” /> <Property Key=“CustomThemeFeatureIdToActivate” Value=“GUID for the custom theme feature” />

</FeatureSiteTemplateAssociation> </Elements>



Step 11. Install the new feature by running the following stsadm command. Replace D01MySiteThemeStapling with the name of your feature folder.

If this is a new feature, run:

If you just updated your custom feature to change the theme ID, run:

Step 12. To test the changes, log into SharePoint as a user who has never been to this particular My Site.

Figure 31: Logging into My Site

Step 13. Click on the My Content link.

Figure 32: Selecting My Content

A new My Site personal site will be created for the user based on the custom theme look and feel.

stsadm -o installfeature -filename D01MySiteThemeStapling\feature.xml

Technical Tip: If your My Site site or personal sites were created before the above two features were installed and activated, you will need to activate them manually for those sites.

stsadm -o installfeature -filename D01MySiteThemeStapling\feature.xml -force



Applying a Theme to Existing My Sites

Your portal might have existing personal My Sites to which you want to apply the Datatel theme or a custom theme. Examples include:

After you implemented the Portal and some users created My Sites, you decide to create a custom theme. The procedure below applies your custom theme to the existing My Sites.

You migrated to Portal 3.0 from Portal 2.6.x. Any My Sites would have been migrated but would have no theme applied. You can use the procedure below to apply either the Datatel theme or your own custom theme to those migrated My Sites.

Perform the procedure below to apply a theme to existing My Sites.

Step 1. On your SharePoint server, access Windows PowerShell.

Step 2. In Windows PowerShell, enter the following command to enable the theme feature on the My Sites host:

For custom_theme, substitute Datatel Themes if you are applying the Datatel-delivered theme, or substitute the name of your custom theme if you are applying your custom theme (this is name of the folder directly under the Features folder).

For MySitesHostURL, substitute the URL that you determined in “Determining the My Sites Host URL” on page 73.

Example for the Datatel theme:

Example for a custom theme:

Note: This procedure applies a theme to existing My Sites. To specify a custom theme to be used in My Sites created in the future, use the procedure in “Specifying a Custom Theme for New My Sites” on page 75.

Enable-SPFeature -identity "custom_theme" -URL MySitesHostURL

Enable-SPFeature -identity "Datatel Themes" -URL http://sdsp10w8wfe:80/my/

Enable-SPFeature -identity "D01CustomTheme" -URL http://sdsp10w8wfe:80/my/


Applying a Theme to Existing My Sites

Step 3. Enter the following commands to enable the theme feature on individual My Sites:

a. First command, entered all on one line:

Example:

b. Second command, entered all on one line:

Example for the Datatel theme:

Example for a custom theme:

Step 4. Enter the following command, all on one line, to enable the DatatelMySiteThemeReceiver feature on the My Sites host:

Example:

$personalSites = get-spsite MySitesHostURL/* -Limit ALL | where {$_.RootWeb.WebTemplate -eq "SPSPERS"}

$personalSites = get-spsite http://sdsp10w8wfe:80/my/* -Limit ALL | where {$_.RootWeb.WebTemplate -eq "SPSPERS"}

foreach ($site in $personalSites) {Enable-SPFeature -Identity "custom_theme" -Url $site.Url}

foreach ($site in $personalSites) {Enable-SPFeature -Identity "Datatel Themes" -Url $site.Url}

foreach ($site in $personalSites) {Enable-SPFeature -Identity "D01CustomTheme" -Url $site.Url}

Enable-SPFeature -identity "DatatelMySiteThemeReceiver" -URL MySitesHostURL

Enable-SPFeature -identity "DatatelMySiteThemeReceiver" -URL http://sdsp10w8wfe:80/my/



Step 5. Enter the following commands to enable the DatatelMySiteThemeReceiver feature on individual My Sites:

a. First command, entered all on one line:

Example:

b. Second command, entered all on one line:

c. Third command, entered all on one line:

$personalSites = get-spsite MySitesHostURL/* -Limit ALL | where {$_.RootWeb.WebTemplate -eq "SPSPERS"}

$personalSites = get-spsite http://sdsp10w8wfe:80/my/* -Limit ALL | where {$_.RootWeb.WebTemplate -eq "SPSPERS"}

foreach ($site in $personalSites) {Disable-SPFeature -Identity "DatatelMySiteThemeReceiver" -Force -Url $site.Url -Confirm:$false}

foreach ($site in $personalSites) {Enable-SPFeature -Identity "DatatelMySiteThemeReceiver" -Url $site.Url}



Appendices

Appendices

Custom Color Planning Worksheet

In This AppendixYou will need to convert your hexadecimal numbers to their RGB (Red, Green, Blue) equivalents (Figure 33). If you do not have design software with this capability, then you can look online for a free converter.

Figure 33: Example Color Conversion

Note: To convert hexadecimal numbers to their RGB equivalents, you may want to locate a converter program. For example, the Firefox® ColorZilla program contains a color picker that allows you to choose exact colors from a website. It then provides the information as Hexadecimal numbers and RGB.

Color Name Hexadecimal RGB

Red FF0000 R 255, G 0, B 0


Appendices: Custom Color Planning Worksheet

Planning WorksheetUse the planning worksheet (Table 18) to record your choices of colors including the conversions from hexadecimal numbers to RGB values.

Note: The values contained in Datatel-delivered colors are included in the worksheet for your convenience. See “Modifying Datatel Theme Colors” on page 24 for more information.

Table 18: Planning Worksheet for Custom Colors

Color Name Hexadecimal RGB RGB in Datatel Theme

Light 1 R 255, G 255, B 255

Light 2 R 244, G 243, B 235

Dark 1 R 51, G 51, B 51

Dark 2 R 22, G 96, B 118

Accent 1 R 188, G231, B 240

Accent 2 R 77, G 77, B 77

Accent 3 R 141, G 213, B 236

Accent 4 R 220, G 220, B 220

Accent 5 R 255, G 174, B 120

Accent 6 R 181, G 174, B 120

Hyperlink R 77, G 77, B 77

Followed Hyperlink R 0, G 0, B 0


Appendices

FAQs and Tips & Tricks

In This AppendixThis appendix contains frequently asked questions and proposed solutions to those questions in addition to some tips on how to style your portal more easily and efficiently. Table 19 lists the topics covered in this chapter.

Table 19: Topics in This Appendix

Topic Page

Frequently Asked Questions (FAQs) 86

Tips and Tricks 88


Appendices: FAQs and Tips & Tricks

Frequently Asked Questions (FAQs)The following are frequency asked questions regarding styling the Datatel Portal.

Q Why would I implement my custom theme as a feature?

A If you have multiple site collections and do not want to repeat steps for each gallery, then you can implement your custom theme as a feature. After it is implemented, you activate the feature for a site collection where you need it.

If you are implementing My Sites, your custom theme must be implemented as a feature to be readily available to the newly provisioned personal sites.

Q How can I quickly test out my custom theme for just one test site collection without installing it as a feature?

A To load your custom theme to a test site collection, go to your root SharePoint 2010 site as an administrator. Then go to Site Actions > Site Settings > Galleries > Themes. Scroll down and click Add new item at the bottom of the list of themes. Then browse to find your custom theme and upload it. To apply your custom theme, go to Site Settings > Look and Feel > Site Theme. Test out your new theme.

Because images are tinted, there may be places where the transitions between images and background colors are not always as smooth as you would like. For those images and any branding images (like the logo and the footer text), create your own custom images and stylesheet.

Q Why am I not able to see my custom theme listed in the Site Settings > Look and Feel > Site Theme list of themes after installing it as a feature?

A Make sure you activate your feature. Go to Site Settings > Site collection administration > Site Collection Features to make sure your custom theme is activated.


Frequently Asked Questions (FAQs)

Q Why do my custom stylesheet changes (an image is replaced in a stylesheet or a color is changed in a THMX file) not take effect?

A If you have applied site themes, your changes may not appear immediately because SharePoint caches themed stylesheet files. Go to Central Administration and select Manage web applications under the Application Management category. Select your web application in the list and click on Manage Features. For the Datatel Refresh Themes entry, click to Activate. If it is already activated, then click to Deactivate and then Activate.



Tips and Tricks

Basic Testing Concepts

You institution may choose to have one constituency site or several dozen. This is one of the most important decisions you will make when implementing the Datatel Portal. You can use the following information to help you:

SharePoint installation components are shared by all sites in a server. This means that if you use IIS to create several virtual sites in the server where you have SharePoint installed, all of those sites will share the same SharePoint server components. Examples of shared items include templates, images, scripts, and stylesheet files. Therefore, creating new websites for testing in your production server, for example, may not be a good idea because changing elements that are a part of the SharePoint installation will also affect your new test website and your production site.

Customization only affects files in the file system of the server, not the database. All of the techniques for styling the Datatel portal site described in Styling the Datatel Portal (2010) affect only files that live in the file system in the SharePoint server – not elements in the database. This makes looking at files and moving them around easier.

You must reset IIS for any changes made to onet.xml. Every time you make a change to onet.xml in a site template, you must reset IIS from the command prompt, which will temporarily take down all websites in the server (typically for about 10 seconds or so) in order for the changes to take effect in the SharePoint portal. It is not sufficient to just stop and restart a single site. You should consider how this will impact other users of the server when deciding where to test custom templates.

You must create a site every time you make changes to onet.xml in a site template. This is probably the single most time consuming aspect of making changes to site templates – to change the web parts that will show up by default when a site is created. Every time you make a change to onet.xml (to add or remove a web part, or change the properties of a web part), you must reset IIS and create a new site. Keep this in mind when setting up your test server because you are likely to create several dozen sites in a single day to test changes to onet.xml.

Use a separate site collection to test template changes. If you are making changes to site templates, you will likely have to create many new sites to test the changes. Creating a separate test site collection for


Tips and Tricks

each batch of testing makes it easier to manage the newly created sites. After you are satisfied with the changes, delete the test site collection and create a new one for further testing. This helps to keep the main test site collection “clean” without hundreds or thousands of test sites that were created for the sole purpose of testing a new or modified site template.

Internet Explorer Developer Tools: Part of making changes to CSS files involves knowing which classes to change to modify each element on the page. To find out which classes are associated with each HTML tag, you would typically open the page and examine the source code to find out which style class you should be touching. We recommend using the Microsoft tools for Internet Explorer that make this task easier. To open the IE Developer Tools, start a new browser session and go to Tools > Developer Tools.

This tool allows you to be able to see a web page and the HTML code for the page side by side. If you click on Select Element by clicking the arrow icon from the tool bar, you can click anywhere on the page and it shows what the HTML code for that segment looks like.

Using a Test Server to Test Changes

Datatel recommends that you have a test server and at least one development server that each contain a full installation of SharePoint. Because many server components are shared between all websites in a server (for example, templates, images, and stylesheet files), it is risky to test changes in a production server even if you are using a separate website in that server.

Our recommendation is that you make changes to templates and stylesheets in a development environment. After you are satisfied with your changes, move the necessary files to the test environment and test there. If all tests are successful, then you are ready to move everything to your production environment.

Because some changes take effect immediately after you move a file into your production server, you may consider saving temporary copies of the files you are overwriting in addition to your regular backup strategy. This allows you to quickly restore a file to its original version if something goes wrong.



For example, if you are making changes to your main stylesheet file, save a copy of the file in the production server before overwriting it with a new version.

You can save this temporary copy in a folder called “old” somewhere in your server.

Include the date of the update as part of the name of the file, for example, D01CSSMAIN_10_13_2011.css.

You can delete all files from this “old” folder periodically; after you are certain the changes you applied to production were not disruptive.

If a change causes pages to stop working or you run into other issues, then restore the file to the version prior to the last update.

Moving Changes and Files Between Servers

Because all files involved in making changes to the look and feel of a SharePoint site exist in the SharePoint server file system, moving changes from one server to another (for example, from test to live) is quite straightforward.

Keep a list of the files you changed in your test environment. You will discover that they tend to be the same sets of files frequently, so it’s easy to create a permanent list to check against every time.

After you are finished with your intended changes, copy each individual folder or file you changed to the target server using any operating system copy tools. Copy and paste works fine for most changes because these tend to be relatively small files.


Tips and Tricks

Styling Your Datatel Portal Efficiently

The following are tips for making sure you are styling your Datatel Portal as completely and efficiently as possible:

All custom stylesheet and master pages need to be on all web front-end servers.

Do not remove the My Sites link from the master page. If you do not want them, configure it properly in central administration.

Use all branding stylesheets – not just individual ones.

Keep the original Datatel stylesheets on the DatatelPortalMain.css. Add your custom @imports below them.

Make a backup copy of your DatatelPortalMain.css because it will be overwritten during upgrades.

When doing a complete rebrand (color swap), start with a global find and replace on all of the colors you want to change. If you try to pick and choose elements, it will be a much longer process to change everything. There are a lot of pages to update and content that you might not be seeing.

When performing a custom brand, check the following pages for accuracy:• Constituency page• Constituency page in edit mode• Team Site page• View All Site Content• Announcements List• An announcement• Events Calendar Month View• Events Calendar Week View• Site Actions - Create menu• Site Actions - Site Settings menu

Styling the Portal

Documents

frequently

1px solid

application

masterpage

main client

site collection

stylesheet

understanding