Microsoft Office FrontPage 2003      
Developer's Toolkit
Resources | Links | Search
  extend design code  
             
  New Features
 
Microsoft® Windows® SharePoint Services
 
Microsoft® Office SharePoint Portal Server
 
Microsoft Office System
 
.NET Framework
 
 
Real world scenarios that fully expose great new functionality in FrontPage 2003 and Windows SharePoint Services.
 
 
  financial planning finance  
  sales & marketing sales & marketing  
  human resources human resources  
   
  FrontPage Developer's Toolkit > Windows SharePoint Services > Articles
 

Advanced Customization of Themes for Sites Created with Windows SharePoint Services

Advanced customization

Using the Colors, Graphics, and Text buttons on the Customize Theme dialog box gives you many options for customizing your Theme. However, the true power to customize any element in a Theme is found when you learn to identify the styles that affect the elements you want to change in a site, and then learn how to change them with FrontPage 2003.

FrontPage 2003 Themes use industry-standard Cascading Style Sheets (CSS) to apply font and formatting rules across Web pages and Web sites. However, you don't need to know much about CSS to create sophisticated FrontPage Themes because the FrontPage user interface allows you to visually specify style choices, therefore shielding you from the complexities of CSS so you can concentrate on your site design.

Identifying the styles that change key elements

Now that you know that CSS is at the heart of FrontPage Themes, you will need a way to tell which element is affected by which style. For example, if you want to change the formatting of the Web site title that appears on each page (by default it says "Team Web Site") you will need a way to find out that the .ms-titlearea style changes the formatting of that line on each page.  The links below send you to pages that allow you to hover your mouse over a particular area and then see the styles used to create that section's formatting. For example, if you click the link below to the default home page and then hover your mouse over the "Team Web Site" heading, the tool tip will tell you that .ms-titlearea is the style that changes the formatting for this page title.  Similarly, if you click that heading, you will see the area affected when you change the .ms-titlearea style in the Theme.


Default Home Page

 


Discussions

 


Documents

 


Events

             

Shared Documents
 
Calendar - Daily
 
Calendar - Monthly
 
Calendar - Weekly
             

New Event
 
Lists
 
Pictures
 
Surveys
             

Customization Pages
           

Once you know what styles you want to change, you can change them with FrontPage 2003.

Changing styles with FrontPage 2003

The key to changing styles in FrontPage 2003 is the Styles dialog box, where all of the styles that make up the formatting of your Theme are listed and available to customize.

  1. Click the Text button on the Customize Theme dialog box (click Theme on the Format menu, and then click Customize).
  2. Click the More Text Styles button. The Style dialog box opens.


     
  3. Click the style you would like to change in the Styles scroll box.

    Tip: If you aren't sure which style to change, you can scroll through the listed styles to see the formatting that corresponds with them.
     
  4. Click the Modify button. The Modify Styles dialog box opens.


     
  5. Click the Format button to change the font, the paragraph, the border, the numbering, or the position for this style.  For example, if you wanted to change the font color and size for the .ms-titlearea style, you would click the Font option and then specify the new font size, font, and formatting, and then click OK.  If you wanted to change the border or the background color, you would click the Border option, and so forth. 
  6. Click OK 4 times.
  7. When asked if you want to save the changes you have made to your Theme, click Yes.  Your custom Theme has been changed and the updates are made to your site.

See it in action

The finance, human resources, and sales & marketing sample sites were created with custom Themes. The rules for fonts, backgrounds, buttons, and other elements are specified in the custom Themes.

Additional resources

Here are some articles that could help you in designing and implementing a great-looking Web site.

  Applying a Theme to a Site Created with Windows SharePoint Services
  Changing Gradient Images in Sites Created with Windows SharePoint Services