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.

3

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

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). 2011 © 2011 Datatel. Inc. February 15. 5 .

February 15. 2011 © 2011 Datatel. Inc.Table of Contents 6 Styling the Datatel Portal (SharePoint 2010). .

Styling the Datatel Portal (SharePoint 2010) Introduction .

.

Styling the Datatel Portal (SharePoint 2010).Introduction About This Manual Who Should Read This Manual Anyone responsible for styling their installation of the Datatel Portal should read this manual. Typically. Manages Active Directory and maintains the computer network. Webmaster. especially the public website. 9 . February 15. see the “Overview to Styling” beginning on page 13. Network administrator. Inc. Manages Datatel Portal. A representative list of administrator roles include: Colleague administrator. the procedures in this manual would be performed by system administrators. and monitoring of active network equipment. For a high-level overview of styling features. This includes deployment. Manages websites. Manages Colleague and Envision updates. SharePoint administrator. configuration. 2011 © 2011 Datatel. What This Manual Covers This manual contains information and procedures for styling your client installation of the Datatel Portal.

10 Styling the Datatel Portal (SharePoint 2010). “Custom Color Planning Worksheet” contains a worksheet that you can use to record your desired color conversions. “Creating Custom Themes. provides information about this manual and its organization.” “Creating Master Pages and Page Layouts.” contain a series of procedures that you can use to customize your Datatel Portal site. “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.” which you are reading now. 2011 © 2011 Datatel.” and “Styling My Sites. . “Creating Custom Templates.” “Creating Custom Stylesheets.Introduction: About This Manual How This Manual Is Organized “About This Manual. “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. February 15. Inc.

or other options that appear on the screen. you normally need to type just the letter Y. and explains their significance. Type the following at the operating system prompt: cd /deptdir/mydir Specific entries that you make in a field. Styling the Datatel Portal (SharePoint 2010). Examples On the File menu. where dictname is the name of the dictionary. Click Cancel to return to the previous form. proceed to Step 4 to create a new Person record. Select 100% from the drop-down list box for the Zoom field. If the system displays the message PersonID Not Found. enter Yes. or italic bold courier if it is something that you must type. February 15. such as menu items. bold Courier Text that you must type exactly as shown. Note that the text might also be italic courier if it is part of a message displayed on your screen. Table 1: Typographical Conventions Used in This Manual Style bold Type of Information Items that you can select. substituting your own value for the italicized word or words. point to New. depending on the specific item or record involved.Typographical Conventions Typographical Conventions The following presentation conventions are used in this book to help you identify important information quickly and easily. italic Text that can vary. In the Update Mode field. 2011 © 2011 Datatel. and then click Folder. 11 . typically by typing one or more of the letters in the entry. Inc.) Type dictname_SQL. Table 1 illustrates the typographical styles used in this book. buttons. (Note that to enter “Yes” in a field.

Make sure you have ample available drive space when using stylesheet printing. Alerts are used to warn you of situations where data loss or corruption could occur if certain actions are performed incorrectly. depending on the size of the print job. This file will then be parsed into 2MB files in order to be sent to the printer. . 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. Notes Notes provide special additional information that you might want to know. Examples include explanations of behind-the-scenes processing. 12 Styling the Datatel Portal (SharePoint 2010). An example is shown below. lists of file names. Technical Tips Technical tips provide details that might help system administrators or power users. Note: Colleague uses the Account Type information to determine the default path prompts. or that might help you perform a task. February 15. this will cause serious damage to your data. Inc. and names of validation code tables. An example is shown below. An example is shown below. Alerts Alerts call attention to critical information for users.Introduction: About This Manual Important Notices Particularly important information is emphasized in the following types of notices. For example. ALERT! Be extremely cautious not to delete the VOC. 2011 © 2011 Datatel. Be aware that the initial file may become very large.

Introduction Overview to Styling In This Chapter The Datatel Portal 3. It includes best practices and tips to assure that your custom branding components will interact well with both Datatel and Microsoft branding. 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). This document assists you as you apply your own institution’s branding to the Datateldelivered look and feel of the Datatel Portal. Inc.0 delivery includes a user interface (UI) that utilizes select Microsoft® SharePoint 2010 user interface features. 13 . 2011 © 2011 Datatel. February 15. Table 2 lists the topics covered in this chapter.

Table 3 lists tasks to complete before you continue with the procedures in this document. Inc.12). Table 3: Before You Begin Task Familiarize yourself with the SharePoint interface such as adding web parts to pages and creating sites. You can access an overview at: http://msdn. HTML. . and XML. 2011 © 2011 Datatel.Introduction: Overview to Styling Before You Begin The following prerequisites are recommended for the successful ability to tailor SharePoint sites.com/en-us/ library/dd776256(v=office. Obtain an understanding of the basic concepts of customizing a SharePoint portal site and WSS sites. Obtain a working knowledge of CSS.microsoft.aspx Upgrading the Datatel Portal to SharePoint 2010 Reference 14 Styling the Datatel Portal (SharePoint 2010). if applicable. February 15. (optional) Upgrade from SharePoint 2007.

You have created custom theme files for branding. You have created custom master page and page layout files for branding.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. February 15. “Overview to Styling” 2. You have created custom site templates in SharePoint 2010. Inc. “Creating Master Pages and Page Layouts” 5. Steps for Styling the Datatel Portal Table 4: Steps for Styling the Datatel Portal Step 1. “Creating Custom Templates” Procedure page 13 page 21 page 35 page 47 page 69 page 57 Results Ready to continue styling the Datatel Portal. “Styling My Sites” 6. “Creating Custom Themes” 3. Styling the Datatel Portal (SharePoint 2010). You have created custom stylesheet files for branding. 2011 © 2011 Datatel. You have a custom theme you want to apply to My Sites. “Creating Custom Stylesheets” 4. 15 .

If you are upgrading from SharePoint 2007. SharePoint layout page file FEATURES\D01MasterAndLayouts\ MasterPages D01v4. Site Templates CUSTOM_CONST.Paths and Files Component Theme Path and Name FEATURES\Datatel Themes\DatatelTheme Datatel. For detailed procedures. you can refer to the custom components in Table 5 on page 16.css Master page FEATURES\DatatelMasterAnd Layouts\MasterPages datatelv4.thmx Stylesheet LAYOUTS\1033\STYLES\ Themable\DATATEL Datatell2010PortalMain. February 15. 2011 © 2011 Datatel. you can apply these components after the visual upgrade. Custom Equivalent FEATURES\D01 Themes\D01Theme D01Custom. LAYOUTS\1033\STYLES\Themable\ DATATEL Datatel2010PortalMainCustom.(folders) 16 Styling the Datatel Portal (SharePoint 2010). Templates Site Templates DATATEL_CONST. Table 5: Portal Styling Components . Inc. . 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. etc.Introduction: Overview to Styling SharePoint 2010 Custom Styling Components If you want to brand your SharePoint 2010 portal using custom styling components. etc.master FEATURES\D01MasterAndLayouts\ Layouts D01ConstituencyLayout.master SharePoint master page file used for migrated or new sites.(folders) Templates used in creating constituency sites and team sites.aspx Layout pages FEATURES\DatatelMasterAnd Layouts\Layouts MainConstituencyLayout.css Datatel main stylesheet file. see the Upgrading the Datatel Portal to SharePoint 2010 manual. etc.aspx.thmx Description Datatel theme file. available from the Documentation area of the Datatel client website.

Inc. 2011 © 2011 Datatel. A layout page does not include specific web parts. SharePoint auto-generates the stylesheet (CSS) file and images for the theme on-the-fly. When a theme is applied. This makes it easier to change the general look and feel of a site. Styling the Datatel Portal (SharePoint 2010). Site template. and a search box. a tool bar that is not part of the main master page might be needed for other pages in the portal. My Site. and stores them in the _themes folder of the site where the theme is applied. This includes web part zones and their locations.Styling Components Styling Components The following are summaries of each of the styling components that you can use to customize your SharePoint 2010 portal. see “Understanding Themes” on page 22. When you change one file. A master page defines the elements that are common to all pages in a SharePoint top-level site and its subsites. Stylesheet. A custom site template allows you to define the properties of new sites created using the template. Those are defined in the template files. a layout page defines the layout of elements on a page (except for anything that is defined directly in the master page). A Datatel-delivered theme is enabled and applied to all My Sites that you create after installing the Datatel Portal software. a school logo. For example. tool bars. See “Creating Master Pages and Page Layouts” on page 47. See “Disabling the Datatel Theme on My Sites” on page 71 if you want to disable the Datatel My Site theme styling. Master page. you might decide that all constituency templates should contain the Contacts web part. the footer. This includes items such as the top banner. then all of the pages and sites using the master page are automatically updated. A custom stylesheet (CSS) file allows your institution to change colors and fonts. You can create custom site templates to define web parts or other components for all newly created sites. In combination with master pages. When you define all of these elements in one master page file. This is a personal space where users can save documents and share work with others. You can use a theme to customize the visual appearance of SharePoint. February 15. For more information. See “Creating Master Pages and Page Layouts” on page 47. and layout properties such as margins and borders. For example. Layout page. see “Creating a Custom Stylesheet” on page 38. Theme. images. 17 . and code or elements that belong in pages using a specific layout only. navigation bars. For more information. they can be referenced by all of the other pages in the portal. backgrounds.

those changes take effect immediately. Custom master pages and page layouts. After you create a site from a template. the changes take effect immediately. Customize these during the design and construction of a site but not after it is up and running. Custom templates. 2011 © 2011 Datatel. Technical Tip: After you create a site. You can modify custom master pages and page layouts at any time. before you create a site or after it is live. When you apply your CSS modifications to a site. they are like blueprints for a site. changes made to the template are not reflected in any existing sites. you can provide users with a customized My Site theme page that uses colors from the main Client portal. Timing Your Styling Customizations When you plan your customizations. February 15. you should use the SharePoint interface to make any necessary changes to properties that are defined in the template.Introduction: Overview to Styling Otherwise. Inc. Because templates are used for site creation only. Other tasks should be performed during the planning phase and as you create a site. then the changes will be seen immediately in a site using the master page. If a site is using a master page and you update the code in the master page. You can customize stylesheet (CSS) files anytime. 18 Styling the Datatel Portal (SharePoint 2010). 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 already references a CSS file and you update the file. . See “Creating My Sites with a Custom Theme” on page 72 for more information. there are styling tasks that you can perform at any time – either before you create a site or after it is live. CSS files.

Styling the Datatel Portal (SharePoint 2010) Styling Procedures .

.

February 15. 21 . 2011 © 2011 Datatel. Inc.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: Topics in This Chapter Topic Understanding Themes Procedures for Customizing Themes 22 26 Page Styling the Datatel Portal (SharePoint 2010). Table 6 lists the topics covered in this chapter.

SharePoint generates a new set of CSS files and images with the result of this substitution. Medium. Text and Background (4). You can also choose to modify the colors contained in the Datateldelivered theme. Light 1. and even recolor images with a tint. Modifying Color Swatches SharePoint 2010 provides ten color swatches that you can modify if you want to change a theme. A specific Datatel theme is delivered as a feature of the Datatel Portal. You can use the steps in “Creating a Custom Stylesheet” on page 38 if you would rather just customize the stylesheets.1 This means that you can replace Datatel-delivered stylesheet colors for fonts and solid backgrounds. Lighter. Colors named Accent 1 through Accent 6 Hyperlinks (2). the colors included in the Datatel theme align with the colors contained in the Datatel-delivered stylesheets. Colors named Dark 1. . 22 Styling the Datatel Portal (SharePoint 2010). Applying a Theme You can modify SharePoint 2010 color swatches while creating a custom theme. Note: See “Understanding Cascading Stylesheets” on page 36 for an overview of Datatel-delivered stylesheets. This theme is provided to give you a head start in creating your own custom theme. You can map which colors apply to the interface and where. For example. Darker. See Figure 1 on page 23. Inc. These ten colors contain five shade variations (Darkest.Styling Procedures: Creating Custom Themes Understanding Themes SharePoint 2010 gives you the ability to make styles into a theme. Colors named Hyperlink and Followed Hyperlink 1. Light 2 Accents (6). Dark 2. February 15. and Lightest) that are determined when the new theme is applied. The default SharePoint CSS files are tagged with comments that tell SharePoint to substitute colors and images with the values from the theme. 2011 © 2011 Datatel. If you switch themes.

February 15. Figure 2: Datatel Background Color Selections Styling the Datatel Portal (SharePoint 2010). and Light 2). when used for text. Accent Colors are visible over all possible background colors (Dark 1. when used for text. The Dark 1 and Dark 2 colors. 23 .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. 2011 © 2011 Datatel. Modifying Text and Background Colors Text and background colors have the following visibility rules: Light Background. are always easily legible over the Dark 1 and Dark 2 background colors. Light 1. The Light 1 and Light 2 colors. are always easily legible over the Light 1 and Light 2 background colors. See Figure 2 on page 23. Inc. Dark Background. Dark 2.

G 243. Table 7: Datatel Theme Colors Color Light 1 RGB Values R 255. G231. 2011 © 2011 Datatel. G 213. . weekend day. B 235 Dark 1 R 51. G 51. B 118 Accent 1 R 188. Make sure to name and save your theme. G 77. G 255.Styling Procedures: Creating Custom Themes Modifying Datatel Theme Colors You can modify the colors contained in the Datatel theme. B 236 24 Styling the Datatel Portal (SharePoint 2010). Inc. G 96. B 77 R 141. 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. B 51 Dark 2 R 22. February 15. 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. B 240 Accent 2 Accent 3 R 77.

G 174.Understanding Themes Table 7: Datatel Theme Colors (cont’d) Color Accent 4 RGB Values R 220. G 174. B 120 Hyperlink Followed Hyperlink R 77. B 77 R 0. G 0. 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. February 15. G 77. B 120 Accent 6 R 181. 25 . G 220. B 0 Styling the Datatel Portal (SharePoint 2010). Inc. 2011 © 2011 Datatel.

click Site Actions and then Site Settings. you may want to identify which colors to use. Table 8 lists the topics covered in this section. You can follow the steps in “Creating Custom Themes” on page 30. . Inc. Step 2. Click Site theme in the Look and Feel category. Note: You may want to create a series of custom themes as you test out your color choices and styles. Step 3. In a browser. 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. At the left end of the SharePoint ribbon. February 15. then you can follow the steps in “Deploying a Custom Theme as a Feature” on page 31. After you decide on a custom theme that you would like to implement as a SharePoint feature. 26 Styling the Datatel Portal (SharePoint 2010). access the top-level site of the main portal site collection as an administrator. Perform the following procedure to identify colors for a custom theme.Styling Procedures: Creating Custom Themes Procedures for Customizing Themes Use the following sets of procedures as you customize themes. 2011 © 2011 Datatel. Step 1.

Step 5.Procedures for Customizing Themes Step 4. 2011 © 2011 Datatel. Select the Datatel theme in the Select a Theme subsection as shown in Figure 3 on page 28. Styling the Datatel Portal (SharePoint 2010). Inc. February 15. 27 . select the “Specify a theme to be used by this site and all sites that inherit from it” option in the Inherit Theme section. To apply a theme. Note: You might prefer to start from any of the Microsoft themes in the list.

Datatel recommends that you make changes to the color swatches provided in the interface and preview them until you are satisfied. To help you determine which colors to use for your own theme.Styling Procedures: Creating Custom Themes Figure 3: Apply the Datatel Theme Step 6. 2011 © 2011 Datatel. 28 Styling the Datatel Portal (SharePoint 2010). February 15. Inc. .

To make color changes. 29 . To view how colors will be applied. Inc. Then choose from the colors provided or type in your own colors. 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.Procedures for Customizing Themes Step 7. When you are satisfied with your color choices. You can use a printed copy of the Custom Color Planning Worksheet for each custom theme that you create. Figure 4: Color Swatches Step 9. 2011 © 2011 Datatel. click on Preview in the Preview Theme section to view the newly themed site in a pop-up window. Step 8. Styling the Datatel Portal (SharePoint 2010). you would need to create a custom theme file. 2.2 ALERT! Make sure you have recorded your changes. They will not be stored for later use and should not be considered permanent. Instead. February 15. Any changes to the theme from this page are named as “Custom” by SharePoint and can be applied to the site. click the Select a color link next to the color swatches in the Customize Theme section (Figure 4).

thmx file. Step 4. Value) and RGB. D01Custom. continue with the steps in “Deploying a Custom Theme as a Feature”. Firefox® ColorZilla contains a color picker that allows you to choose exact colors from a website. This will download the Datatel. Saturation. HSV (Hue.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. The procedure below uses the free Microsoft ThemeBuilder application. Step 3. click Site Actions and then Site Settings. At the left end of the SharePoint ribbon. Step 7.com/ThemeBuilder. Inc. February 15. 30 Styling the Datatel Portal (SharePoint 2010). Step 5. Blue) equivalents. Save it as a custom file (for example. For example. Green. Step 1. D01Test. Note: If you want to convert hexadecimal numbers to their RGB (Red. In the Galleries section. It then provides the information as Hexadecimal numbers. If you want to deploy the new theme as a feature. 2011 © 2011 Datatel. open a custom theme file. for example: C:\Program Files\Common Files\ Step 6. such as a My Custom Themes folder on the SharePoint Server located under. Perform the following procedure to create custom themes. click Themes. you may want to locate a converter program.microsoft. For example. 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.thmx) in a folder you create. From your SharePoint server. Click on the Datatel theme. access the top-level site of the portal site collection as an administrator. Step 2.thmx.thmx or D01Custom. Using a program such as Theme Builder. .

you can Google “GUID Generator” for an online generator to use.thmx) in the D01CustomTheme\D01Theme subfolder that you created in Step 4.thmx” /> </ElementManifests> </Feature> Styling the Datatel Portal (SharePoint 2010). D01CustomTheme Step 4. Step 6. Enter your custom THMX file. you can deploy it as a feature named. Make a copy of the Datatel Themes folder including all files and subfolders. Custom Portal Theme. Save your desired custom file (for example. Step 1. You can use Visual Studio to generate a new GUID. Otherwise. D01Custom. 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. for example.Procedures for Customizing Themes Deploying a Custom Theme as a Feature Now that your custom theme is ready. For example. Inc.xml” /> <ElementFile Location=“D01Theme\D01Custom. Rename the DatatelTheme subfolder to D01Theme.xml file in the D01CustomTheme folder. Replace the existing GUID with a newly generated one. Edit the Feature.microsoft. 31 . February 15. <Feature xmlns=“http://schemas. Perform the following procedure to deploy your custom theme.com/sharepoint/” Title=“Custom Portal Theme” Description=“Portal theme with custom colors” Id=“Your unique guid here” Scope=“Site”> <ElementManifests> <ElementManifest Location=“D01Theme\Elements. Note: You will need a unique ID (GUID) for your feature. Enter a Title and Description for the feature that will be displayed to identify your custom feature. Step 5. Step 3. 2011 © 2011 Datatel. Rename the folder for your new custom theme.

Inc. February 15. click Site Actions and then Site Settings. . Go to Site Settings > Site Collection Administration > Site collection features to activate your new feature (Figure 5 on page 33).Styling Procedures: Creating Custom Themes Step 7. Step 11.com/sharepoint/”> <Module Name=“DatatelTheme” Url=“_catalogs/theme” RootWebOnly=“TRUE” > <File Type=“GhostableInLibrary” Path=“D01Theme\D01Custom.0” encoding=“utf-8”?> <Elements xmlns=“http://schemas. At the left end of the SharePoint ribbon. Step 10.thmx” /> </Module> </Elements> Step 8. Fill in the following information: <?xml version=“1. 2011 © 2011 Datatel. Edit the Elements. Install the new feature by running the following stsadm command: C:\Program Files\Common Files\Microsoft Shared\web server extensions\14\BIN\stsadm. Step 9.thmx” Url=“D01Custom. access the top-level site of the main portal site collection as an administrator.microsoft. 32 Styling the Datatel Portal (SharePoint 2010).xml Replace “Your custom theme folder here” with the name of the folder that you created in Step 3 on page 31.xml file in the D01Theme subfolder.exe -o installfeature -filename Your custom theme folder here\feature. In a browser.

At the left end of the SharePoint ribbon. Step 2. 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. 2011 © 2011 Datatel. Step 4. Step 3. Click Site Theme in the Look and Feel category. February 15. 33 . select the “Specify a theme to be used by this site and all sites that inherit from it” option in the Inherit Theme section.Procedures for Customizing Themes Figure 5: Activating Your Custom Feature Step 12. Reset IIS by entering the iisreset command at the command line. To apply a theme. In a browser. click Site Actions and then Site Settings. Applying Your Custom Theme Perform the following procedure to apply a custom theme. Styling the Datatel Portal (SharePoint 2010). Step 5. Step 1. Inc. access the top-level site of the main portal site collection as an administrator.

. Inc.Styling Procedures: Creating Custom Themes Step 6. Test out your new theme. 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. Note: Because the images are tinted. February 15. 2011 © 2011 Datatel. there may be places where the transitions between gradient images and background colors may not be as smooth as you prefer. 34 Styling the Datatel Portal (SharePoint 2010).

2011 © 2011 Datatel. February 15. Table 9 lists the topics covered in this chapter.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: 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). 35 . Inc.

Body. Body. Note: The Datatel2010PortalMain. My Classes.css contains styles specifically for the course catalog. Side Bar. Footer) Datatel2010BaseWebParts.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.css is a single file that dynamically aggregates all stylesheet references into a single location. Inc. February 15. For more information.css contains styles for specific Datatel web parts where styles are not repeated in other web parts (including MyWeek. Datatel2010WebParts.Styling Procedures: Creating Custom Stylesheets Understanding Cascading Stylesheets Microsoft® delivers various cascading stylesheets (CSS) files with the SharePoint portal. 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. header and content). and others). To override a class defined in a standard Microsoft CSS file. 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. 2011 © 2011 Datatel. 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. Footer) • Constituency Pages and Teamsites (Header. Datatel2010PortalMain. 36 Styling the Datatel Portal (SharePoint 2010). To Do List. Datatel2010CourseCatalog. see “Creating a Custom Stylesheet” beginning on page 38.css contains styles for web part properties that are shared by all web parts (title.css file. Each site created by a Datatel template will be set to use the Datatel2010PortalMain. . Microsoft also allows you to use a global custom CSS file for each SharePoint portal. Footer) • Admin and Login Pages (Header.css contains styles for: • Global Page Styles (Header.

css”. February 15. In CSS.Understanding Cascading Stylesheets The Datatel2010PortalMain. “Datatel2010CourseCatalog. Inc. “Datatel2010WebParts.css”.css” Note: The order of the files listed above is important for displaying the look and feel properly. the last style overwrites all others before it (for example. “Datatel2010BaseWebParts.css file contains the following code: @import @import @import @import “Datatel2010Core.css”. styles in Datatel2010CourseCatalog. Styling the Datatel Portal (SharePoint 2010).css take precedence over all other styles in the stylesheets above it). 37 . 2011 © 2011 Datatel.

css file into your custom stylesheet (D01Branding. They are organized based on the stylesheet from which they come. When a theme is applied.css stylesheet. Then you can copy and paste only those styles to a new custom stylesheet. Procedure for Creating a Custom Stylesheet To get started creating your own custom stylesheet. The styles contain comment tags to explain which images they reference. .Styling Procedures: Creating Custom Stylesheets Creating a Custom Stylesheet A custom stylesheet allows you to change colors and fonts.css stylesheet to help you identify which images you want to replace. you can use the Datatel2010Branding. Implementing a custom stylesheet is easy and can be done after your sites have already been created. Inc. Copy and paste image styles from the Datatel2010Branding.css. SharePoint automatically generates the stylesheet file and images for the theme on-the-fly. See “Understanding Themes” on page 22 for more information. 38 Styling the Datatel Portal (SharePoint 2010). Step 2. backgrounds. Open the Datatel2010Branding. Note: Alternatively. you can use themes to customize the visual appearance of SharePoint. Note: After you' have created your theme and determined which images need to be replaced. images. 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.css). and stores them in the _themes folder of the site where the theme is applied. Step 1. Step 3. February 15. This stylesheet includes: References to images found in the Datatel-delivered stylesheets only. Create a blank custom stylesheet with a custom name such as D01Branding. 2011 © 2011 Datatel. and layout properties such as margins and borders.

} Step 5. 2011 © 2011 Datatel. Styling the Datatel Portal (SharePoint 2010). Note: It is important that you use this exact name (Datatel2010PortalMainCustom. } 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.css.png”).css Example /*** Custom Branding Stylesheet ***/ /* Header Logo Image */ .png"). Make sure your new images contain custom names. then make sure the style path includes the new folder reference.dt-footertext { background-image:url("/_layouts/images/datatel/ D01footertext.css file and save it as Datatel2010PortalMainCustom. Step 4. Examples of two images you are likely to replace The header logo image .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.css) for the custom version of your stylesheet.png").site-image-title{ background-image:url(“/_layouts/images/Datatel/ DatatelPortal-logo2.datatelv4 .datatelv4 . 39 . } The footer text image .datatelv4 .dt-footertext { background-image:url(“/_layouts/images/datatel/ footertext. Inc.site-image-title{ background-image:url("/_layouts/images/Datatel/D01Portallogo2. February 15.datatelv4 . Open the Datatel2010PortalMain.png”). Figure 6: D01Branding. } /* Footer text image */ .

“D01Branding. 2011 © 2011 Datatel. February 15. 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. Figure 7: Adding Custom Branding to Main Stylesheet @import @import @import @import @import “Datatel2010BaseWebParts. click to Activate. “Datatel2010CourseCatalog. 40 Styling the Datatel Portal (SharePoint 2010). Go to Central Administration and select Manage web applications under the Application Management category. “Datatel2010WebParts. For the Datatel Refresh Themes entry.css”. Note: Because of a SharePoint bug in rendering the order of the stylesheets. then click to Deactivate and then Activate. Save the file. Inc. If you have applied site themes.css.css) as shown in Figure 7. you might need to change the order of the stylesheet references from that shown in Figure 7. Add a reference at the bottom of the stylesheets listed for your custom branding stylesheet (@import D01Branding. See AnswerNet page 8379 for instructions. If it is already activated. .css”. “Datatel2010Core. Select your web application in the list and click on Manage Features.css”.Styling Procedures: Creating Custom Stylesheets Step 6. your changes may not appear immediately because SharePoint caches themed stylesheet files.css”. Step 7.css”.

site-image-title{ background-image:url("/_layouts/images/Datatel/ D01PortalLogo. Note: The Datatel placeholder logo is a transparent PNG file at 301 pixels wide and 81 pixels in height. height: 90px. 2011 © 2011 Datatel. } Styling the Datatel Portal (SharePoint 2010).Changing the Logo Image Changing the logo image in the top banner will require copying the existing style from the Datatel2010Branding.datatelv4 .site-image-title{ background-image:url("/_layouts/images/Datatel/DatatelPortallogo2. 41 . width: 320px. Inc. February 15.Stylesheet Customization Examples Stylesheet Customization Examples Example 1: Stylesheet .css Custom Stylesheet . changing the image URL to reflect the new image and identifying the height and width of your new image.png ").css file into your custom stylesheet. } Figure 9: Example Change to Style in D012010Branding.css Style .png"). Figure 8: Example Datatel2010Branding. Keeping the height of your new image to 100 pixels or less is recommended.datatelv4 .

Inc. 2011 © 2011 Datatel. Keeping the height of your new image to 103 pixels or less is recommended.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. 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.css file into your custom stylesheet.datatelv4-overlaydesign{ background-image:url("/_layouts/images/Datatel/D01Headerdesignbkgrd.datatelv4-overlaydesign{ background-image:url("/_layouts/images/Datatel/Headerdesignbkgrd. . Figure 11: Example Change to Style in D012010Branding.css Style /* Datatel graphic image floating on far left of header gradient */ .png").css Custom Stylesheet /* Datatel graphic image floating on far left of header gradient */ . Figure 10: Example Datatel2010Branding. February 15.png") } 42 Styling the Datatel Portal (SharePoint 2010).

Note: The Datatel placeholder footer text image is a PNG file at 332 pixels wide and 44 pixels in height.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.png gradient image in addition to a new image for the footertext. The footer text uses the same gradient as the footer background gradient image footerpixel.png gradient image is 1 pixel wide and 44 pixels in height.png").png. 43 .css file into your custom stylesheet. It is recommended that you create a new version of the footerpixel.png").datatelv4 . 2011 © 2011 Datatel.datatelv4 . } /* Footer text image */ . The footerpixel. Inc. } Styling the Datatel Portal (SharePoint 2010).css Style /* Footer background gradient image */ .dt-footer { background-image:url("/_layouts/images/datatel/ footerpixel.png"). and will be modified by any color theme changes you made. Figure 12: Example Datatel2010Branding.png").dt-footer { background-image:url("/_layouts/images/datatel/ D01footerpixel. changing the image URL to reflect the new image and identifying the height and width of your new image.datatelv4 .datatelv4 .dt-footer { background-image:url("/_layouts/images/datatel/ D01footertext. } Figure 13: Example Change to Style in D012010Branding. } /* Footer background gradient image */ .dt-footertext { background-image:url("/_layouts/images/datatel/ footertext. February 15.png image using the same background gradient to keep things consistent.css Custom Stylesheet /* Footer background gradient image */ .

Figure 14: Example Datatel2010Branding. February 15.png"). } 44 Styling the Datatel Portal (SharePoint 2010). 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. sidebars and masterpage content */ . . A background color will be identified by your color theme for any content that extends beyond your gradient image height. Inc. changing the image URL to reflect the new image and identifying the height and width of your new image.DatatelBody{ background-image: url("/_layouts/images/Datatel/D01Backgroundgradient. It is recommended that you add a custom background color to your new style (the color at the very bottom of your Background-gradient. } Figure 15: Example Change to Style in D012010Branding.png file would be the best choice and will make for a smooth transition between your gradient and solid color).png").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. 2011 © 2011 Datatel. sidebars and masterpage content */ . background-color: # 9d2b2b.css Custom Stylesheet /* Styles to control the centering.DatatelBody{ background-image: url("/_layouts/images/Datatel/Backgroundgradient.css file into your custom stylesheet.css Style /* Styles to control the centering.

Note: The images used are in the Microsoft Images folder (and not the Datatel Images folder). February 15. These gradient images contain transparency. 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.Stylesheet Customization Examples Example 5: Stylesheet . 45 . 2011 © 2011 Datatel.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. Styling the Datatel Portal (SharePoint 2010). 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. Inc.

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.

Layout Pages In combination with master pages. For example. The Datatel constituency template has a default. Styling the Datatel Portal (SharePoint 2010).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. A layout page does not include specific web parts. Inc. Those are defined in the template files. 2011 © 2011 Datatel. and code or elements that belong in pages using a specific layout only. 49 . February 15. This includes web part zones and their locations. a tool bar that is not part of the main master page might be needed for other pages in the portal. a layout page defines the layout of elements on a page (except for anything that is defined directly in the master page).aspx layout page that contains web part zones where you can add web parts.

Different templates might then identify completely different sets of web parts that go into each of these zones.Styling Procedures: Creating Master Pages and Page Layouts Various portal pages can share the same layout while containing completely different content. For example. . 2011 © 2011 Datatel. Note: Layout pages are not used by team sites.aspx page defined in the site template defines the layout of the page. For team sites. 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. February 15. the default. a layout page might define three columns with several web part zones in each column. Master Page Layout Page Content: Faculty Web Parts 50 Styling the Datatel Portal (SharePoint 2010). Inc.

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. 51 . locate the DatatelMasterAndLayouts subfolder. Step 5. Edit the Feature.master Styling the Datatel Portal (SharePoint 2010). For example: <Feature Id=“{72FDF19D-73ED-47ec-B3C2-7BEE6CF60AAF}” will be replaced with <Feature Id=“Your new GUID here” Step 6. D01v4. Inc.xml Layouts\MainConstituencyLayout. Create a new folder that will hold the new custom feature. Use Visual Studio to generate a new GUID.xml ProvisionedFiles. For example. February 15. 2011 © 2011 Datatel.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. In this same folder. Access the MasterPages subfolder in your custom feature folder and rename the file datatelv4. Copy the following files and folders from DatatelMasterAndLayouts to the new custom feature folder D01MasterAndLayouts: Feature.master with your new master page name. D01MasterAndLayouts Step 3. For example.aspx MasterPages\datatelv4.xml file in your new custom D01MasterAndLayouts folder and replace the old GUID with the newly generated one. Step 1.master Step 4.

xml”/> <ElementFile Location=“MasterPages\D01v4. For example. For example. Follow the samples included in the file for Datatel. one for each of your new custom files (D01v4.xml file to define a module for each of your two files. At the end. 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.xml file and modify the ElementManifest element to include only ElementFile elements for your custom master pages and layout pages. this file should contain only two modules.xml Step 11.exe -o installfeature -filename D01MasterAndLayouts\feature. February 15. Edit the Feature.master and D01ConstituencyLayout.master” Type=“GhostableInLibrary”> <Property Name=“ContentType” Value=“master page” /> <Property Name=“MasterPageDescription” Value=“Custom Master Pages for D01” /> </File> </Module> Step 9.Styling Procedures: Creating Master Pages and Page Layouts Step 7.aspx with your new page layout name. For example. the D01. .master”/> </ElementManifests> Step 10.master module would look like this: <Module Name=“CustomMaster” Url=“_catalogs/master page” Path=“MasterPages”> <File Url=“D01v4.aspx Step 8. Access the Layouts folder and rename the file MainConstituencyLayout. Edit each of your two new files to make the desired changes using HTML and ASP. 2011 © 2011 Datatel. D01ConstituencyLayout. Inc. 52 Styling the Datatel Portal (SharePoint 2010).aspx). Edit and modify the ProvisionedFiles. your new ElementManifest element might look like this: <ElementManifests> <ElementManifest Location=“ProvisionedFiles.

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. 2011 © 2011 Datatel. Styling the Datatel Portal (SharePoint 2010). February 15. 53 . Inc. 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”.Creating a Custom Master or Constituency Site Layout Page Step 12.

multipages_helplink_accesskey%>" id="A4" title="<%$Resources:wss. you will see the following code in the D01v4. 2011 © 2011 Datatel.master in your new feature folder.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> <!-.png" alt="<%$Resources:wss. Inc.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. . 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.You will add a link here. February 15.multipages_helplinkalt_text%>" runat="server"><img id="Img2" src="/_LAYOUTS/DATATEL/images/ help. Before making any updates.multipages_helplinkalt_text%>" border="0" runat="server" /></a></div> </div> Figure 19: Before Updating Header Link 54 Styling the Datatel Portal (SharePoint 2010). 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_helplinkalt_text%>" runat="server"><img id="Img2" src="/_LAYOUTS/DATATEL/images/ help. 55 .png").multipages_helplinkalt_text%>" border="0" runat="server" /></a></div> </div> Figure 20: After Updating Header Link In the branding stylesheet. you will see the following code in the D01v4. position:relative. display: inline.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. background-repeat:no-repeat.png" alt="<%$Resources:wss. margin:4px 4px 3px 21px. the CSS style helpdesk needs to be defined as shown in the following sample stylesheet (Figure 19): /* HelpDesk button in header */ .Master Page and Page Layout Examples After making updates.multipages_helplink_accesskey%>" id="A4" title="<%$Resources:wss.helpdesk{ top: 1px. height:22px. border: 1px solid transparent. 2011 © 2011 Datatel. float:left. Inc.datatelv4 . } Styling the Datatel Portal (SharePoint 2010). February 15.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. width:22px. /* [RecolorImage(themeColor:"Accent1".method:"Tinting")] */ background-image:url("/_layouts/images/datatel/myschool/ helpcenter.

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. Add a new WebPartPages:WebPartZone control. Inc.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. .aspx) using an HTML editor. 2011 © 2011 Datatel. For example. D01ConstituencyLayout. to add a new zone called Top CenterLeft that would go to the left of the TopCenter zone. edit the page (for example.

February 15. 2011 © 2011 Datatel. Table 11 lists the topics covered in this chapter.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. 57 . 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). Inc.

using standard SharePoint methods. The template specifies: The master page used for the site. . 58 Styling the Datatel Portal (SharePoint 2010). and it is this file that you will modify to create your custom template. Later changes to the template are not reflected in sites previously created from that template.Styling Procedures: Creating Custom Templates Understanding Templates Table 12 lists the concepts covered in this section. which in turn defines the web part zones where web parts are placed. The web parts on each page. A template consists of a group of files that live in the file system in the SharePoint server. The page layout used for each page. 2011 © 2011 Datatel. This is the file that includes most of the specifications listed above. The lists and list templates available in the site.xml file. The stylesheets used to define the look and feel of the site. Note: The template only affects the site when it is created. Inc. February 15. a template is used to define the initial design of the site. 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. Any SharePoint features that are available in the site. These site attributes can all be changed after the site is created. Included in the files that make up the template is the onet.

you might want to create a custom class site template if you plan to create class sites from all of your Colleague course sections. For more information about constituency and team site templates. Styling the Datatel Portal (SharePoint 2010). for example for training purposes. For example. February 15. Automatically applied when a department team site is created from a Colleague organization department. You select this template when you create a course catalog site collection. Each template is a folder under that location. Inc. Automatically applied when a constituency site is created from the Organization Constituencies (OCON) form in Colleague. 2011 © 2011 Datatel. On the other hand. 59 . Custom Templates You can create custom versions of the templates provided by Datatel. Automatically applied when a class team site is created from a Colleague course section. You can select this template if you want to create a SharePoint publishing site with the same look as the rest of the portal. constituency and team site templates are applied automatically when those sites are created from Colleague. 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. Automatically applied when a social team site is created from a Colleague campus organization. Because any change made to the template can also be made in the site after it is created. see “Template Naming Conventions” on page 60. As noted in Table 13. 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. the Datatel site collection template is in the DATATEL_SITE_COLLECTION folder. For example.Understanding Templates Datatel-Provided Templates Datatel provides the templates listed in Table 13. it would probably not make sense to create a custom site collection template unless you expected to repeatedly create new site collections. it makes sense to create a custom template only if you expect to create multiple sites of that type.

This template must be named CUSTOM_CONST_constituencyID.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. Your custom template (if you choose to create one) for all constituencies that don’t have a specific template. This template is named DATATEL_CONST. To use the Datatel template. February 15. 60 Styling the Datatel Portal (SharePoint 2010). Template Selection for Constituency Sites Datatel provides the constituency site templates listed in Table 14. named DATATEL_CONST_constituencyID. This template must be named CUSTOM_CONST. When the site is created. where constituencyID is the Colleague constituency ID that you enter at the Constituency LookUp prompt when you access the Organization Constituencies (OCON) form. Inc. Example: CUSTOM_CONST_STUDENT A Datatel-provided template for this constituency. You can create your own custom templates for specific constituency sites or a custom template to apply to all sites that don’t have their own templates. The Datatel-provided generic template for all constituencies that don’t have a specific template. the Colleague constituency ID that you enter when you create the constituency must match the value shown in Table 14. Datatel provides the constituency site templates listed in Table 14. 2011 © 2011 Datatel. 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. a template is selected as described below for each type of site. .

DATATEL_CO. DATATEL_DEPT. Styling the Datatel Portal (SharePoint 2010). to be used for all department team sites created from Colleague organization departments. it will be used instead of the DATATEL_CO template. to be used for all social team sites created from Colleague campus organizations. it will be used instead of the DATATEL_DEPT template. 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.Understanding Templates Template Selection for Class Team Sites Datatel delivers one template. 2011 © 2011 Datatel. You can create a template named CUSTOM_CS for all class sites. If the CUSTOM_DEPT template exists. You can create a template named CUSTOM_CO for social sites. If the CUSTOM_CO template exists. You can create a template named CUSTOM_DEPT for department sites. to be used for all class team sites created from Colleague course sections. DATATEL_CS. Inc. February 15. 61 . Template Selection for Department Team Sites Datatel delivers one template.

Styling Procedures: Creating Custom Templates Procedure for Creating a Custom Template Perform the procedure below to create a custom template.xml file. See “Template Naming Conventions” on page 60 for guidance in selecting the folder name.xml file and place the copy in the same folder. create the custom template by making a copy of the folder for an existing Datatel template. to create a custom generic constituency template.xml. This is your custom manifest file. Suggested name for the new file: webtempcustom. On your SharePoint server. b. in the C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\1033\XML folder. Step 2. February 15. Open the custom manifest file in a text editor. copy the existing DATATEL_CONST folder and name the new folder CUSTOM_CONST. Step 1. Perform the following steps to create a custom manifest file that references your custom templates: a. 2011 © 2011 Datatel. Locate the webtempdatatel. . Those guidelines must be followed to ensure that the template is selected when sites are created from Colleague. 62 Styling the Datatel Portal (SharePoint 2010). Inc. 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. Make a copy of the webtempdatatel. c. For example.

2011 © 2011 Datatel. enter the name of the template folder that you created in Step 1 on page 62. Under the new template folder that you created in Step 1 on page 62. enter a free-form description that will identify your template when viewed in the template gallery. Step 4.xml file in a text editor.xml file. Save your changes to the custom manifest file. • For ID. A good best practice is to start IDs using numbers above 5000 so they don’t conflict with Microsoft or Datatel templates. Save your changes to the onet. e. • For Template Name. Figure 22 shows an example of the <Template Name> section for a custom generic constituency template. To test the new template. Step 5. This ID is not directly tied to the template code. See “Template Customization Examples” on page 64 for examples of template changes you can make by modifying the onet.xml file. Remove the existing <Template Name> sections from the file. • For Description.xml file. Inc. 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. Step 6. go to your portal site collection and use standard SharePoint methods to create a site. open the onet. enter any number that is unique (not already used in one of the other “webtemp” files). and insert a new <Template Name> section for each of your custom templates.gif"> </Configuration> </Template> Step 3. selecting your new custom template. Make the desired changes to the onet.Procedure for Creating a Custom Template d. Step 7. 63 . Styling the Datatel Portal (SharePoint 2010). February 15. Reset IIS by entering the iisreset command at the Windows command prompt. in the XML subfolder.

Styling Procedures: Creating Custom Templates Template Customization Examples This section provides examples of template customizations that you can make by editing the onet. Culture=neutral. 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. Datatel. .0.Portal.WebPart.MyToDoPart.My To Do --> <AllUsersWebPart WebPartZoneID="CenterLeftColumn" WebPartOrder="2"><![CDATA[ <webParts> <webPart xmlns="http://schemas.com/WebPart/v3"> <metaData> <type name="Datatel.Portal. Inc. Figure 23: Section in the onet.MyToDo. Figure 23 is an example for the My To Do web part.WebPart.xml File for the My To Do Web Part <!-.xml file. Table 15 lists the topics covered in this section.WebPart. PublicKeyToken=55c547a3498c89fb" /> <importErrorMessage>Cannot import the Datatel. Version=1.xml file.microsoft. 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.MyToDoPart Web Part.0. 2011 © 2011 Datatel. February 15.</ 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).MyToDo.MyToDo.0.Portal.

Unread Messages --> <AllUsersWebPart WebPartZoneID="CenterUnreadMessages" WebPartOrder="1"><![CDATA[ <webParts> <webPart xmlns="http://schemas.microsoft. open the onet. copy the section of text for that 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. Example 2: Modifying Web Part Properties Each web part has its own section of text in the <Modules> section of the onet.0. Figure 24: Section in the onet.WebPart. Culture=neutral.UnreadMessages Web Part.UnreadMessages.xml File for the Unread Messages Web Part <!-.Portal. Version=1. Figure 25 on page 66 shows that section of text after the changes.xml file. Removing a web part To remove a web part from a template. simply remove that section of text from the onet.UnreadMessages.” The web part will be provided with a border by changing the chrome type from None to Default.UnreadMessages. Figure 24 is an example for the Unread Messages web part.Portal. and paste it into the onet. PublicKeyToken=55c547a3498c89fb" /> <importErrorMessage>Cannot import the Datatel.xml file for your custom template.xml file.UnreadMessages. 2011 © 2011 Datatel. the properties emphasized in Figure 24 will be modified: The web part will be moved to a different zone on the page.WebPart. February 15.com/WebPart/v3"> <metaData> <type name="Datatel.0. Styling the Datatel Portal (SharePoint 2010). 65 .Template Customization Examples Adding a web part To add a web part to a template.Portal. Inc.xml file for a template that does have that web part. Datatel. The title of the web part will be changed from “Unread Messages” to “Unread Mail.0.WebPart.

add a reference to the new feature in the <WebFeatures> section in the <Configuration> section of the onet.Your Custom Feature --> <Feature ID="67602aca-f66a-4a43-adff-1360ed2fa8f7"> </Feature> 66 Styling the Datatel Portal (SharePoint 2010).Portal.UnreadMessages. such as a custom list or a feature that will deliver a custom master page. 2011 © 2011 Datatel. you give it a new “GUID” (unique ID).Datatel My Bookmarks List Instance --> <Feature ID="D99ED157-5440-4cc4-A154-0532194C55ED"> </Feature> Existing text Your new text <!-.0.Portal. Culture=neutral.xml File for a Custom Feature <WebFeatures> <!-.xml file. For this feature to be automatically activated in sites created from your custom template. Version=1.</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.WebPart. . When you create a new feature.Portal.Datatel Events List Instance --> <Feature ID="12E549A4-30B4-4969-B060-144016E58640"> </Feature> <!-. Inc.com/WebPart/v3"> <metaData> <type name="Datatel.Styling Procedures: Creating Custom Templates Figure 25: The Same Section After Changes to the Web Part Properties <!-. February 15.UnreadMessages Web Part.Unread Messages --> <AllUsersWebPart WebPartZoneID="CenterLeftColumn" WebPartOrder="1"><![CDATA[ <webParts> <webPart xmlns="http://schemas.UnreadMessages. Figure 26: Section in the onet. PublicKeyToken=55c547a3498c89fb" /> <importErrorMessage>Cannot import the Datatel.0.0.WebPart.WebPart. Figure 26 is an example. Datatel.UnreadMessages.UnreadMessages.microsoft.

add the section of text shown in Figure 27 to the <Lists> section within the <Configuration> section of the onet. To add a document library to all sites created from a template. Figure 27: Section in the onet.lists_Folder. Figure 27 is an example for a library called “Assignments by Students.xml file. 67 ./AssignmentsByStudents"> </List> </Lists> Styling the Datatel Portal (SharePoint 2010). you will need to create the opening <Lists> tag and closing </Lists> tag. A document library is a SharePoint list with a type of 101.Template Customization Examples Example 4: Adding a Document Library A SharePoint site can contain any number of document libraries.xml File for a Document Library <Lists> <List Type="101" Title="Assignments by Students" Url="$Resources:core.” If the <Lists> section (plural Lists) does not exist. Inc. 2011 © 2011 Datatel. February 15.

February 15.Styling Procedures: Creating Custom Templates 68 Styling the Datatel Portal (SharePoint 2010). . 2011 © 2011 Datatel. Inc.

February 15. 2011 © 2011 Datatel. Table 16 lists the topics covered in this chapter. Inc. 69 . 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).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.

February 15. Note: See “Disabling the Datatel Theme on My Sites” on page 71 if you want to disable the Datatel My Site theme styling. . Datatel My Sites styling takes advantage of the SharePoint 2010 theming framework. if desired.thmx) coordinates with the Datatel Portal look and feel. If you decide to keep My Sites available for your constituencies. Inc.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. 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. 2011 © 2011 Datatel. Note: The Datatel custom theme (Datatel. you can provide users with a customized My Site theme using the steps in “Creating My Sites with a Custom Theme” on page 72 (or you can continue to use the default My Site theme page that uses colors from the main Client portal). Figure 28: My Site with Datatel Theme Colors 70 Styling the Datatel Portal (SharePoint 2010).

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

At the left end of the SharePoint ribbon. click Site Theme.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. Click Apply. . Step 4. Inc. select your custom theme (Figure 30). Step 2. In the Look and Feel section. On the Site Theme page. Use the URL that you determined in “Determining the My Sites Host URL” on page 73. access My Sites host page as an administrator. click Site Actions and then Site Settings. 2011 © 2011 Datatel. Step 1. In a browser. Figure 30: Selecting your Site Theme 74 Styling the Datatel Portal (SharePoint 2010). . Step 5. February 15. Step 3.

use a text editor to create a new file. so there is no risk of your changes being overwritten by future updates to the My Site template. Step 4.0" Scope=“Farm” Hidden=“TRUE” xmlns=“http://schemas. You may decide to use a custom theme as the default for all new My Sites. Note: You will need a unique ID (GUID) for your feature. To apply a theme to existing 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. Make a note of your unique GUID (featureid) for use in the next procedure.0” encoding=“utf-8” ?> <Feature Id=“Your unique guid here” Title="My Site Theme Stapling" Description=“My Site Theme Stapling” Version="12. Create a folder named D01MySiteThemeStapling.0.xml”/> </ElementManifests> </Feature> Step 5. 75 . Step 3.microsoft. you can Google “GUID Generator” for an online generator to use. Styling the Datatel Portal (SharePoint 2010). You can use Visual Studio to generate a new GUID.0. Inc. Perform the steps below to staple your custom theme to the My Site template. for example. Otherwise. Any personal My Sites created after you perform this procedure will use the custom theme. 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. Step 1. February 15.com/sharepoint/”> <ElementManifests> <ElementManifest Location=“basesitestapling. To apply a custom theme to users’ My Sites. 2011 © 2011 Datatel. use the procedure in “Applying a Theme to Existing My Sites” on page 78. Add the text below to the new file: <?xml version=“1.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. In the new folder.

Reset IIS by entering the iisreset command at the command line. replacing the custom theme name with the one you creating using the procedure in “Creating Custom Themes” on page 30. 76 Styling the Datatel Portal (SharePoint 2010). Add the following text to the file.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. Step 8. use a text editor to create another file. . the custom theme must be implemented as a feature.xml. Step 10. Save the file as feature.xml. Inc. Technical Tip: For a custom THMX file to be applied to My Sites. In the D01MySiteThemeStapling folder. Save the file as basesitestapling.microsoft. Step 7.Styling Procedures: Styling My Sites Step 6. <Elements xmlns=“http://schemas. February 15. 2011 © 2011 Datatel. 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.

February 15.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. Replace D01MySiteThemeStapling with the name of your feature folder. Figure 31: Logging into My Site Step 13. Step 12. run: stsadm -o installfeature -filename D01MySiteThemeStapling\feature.Creating My Sites with a Custom Theme Step 11. log into SharePoint as a user who has never been to this particular My Site. run: stsadm -o installfeature -filename D01MySiteThemeStapling\feature. If this is a new feature. 2011 © 2011 Datatel. To test the changes. 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). 77 .xml If you just updated your custom feature to change the theme ID. Install the new feature by running the following stsadm command. Inc.

enter the following command to enable the theme feature on the My Sites host: Enable-SPFeature -identity "custom_theme" -URL MySitesHostURL For custom_theme.0 from Portal 2. 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). use the procedure in “Specifying a Custom Theme for New My Sites” on page 75. Any My Sites would have been migrated but would have no theme applied. On your SharePoint server. access Windows PowerShell. In Windows PowerShell.Styling Procedures: Styling My Sites Applying a Theme to Existing My Sites Note: This procedure applies a theme to existing My Sites. 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). . The procedure below applies your custom theme to the existing My Sites. February 15. Your portal might have existing personal My Sites to which you want to apply the Datatel theme or a custom theme. You can use the procedure below to apply either the Datatel theme or your own custom theme to those migrated My Sites. Inc. substitute the URL that you determined in “Determining the My Sites Host URL” on page 73.6. Step 2. substitute Datatel Themes if you are applying the Datatel-delivered theme. you decide to create a custom theme. Examples include: After you implemented the Portal and some users created My Sites.x. You migrated to Portal 3. For MySitesHostURL. To specify a custom theme to be used in My Sites created in the future. Step 1. 2011 © 2011 Datatel. Perform the procedure below to apply a theme to existing My Sites.

WebTemplate -eq "SPSPERS"} Example: $personalSites = get-spsite http://sdsp10w8wfe:80/my/* -Limit ALL | where {$_. February 15. 2011 © 2011 Datatel.RootWeb. First command.WebTemplate -eq "SPSPERS"} b. 79 . Inc. entered all on one line: $personalSites = get-spsite MySitesHostURL/* -Limit ALL | where {$_. 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).Url} Step 4.Url} Example for a custom theme: foreach ($site in $personalSites) {Enable-SPFeature -Identity "D01CustomTheme" -Url $site.RootWeb. Enter the following commands to enable the theme feature on individual My Sites: a.Applying a Theme to Existing My Sites Step 3. entered all on one line: foreach ($site in $personalSites) {Enable-SPFeature -Identity "custom_theme" -Url $site. all on one line. Enter the following command. Second command.Url} Example for the Datatel theme: foreach ($site in $personalSites) {Enable-SPFeature -Identity "Datatel Themes" -Url $site.

WebTemplate -eq "SPSPERS"} Example: $personalSites = get-spsite http://sdsp10w8wfe:80/my/* -Limit ALL | where {$_.Styling Procedures: Styling My Sites Step 5. Second command. .Url -Confirm:$false} c. First command.RootWeb. Inc. February 15. entered all on one line: foreach ($site in $personalSites) {Disable-SPFeature -Identity "DatatelMySiteThemeReceiver" -Force -Url $site.WebTemplate -eq "SPSPERS"} b. Third command. 2011 © 2011 Datatel.RootWeb. entered all on one line: $personalSites = get-spsite MySitesHostURL/* -Limit ALL | where {$_. Enter the following commands to enable the DatatelMySiteThemeReceiver feature on individual My Sites: a.Url} 80 Styling the Datatel Portal (SharePoint 2010). entered all on one line: foreach ($site in $personalSites) {Enable-SPFeature -Identity "DatatelMySiteThemeReceiver" -Url $site.

Styling the Datatel Portal (SharePoint 2010) Appendices .

.

Green. B 0 Styling the Datatel Portal (SharePoint 2010). then you can look online for a free converter. Inc. Figure 33: Example Color Conversion Color Name Red Hexadecimal FF0000 RGB R 255. 83 . Blue) equivalents (Figure 33). February 15.Appendices Custom Color Planning Worksheet In This Appendix You will need to convert your hexadecimal numbers to their RGB (Red. For example. Note: To convert hexadecimal numbers to their RGB equivalents. G 0. If you do not have design software with this capability. you may want to locate a converter program. 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. 2011 © 2011 Datatel.

B 118 R 188. . B 77 R 0. G 243. B 255 R 244. B 220 R 255. B 0 84 Styling the Datatel Portal (SharePoint 2010). G 96. G 51. 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 174. G 77. G231. B 236 R 220. G 77. B 77 R 141. G 0. 2011 © 2011 Datatel. February 15. B 240 R 77. B 235 R 51. G 174. G 220. B 51 R 22. B 120 R 181. B 120 R 77. G 255. Inc. See “Modifying Datatel Theme Colors” on page 24 for more information. Note: The values contained in Datatel-delivered colors are included in the worksheet for your convenience. G 213.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.

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). 85 .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. Inc. 2011 © 2011 Datatel. February 15.

Scroll down and click Add new item at the bottom of the list of themes. To apply your custom theme. 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. For those images and any branding images (like the logo and the footer text). Then browse to find your custom theme and upload it. 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. 86 Styling the Datatel Portal (SharePoint 2010). Because images are tinted. If you are implementing My Sites. go to Site Settings > Look and Feel > Site Theme. Inc. then you can implement your custom theme as a feature. After it is implemented. there may be places where the transitions between images and background colors are not always as smooth as you would like. February 15. create your own custom images and stylesheet. 2011 © 2011 Datatel. Go to Site Settings > Site collection administration > Site Collection Features to make sure your custom theme is activated. Then go to Site Actions > Site Settings > Galleries > Themes. your custom theme must be implemented as a feature to be readily available to the newly provisioned personal sites. Test out your new theme. . 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.Appendices: FAQs and Tips & Tricks Frequently Asked Questions (FAQs) The following are frequency asked questions regarding styling the Datatel Portal. you activate the feature for a site collection where you need it.

Go to Central Administration and select Manage web applications under the Application Management category. Inc. 2011 © 2011 Datatel. February 15. your changes may not appear immediately because SharePoint caches themed stylesheet files. If it is already activated. For the Datatel Refresh Themes entry. click to Activate. 87 .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. Styling the Datatel Portal (SharePoint 2010). Select your web application in the list and click on Manage Features. then click to Deactivate and then Activate.

You should consider how this will impact other users of the server when deciding where to test custom templates. 2011 © 2011 Datatel. images.xml in a site template. scripts. Creating a separate test site collection for 88 Styling the Datatel Portal (SharePoint 2010). You must create a site every time you make changes to onet. and stylesheet files. Examples of shared items include templates. you must reset IIS from the command prompt. This is one of the most important decisions you will make when implementing the Datatel Portal. or change the properties of a web part). Every time you make a change to onet.xml in a site template.xml. Therefore. you will likely have to create many new sites to test the changes.Appendices: FAQs and Tips & Tricks Tips and Tricks Basic Testing Concepts You institution may choose to have one constituency site or several dozen. Every time you make a change to onet. 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. If you are making changes to site templates. Inc. for example. creating new websites for testing in your production server. 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. You must reset IIS for any changes made to onet. This means that if you use IIS to create several virtual sites in the server where you have SharePoint installed.xml. This makes looking at files and moving them around easier. It is not sufficient to just stop and restart a single 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. you must reset IIS and create a new site. February 15. 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. You can use the following information to help you: SharePoint installation components are shared by all sites in a server. 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. Use a separate site collection to test template changes.xml (to add or remove a web part. Customization only affects files in the file system of the server. all of those sites will share the same SharePoint server components.

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. After you are satisfied with the changes. Styling the Datatel Portal (SharePoint 2010). 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. If you click on Select Element by clicking the arrow icon from the tool bar. 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. This tool allows you to be able to see a web page and the HTML code for the page side by side. This allows you to quickly restore a file to its original version if something goes wrong. Because many server components are shared between all websites in a server (for example. After you are satisfied with your changes. To find out which classes are associated with each HTML tag. delete the test site collection and create a new one for further testing. and stylesheet files). you may consider saving temporary copies of the files you are overwriting in addition to your regular backup strategy. start a new browser session and go to Tools > Developer Tools. you can click anywhere on the page and it shows what the HTML code for that segment looks like. Our recommendation is that you make changes to templates and stylesheets in a development environment. it is risky to test changes in a production server even if you are using a separate website in that server. To open the IE Developer Tools. 89 . February 15.Tips and Tricks each batch of testing makes it easier to manage the newly created sites. images. 2011 © 2011 Datatel. templates. move the necessary files to the test environment and test there. If all tests are successful. Internet Explorer Developer Tools: Part of making changes to CSS files involves knowing which classes to change to modify each element on the page. We recommend using the Microsoft tools for Internet Explorer that make this task easier. you would typically open the page and examine the source code to find out which style class you should be touching. Inc.

Inc. D01CSSMAIN_10_13_2011. 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. . You can save this temporary copy in a folder called “old” somewhere in your server. then restore the file to the version prior to the last update. Include the date of the update as part of the name of the file. After you are finished with your intended changes. 90 Styling the Datatel Portal (SharePoint 2010). copy each individual folder or file you changed to the target server using any operating system copy tools. save a copy of the file in the production server before overwriting it with a new version. You will discover that they tend to be the same sets of files frequently.css.Appendices: FAQs and Tips & Tricks For example. If a change causes pages to stop working or you run into other issues. so it’s easy to create a permanent list to check against every time. for example. from test to live) is quite straightforward. moving changes from one server to another (for example. after you are certain the changes you applied to production were not disruptive. Copy and paste works fine for most changes because these tend to be relatively small files. February 15. You can delete all files from this “old” folder periodically. 2011 © 2011 Datatel. Keep a list of the files you changed in your test environment. if you are making changes to your main stylesheet file.

css. configure it properly in central administration. it will be a much longer process to change everything. Keep the original Datatel stylesheets on the DatatelPortalMain. 91 . Use all branding stylesheets – not just individual ones. February 15. There are a lot of pages to update and content that you might not be seeing.Create menu • Site Actions .css because it will be overwritten during upgrades. start with a global find and replace on all of the colors you want to change. When doing a complete rebrand (color swap). 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 . If you try to pick and choose elements. If you do not want them. 2011 © 2011 Datatel. Do not remove the My Sites link from the master page. When performing a custom brand.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. Inc.Site Settings menu Styling the Datatel Portal (SharePoint 2010). Add your custom @imports below them. Make a backup copy of your DatatelPortalMain.

Inc.Appendices: FAQs and Tips & Tricks 92 Styling the Datatel Portal (SharePoint 2010). 2011 © 2011 Datatel. February 15. .

Sign up to vote on this title
UsefulNot useful