Sie sind auf Seite 1von 92

Datatel Portal

Styling the Datatel Portal (SharePoint 2010)


Portal 3.0 ILP 1.5 February 15, 2011
For corrections and clarifications to this manual, see AnswerNet page 8357.

Styling the Datatel Portal (SharePoint 2010)


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 Court Fairfax, VA 22033 (703) 968-9000 (800) DATATEL

Table of Contents
7 Introduction
9
9 9 10 11 12 12 12 12

About This Manual


Who Should Read This Manual What This Manual Covers How This Manual Is Organized Typographical Conventions Important Notices Alerts Notes Technical Tips

13
13 14 15 15 16 17 18

Overview to Styling
In This Chapter Before You Begin High-Level Procedures Steps for Styling the Datatel Portal SharePoint 2010 Custom Styling Components Styling Components Timing Your Styling Customizations

19
21
21 22 22 22 23 24 26 26 30 31 33

Styling Procedures
Creating Custom Themes
In This Chapter Understanding Themes Applying a Theme Modifying Color Swatches Modifying Text and Background Colors Modifying Datatel Theme Colors Procedures for Customizing Themes Identifying Colors for a Custom Theme Creating Custom Themes Deploying a Custom Theme as a Feature Applying Your Custom Theme

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

Table of Contents

35
35 36 38 38 41 41 42 43 44 45

Creating Custom Stylesheets


In This Chapter Understanding Cascading Stylesheets Creating a Custom Stylesheet Procedure for Creating a Custom Stylesheet Stylesheet Customization Examples Example 1: Stylesheet - Changing the Logo Image Example 2: Changing the Header Background Design Image Example 3: Changing the Footer Image Example 4: Changing the Side Bar Images Example 5: Stylesheet - Custom Styling for the Navigation Menu

47
47 48 48 49 51 54 54 56

Creating Master Pages and Page Layouts


In This Chapter Understanding Master Pages and Page Layouts Master Pages Layout Pages Creating a Custom Master or Constituency Site Layout Page Master Page and Page Layout Examples Example 1: Master Pages Adding a Link to the Header Example 2: Layout Pages Adding a New Web Part Zone

57
57 58 58 59 59 60 60 61 61 61 62 64 64 65 66 67

Creating Custom Templates


In This Chapter Understanding Templates SharePoint Site Templates Datatel-Provided Templates Custom Templates Template Naming Conventions Template Selection for Constituency Sites Template Selection for Class Team Sites Template Selection for Social Team Sites Template Selection for Department Team Sites Procedure for Creating a Custom Template Template Customization Examples Example 1: Adding or Removing a Web Part Example 2: Modifying Web Part Properties Example 3: Adding a Custom Feature Example 4: Adding a Document Library

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

Table of Contents

69
69 70 71 72 73 74 75 78

Styling My Sites
In This Chapter Understanding My Sites Disabling the Datatel Theme on My Sites Creating My Sites with a Custom Theme Determining the My Sites Host URL Applying a Custom Theme to the My Sites Host Specifying a Custom Theme for New My Sites Applying a Theme to Existing My Sites

81
83
83 84

Appendices
Custom Color Planning Worksheet
In This Appendix Planning Worksheet

85
85 86 88 88 89 90 91

FAQs and Tips & Tricks


In This Appendix Frequently Asked Questions (FAQs) Tips and Tricks Basic Testing Concepts Using a Test Server to Test Changes Moving Changes and Files Between Servers Styling Your Datatel Portal Efficiently

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

Table of Contents

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

Styling the Datatel Portal (SharePoint 2010)

Introduction

Introduction

About This Manual

Who Should Read This Manual


Anyone 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 Covers


This 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.

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

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.

10

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

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
bold

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

Examples
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. 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.

In the Update Mode field, enter Yes. (Note that to enter Yes in a field, you normally need to type just the letter Y.) 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.

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

11

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.

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

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.
Note: Colleague uses the Account Type information to determine the default path prompts.

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.
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.

12

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

Introduction

Overview to Styling

In This Chapter
The 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 institutions branding to the Datateldelivered 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
Before You Begin High-Level Procedures Styling Components Timing Your Styling Customizations 14 15 17 18

Page

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

13

Introduction: Overview to Styling

Before You Begin


The 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
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) Upgrade from SharePoint 2007, if applicable. You can access an overview at: http://msdn.microsoft.com/en-us/ library/dd776256(v=office.12).aspx Upgrading the Datatel Portal to SharePoint 2010

Reference

14

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

High-Level Procedures

High-Level Procedures
This 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
1. Overview to Styling 2. Creating Custom Themes 3. Creating Custom Stylesheets 4. Creating Master Pages and Page Layouts 5. Styling My Sites 6. Creating Custom Templates

Procedure
page 13 page 21 page 35 page 47 page 69 page 57

Results
Ready to continue styling the Datatel Portal. You have created custom theme files for branding. You have created custom stylesheet files for branding. You have created custom master page and page layout files for branding. You have a custom theme you want to apply to My Sites. You have created custom site templates in SharePoint 2010.

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

15

Introduction: Overview to Styling

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


Theme

Path and Name


FEATURES\Datatel Themes\DatatelTheme Datatel.thmx

Description
Datatel theme file.

Custom Equivalent
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\DatatelMasterAnd Layouts\MasterPages datatelv4.master

SharePoint master page file used for migrated or new sites. SharePoint layout page file

FEATURES\D01MasterAndLayouts\ MasterPages D01v4.master FEATURES\D01MasterAndLayouts\ Layouts D01ConstituencyLayout.aspx

Layout pages

FEATURES\DatatelMasterAnd Layouts\Layouts MainConstituencyLayout.aspx, etc.

Templates

Site Templates DATATEL_CONST, etc.(folders)

Templates used in creating constituency sites and team sites.

Site Templates CUSTOM_CONST, etc.(folders)

16

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

Styling Components

Styling Components
The 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.

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

17

Introduction: Overview to 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 Customizations


When 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.
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.

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.

18

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

Styling the Datatel Portal (SharePoint 2010)

Styling Procedures

Styling Procedures

Creating Custom Themes

In This Chapter
This chapter contains a series of procedures that you will need to perform as you style and customize your Datatel Portal site. Table 6 lists the topics covered in this chapter.
Table 6: Topics in This Chapter Topic
Understanding Themes Procedures for Customizing Themes 22 26

Page

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

21

Styling Procedures: Creating Custom Themes

Understanding Themes
SharePoint 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.
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.

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 Datateldelivered 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.

22

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

Understanding Themes

Figure 1: Datatel Theme Color Selections

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

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

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

23

Styling Procedures: Creating Custom Themes

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
Light 1

RGB Values
R 255, G 255, B 255

Where Used
Body background Site Actions link text Welcome/login text color Web part backgrounds Web part titles Left panel background color Web part borders Background color for My Week and Picture of the week web parts 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 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 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 Not used by Datatel 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

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 Accent 3

R 77, G 77, B 77 R 141, G 213, B 236

24

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

Understanding Themes

Table 7: Datatel Theme Colors (contd) Color


Accent 4

RGB Values
R 220, G 220, B 220

Where Used
Constituency navigation link borders My Bookmark separators WebAdvisor line breaks Horizontal rule line below bread crumbs Course Catalog alternating row browse results 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 Sidebar background WebAdvisor menu background My Week calendar event day row background Web part row background color Picture Rotator title color Most hyperlinks throughout the site Course Catalog Enrolled button Add to preferred list background color

Accent 5

R 255, G 174, B 120

Accent 6

R 181, G 174, B 120

Hyperlink Followed Hyperlink

R 77, G 77, B 77 R 0, G 0, B 0

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

25

Styling Procedures: Creating Custom Themes

Procedures for Customizing Themes


Use the following sets of procedures as you customize themes.
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 lists the topics covered in this section.


Table 8: Topics in This Section Topic
Identifying Colors for a Custom Theme Creating Custom Themes Deploying a Custom Theme as a Feature Applying Your Custom Theme 26 30 31 33

Page

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.

26

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

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.

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

27

Styling Procedures: Creating Custom Themes

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.

28

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

Procedures for Customizing Themes

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.

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

29

Styling Procedures: Creating Custom Themes

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 2. At the left end of the SharePoint ribbon, click Site Actions and then Site Settings.

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. 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.

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.

30

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

Procedures for Customizing Themes

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.
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.

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

<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>

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

31

Styling Procedures: Creating Custom Themes

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

<?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>

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 9. In a browser, access the top-level site of the main portal site collection as an administrator.

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

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

32

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

Procedures for Customizing Themes

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 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.

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.

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

33

Styling Procedures: Creating Custom Themes

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.

34

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

Styling Procedures

Creating Custom Stylesheets

In This Chapter
This chapter contains a series of procedures that you will need to perform as you style and customize your Datatel Portal site. Table 9 lists the topics covered in this chapter.
Table 9: Topics in This Chapter Topic
Understanding Cascading Stylesheets Creating a Custom Stylesheet Stylesheet Customization Examples 36 38 41

Page

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

35

Styling Procedures: Creating Custom Stylesheets

Understanding Cascading Stylesheets


Microsoft 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.

36

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

Understanding Cascading Stylesheets

The Datatel2010PortalMain.css file contains the following code:


@import @import @import @import Datatel2010Core.css; Datatel2010BaseWebParts.css; Datatel2010WebParts.css; 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).

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

37

Styling Procedures: Creating Custom Stylesheets

Creating a Custom Stylesheet


A 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.
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.

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.
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.

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).

38

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

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\
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.

Figure 6: D01Branding.css Example


/*** Custom Branding Stylesheet ***/ /* Header Logo Image */ .datatelv4 .site-image-title{ background-image:url("/_layouts/images/Datatel/D01Portallogo2.png"); } /* Footer text image */ .datatelv4 .dt-footertext { background-image:url("/_layouts/images/datatel/ D01footertext.png"); }

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


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

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

39

Styling Procedures: Creating Custom Stylesheets

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.
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.

Figure 7: Adding Custom Branding to Main Stylesheet


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

Step 7. Save the file.


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

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.

40

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

Stylesheet Customization Examples

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.
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.

Figure 8: Example Datatel2010Branding.css Style


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

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


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

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

41

Styling Procedures: Creating Custom Stylesheets

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.

Figure 10: Example Datatel2010Branding.css Style


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

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


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

42

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

Stylesheet Customization Examples

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.

Figure 12: Example Datatel2010Branding.css Style


/* 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"); }

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


/* 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"); }

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

43

Styling Procedures: Creating Custom Stylesheets

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).

Figure 14: Example Datatel2010Branding.css Style


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

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


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

44

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

Stylesheet Customization Examples

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.

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

45

Styling Procedures: Creating Custom Stylesheets

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; }

46

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

Styling Procedures

Creating Master Pages and Page Layouts


In This Chapter
This 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. Table 10 lists the topics covered in this chapter.
Table 10: Topics in This Chapter Topic
Understanding Master Pages and Page Layouts Creating a Custom Master or Constituency Site Layout Page Master Page and Page Layout Examples 48 51 54

Page

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

47

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.

48

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

Understanding Master Pages and Page Layouts

Figure 17: Master Page and Layout Pages

Master Page

Content Page

Master Page

Layout Page

Layout Page

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.

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.

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

49

Styling Procedures: Creating Master Pages and Page Layouts

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.
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.

Figure 18: Constituency Subsites

Student Subsite Home Page


Master Page

Clerk Subsite Home Page


Master Page

Layout Page Content: Student Web Parts

Layout Page Content: Clerk Web Parts

Faculty Subsite Home Page


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

Master Page

Layout Page Content: Faculty Web Parts

50

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

Creating a Custom Master or Constituency Site Layout Page

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

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

51

Styling Procedures: Creating Master Pages and Page Layouts

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.

52

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

Creating a Custom Master or Constituency Site Layout Page

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.

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

53

Styling Procedures: Creating Master Pages and Page Layouts

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):
<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> <!-- You will add a link here, between the LoggedOn User dropdown menu and the help icon ' <div class="s4-help"> <div class="s4-clust"><a href="javascript:TopHelpButtonClick('HelpHome')" accesskey="<%$Resources:wss,multipages_helplink_accesskey%>" id="A4" title="<%$Resources:wss,multipages_helplinkalt_text%>" runat="server"><img id="Img2" src="/_LAYOUTS/DATATEL/images/ help.png" alt="<%$Resources:wss,multipages_helplinkalt_text%>" border="0" runat="server" /></a></div> </div>

Figure 19: Before Updating Header Link

54

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

Master Page and Page Layout Examples

After making updates, you will see the following code in the D01v4.master (Figure 19):
<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> <div class="helpdesk"> <a target="_blank" href="http://helpdesk.myschool.com" accesskey="<%$Resources:wss,multipages_helplink_accesskey%>" id="A123" title="HelpDesk" runat="server"><img id="Img123" src="/ _LAYOUTS/DATATEL/images/help.png" alt="HelpDesk" border="0" runat="server" /></a> </div> <div class="s4-help"> <div class="s4-clust"><a href="javascript:TopHelpButtonClick('HelpHome')" accesskey="<%$Resources:wss,multipages_helplink_accesskey%>" id="A4" title="<%$Resources:wss,multipages_helplinkalt_text%>" runat="server"><img id="Img2" src="/_LAYOUTS/DATATEL/images/ help.png" alt="<%$Resources:wss,multipages_helplinkalt_text%>" border="0" runat="server" /></a></div> </div>

Figure 20: After Updating Header Link

In the branding stylesheet, the CSS style helpdesk needs to be defined as shown in the following sample stylesheet (Figure 19):
/* HelpDesk button in header */ .datatelv4 .helpdesk{ top: 1px; position:relative; display: inline; border: 1px solid transparent; height:22px; width:22px; /* [RecolorImage(themeColor:"Accent1",method:"Tinting")] */ background-image:url("/_layouts/images/datatel/myschool/ helpcenter.png"); background-repeat:no-repeat; float:left; margin:4px 4px 3px 21px; }

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

55

Styling Procedures: Creating Master Pages and Page Layouts

Figure 21: Detailed Page Using IE Developer Tools

Example 2: Layout Pages Adding a New Web Part Zone


To add a new web part zone to your custom layout page, edit the page (for example, D01ConstituencyLayout.aspx) using an HTML editor. Add a new WebPartPages:WebPartZone control. For example, to add a new zone called Top CenterLeft that would go to the left of the TopCenter zone, include the following code:
<tr> <td id="_invisibleIfEmpty" name="_invisibleIfEmpty" colspan="2" valign="top"> <WebPartPages:WebPartZone runat="server" Title="Top Center" ID="TopCenter"/> </td> <td id="_invisibleIfEmpty" name="_invisibleIfEmpty" colspan="1" valign="top"> <WebPartPages:WebPartZone runat="server" Title="Top Center Left" ID="TopCenterLeft"/> </td> </tr>

56

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

Styling Procedures

Creating Custom Templates

In This Chapter
This chapter provides procedures for creating custom templates to be used for Portal constituency and team sites. Table 11 lists the topics covered in this chapter.
Table 11: Topics in This Chapter Topic
Understanding Templates Procedure for Creating a Custom Template Template Customization Examples 58 62 64

Page

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

57

Styling Procedures: Creating Custom Templates

Understanding Templates
Table 12 lists the concepts covered in this section.
Table 12: Topics in This Section Topic
SharePoint Site Templates Datatel-Provided Templates Custom Templates Template Naming Conventions 58 59 59 60

Page

SharePoint Site Templates


When a new site is created in SharePoint, a template is used to define the initial design of the site. A template consists of a group of files that live in the file system in the SharePoint server. The template specifies: The master page used for the site. The page layout used for each page, which in turn defines the web part zones where web parts are placed. The web parts on each page. The stylesheets used to define the look and feel of the site. The lists and list templates available in the site. Any SharePoint features that are available in the site. These site attributes can all be changed after the site is created, using standard SharePoint methods.
Note: The template only affects the site when it is created. Later changes to the template are not reflected in sites previously created from that template.

Included in the files that make up the template is the onet.xml file. This is the file that includes most of the specifications listed above, and it is this file that you will modify to create your custom template.

58

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

Understanding Templates

Datatel-Provided Templates
Datatel provides the templates listed in Table 13. As noted in Table 13, constituency and team site templates are applied automatically when those sites are created from Colleague. For more information about constituency and team site templates, see Template Naming Conventions on page 60.
Table 13: Templates Provided by Datatel Template Type
Site collection Course catalog site collection Constituency site Class team site Social team site Department team site Publishing site

Comment
You select this template when you create the main portal site collection. You select this template when you create a course catalog site collection. Automatically applied when a constituency site is created from the Organization Constituencies (OCON) form in Colleague. Automatically applied when a class team site is created from a Colleague course section. Automatically applied when a social team site is created from a Colleague campus organization. Automatically applied when a department team site is created from a Colleague organization department. You can select this template if you want to create a SharePoint publishing site with the same look as the rest of the portal.

Datatel templates are installed in the following folder on the SharePoint server: C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\SiteTemplates. Each template is a folder under that location. For example, the Datatel site collection template is in the DATATEL_SITE_COLLECTION folder.

Custom Templates
You can create custom versions of the templates provided by Datatel. Because any change made to the template can also be made in the site after it is created, it makes sense to create a custom template only if you expect to create multiple sites of that type. For example, you might want to create a custom class site template if you plan to create class sites from all of your Colleague course sections. On the other hand, it would probably not make sense to create a custom site collection template unless you expected to repeatedly create new site collections, for example for training purposes.

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

59

Styling Procedures: Creating Custom Templates

Template Naming Conventions


Constituency and team sites can be automatically created from Colleague using the procedures in the Portal Administration manual. When the site is created, a template is selected as described below for each type of site.

Template Selection for Constituency Sites


Datatel provides the constituency site templates listed in Table 14. You can create your own custom templates for specific constituency sites or a custom template to apply to all sites that dont have their own templates.
Table 14: Datatel-Delivered Templates for Constituencies Constituency ID
STUDENT FACULTY ADMINISTRATION STAFF EXECUTIVE generic

Template Name
DATATEL_CONST_STUDENT DATATEL_CONST_FACULTY DATATEL_CONST_ADMINISTRATION DATATEL_CONST_STAFF DATATEL_CONST_EXECUTIVE DATATEL_CONST

The process that creates a constituency site from Colleague looks for templates in the following order: Your custom template (if you choose to create one) for this constituency. This template must be named CUSTOM_CONST_constituencyID, where constituencyID is the Colleague constituency ID that you enter at the Constituency LookUp prompt when you access the Organization Constituencies (OCON) form. Example: CUSTOM_CONST_STUDENT A Datatel-provided template for this constituency, named DATATEL_CONST_constituencyID. Datatel provides the constituency site templates listed in Table 14. To use the Datatel template, the Colleague constituency ID that you enter when you create the constituency must match the value shown in Table 14. Your custom template (if you choose to create one) for all constituencies that dont have a specific template. This template must be named CUSTOM_CONST. The Datatel-provided generic template for all constituencies that dont have a specific template. This template is named DATATEL_CONST.

60

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

Understanding Templates

Template Selection for Class Team Sites


Datatel delivers one template, DATATEL_CS, to be used for all class team sites created from Colleague course sections. You can create a template named CUSTOM_CS for all class sites. If the CUSTOM_CS template exists, it will be used instead of the DATATEL_CS template.

Template Selection for Social Team Sites


Datatel delivers one template, DATATEL_CO, to be used for all social team sites created from Colleague campus organizations. You can create a template named CUSTOM_CO for social sites. If the CUSTOM_CO template exists, it will be used instead of the DATATEL_CO template.

Template Selection for Department Team Sites


Datatel delivers one template, DATATEL_DEPT, to be used for all department team sites created from Colleague organization departments. You can create a template named CUSTOM_DEPT for department sites. If the CUSTOM_DEPT template exists, it will be used instead of the DATATEL_DEPT template.

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

61

Styling Procedures: Creating Custom Templates

Procedure for Creating a Custom Template


Perform the procedure below to create a custom template. Step 1. On your SharePoint server, create the custom template by making a copy of the folder for an existing Datatel template. For example, to create a custom generic constituency template, copy the existing DATATEL_CONST folder and name the new folder CUSTOM_CONST. Place the new folder in the same place as the Datatel templates: C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\SiteTemplates. See Template Naming Conventions on page 60 for guidance in selecting the folder name. Those guidelines must be followed to ensure that the template is selected when sites are created from Colleague.

Step 2. Perform the following steps to create a custom manifest file that references your custom templates: a. Locate the webtempdatatel.xml file, in the C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\1033\XML folder. b. Make a copy of the webtempdatatel.xml file and place the copy in the same folder. Suggested name for the new file: webtempcustom.xml. This is your custom manifest file. c. Open the custom manifest file in a text editor.

62

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

Procedure for Creating a Custom Template

d. Remove the existing <Template Name> sections from the file, and insert a new <Template Name> section for each of your custom templates. Figure 22 shows an example of the <Template Name> section for a custom generic constituency template. For Template Name, enter the name of the template folder that you created in Step 1 on page 62. For ID, enter any number that is unique (not already used in one of the other webtemp files). This ID is not directly tied to the template code. A good best practice is to start IDs using numbers above 5000 so they dont conflict with Microsoft or Datatel templates. For Description, enter a free-form description that will identify your template when viewed in the template gallery. e. Save your changes to the custom manifest file.
Figure 22: Example <Template Name> Section in the Custom Manifest File
<Template Name="CUSTOM_CONST" ID="5001"> <Configuration ID="0" Title="Custom Constituency Template" Hidden="FALSE" Description="Custom template for constituency sites" DisplayCategory="Datatel" ImageUrl="/_layouts/1033/images/IPPT.gif"> </Configuration> </Template>

Step 3. Under the new template folder that you created in Step 1 on page 62, in the XML subfolder, open the onet.xml file in a text editor.

Step 4. Make the desired changes to the onet.xml file. See Template Customization Examples on page 64 for examples of template changes you can make by modifying the onet.xml file.

Step 5. Save your changes to the onet.xml file.

Step 6. Reset IIS by entering the iisreset command at the Windows command prompt.

Step 7. To test the new template, go to your portal site collection and use standard SharePoint methods to create a site, selecting your new custom template.

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

63

Styling Procedures: Creating Custom Templates

Template Customization Examples


This section provides examples of template customizations that you can make by editing the onet.xml file. Table 15 lists the topics covered in this section.
Table 15: Topics in This Section Topic
Example 1: Adding or Removing a Web Part Example 2: Modifying Web Part Properties Example 3: Adding a Custom Feature Example 4: Adding a Document Library 64 65 66 67

Page

Note: Remember to do an iisreset after each change, and then create a new site to see the result of the change (existing sites will not reflect changes to the template).

Example 1: Adding or Removing a Web Part


Each web part has its own section of text in the <Modules> section of the onet.xml file. Figure 23 is an example for the My To Do web part.
Figure 23: Section in the onet.xml File for the My To Do Web Part
<!-- My To Do --> <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>

64

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

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
<!-- Unread Messages --> <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>

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.

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

65

Styling Procedures: Creating Custom Templates

Figure 25: The Same Section After Changes to the Web Part Properties
<!-- Unread Messages --> <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>

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
<WebFeatures> <!-- Datatel Events List Instance --> <Feature ID="12E549A4-30B4-4969-B060-144016E58640"> </Feature> <!-- Datatel My Bookmarks List Instance --> <Feature ID="D99ED157-5440-4cc4-A154-0532194C55ED"> </Feature>

Existing text

Your new text

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

66

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

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 the Datatel Portal (SharePoint 2010), February 15, 2011 2011 Datatel, Inc.

67

Styling Procedures: Creating Custom Templates

68

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

Styling Procedures

Styling My Sites

In This Chapter
This chapter contains a series of procedures that you will need to perform as you style and customize your Datatel Portal My Sites. Table 16 lists the topics covered in this chapter.
Table 16: Topics in This Chapter Topic
Understanding My Sites Disabling the Datatel Theme on My Sites Creating My Sites with a Custom Theme Applying a Theme to Existing My Sites 70 71 72 78

Page

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

69

Styling Procedures: Styling My Sites

Understanding My Sites
A 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.
Note: See Disabling the Datatel Theme on My Sites on page 71 if you want to disable the Datatel My Site theme styling.

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).
Note: The Datatel custom theme (Datatel.thmx) coordinates with the Datatel Portal look and feel.

Figure 28: My Site with Datatel Theme Colors

70

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

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.
Note: Disabling this feature causes all new My Sites to be created using the standard Microsoft SharePoint default theme.

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

Step 2. Execute the uninstall command as shown below. C:\Program Files\Common Files\Microsoft Shared\web server extensions\14\BIN\stsadm.exe -o uninstallfeature -filename DatatelMySiteThemeStapling\feature.xml

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

71

Styling Procedures: Styling My Sites

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.
Table 17: Procedures in This Section Topic
Determining the My Sites Host URL Applying a Custom Theme to the My Sites Host Specifying a Custom Theme for New My Sites 73 74 75

Page

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.

72

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

Creating My Sites with a Custom Theme

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

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

73

Styling Procedures: Styling My Sites

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

74

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

Creating My Sites with a Custom Theme

Specifying a Custom Theme for New My Sites


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.

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.
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.

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

<?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 5. Make a note of your unique GUID (featureid) for use in the next procedure.

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

75

Styling Procedures: Styling My Sites

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.
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 9. Save the file as basesitestapling.xml.

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

76

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

Creating My Sites with a Custom Theme

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:

stsadm -o installfeature -filename D01MySiteThemeStapling\feature.xml

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

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

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.

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.

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

77

Styling Procedures: Styling My Sites

Applying a Theme to Existing My Sites


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.

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:
Enable-SPFeature -identity "custom_theme" -URL MySitesHostURL

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:
Enable-SPFeature -identity "Datatel Themes" -URL http://sdsp10w8wfe:80/my/

Example for a custom theme:


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

78

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

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:
$personalSites = get-spsite MySitesHostURL/* -Limit ALL | where {$_.RootWeb.WebTemplate -eq "SPSPERS"}

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

b. Second command, entered all on one line:


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

Example for the Datatel theme:


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

Example for a custom theme:


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

Step 4. Enter the following command, all on one line, to enable the DatatelMySiteThemeReceiver feature on the My Sites host:
Enable-SPFeature -identity "DatatelMySiteThemeReceiver" -URL MySitesHostURL

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

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

79

Styling Procedures: Styling My Sites

Step 5. Enter the following commands to enable the DatatelMySiteThemeReceiver feature on individual My Sites: a. First command, entered all on one line:
$personalSites = get-spsite MySitesHostURL/* -Limit ALL | where {$_.RootWeb.WebTemplate -eq "SPSPERS"}

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

b. Second command, entered all on one line:


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

c. Third command, entered all on one line:


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

80

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

Styling the Datatel Portal (SharePoint 2010)

Appendices

Appendices

Custom Color Planning Worksheet


In This Appendix
You 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.
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.

Figure 33: Example Color Conversion Color Name


Red

Hexadecimal
FF0000

RGB
R 255, G 0, B 0

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

83

Appendices: Custom Color Planning Worksheet

Planning Worksheet
Use 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


Light 1 Light 2 Dark 1 Dark 2 Accent 1 Accent 2 Accent 3 Accent 4 Accent 5 Accent 6 Hyperlink Followed Hyperlink

Hexadecimal

RGB

RGB in Datatel Theme


R 255, G 255, B 255 R 244, G 243, B 235 R 51, G 51, B 51 R 22, G 96, B 118 R 188, G231, B 240 R 77, G 77, B 77 R 141, G 213, B 236 R 220, G 220, B 220 R 255, G 174, B 120 R 181, G 174, B 120 R 77, G 77, B 77 R 0, G 0, B 0

84

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

Appendices

FAQs and Tips & Tricks

In This Appendix
This 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
Frequently Asked Questions (FAQs) Tips and Tricks 86 88

Page

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

85

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.

86

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

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.

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

87

Appendices: FAQs and Tips & Tricks

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

88

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

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.

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

89

Appendices: FAQs and Tips & Tricks

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 its 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.

90

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

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 Datatel Portal (SharePoint 2010), February 15, 2011 2011 Datatel, Inc.

91

Appendices: FAQs and Tips & Tricks

92

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

Das könnte Ihnen auch gefallen