Monday, February 04, 2008

Creating Custom Themes

http://www.cymru66.com/web-design/microsoft-sharepoint/create-a-custom-microsoft-sharepoint-theme/

All of the themes available for use on a SharePoint server are stored beneath a single folder named “THEMES“: C:\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\THEMES

To create a theme, start by creating a new folder with the images and CSS files that make up the theme. Here are the steps to create a new theme called “DEMO″:

  • First, make a working copy of the new theme.
    Choose one of the theme folders in the directory listed above, and make a copy of it in the “THEMES” directory. For example, copy the files in the ICE folder and paste them into the “DEMO″ folder.
    (Note: the folder name must be all caps)
    (Tip: choose a theme with similar colors/styles, which will save you time in the customization stage)
    You can now modify the files you copied as a starting point for your theme.
  • Second, modify the files that link your theme to the list of available themes.
    In your theme’s folder, rename the ICE.INF file to DEMO.INF. This name should match your folder name exactly and be all caps.
    Edit the DEMO.INF file to set the title of your theme as follows:

    [info]
    title=
    DEMOTheme

  • Finally, the list of available themes on the “Select a Theme” page is defined in this file:
    C:\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\LAYOUTS\1033\SPTHEMES.XML

    Edit this XML file and insert a new section for your custom theme wherever you’d like it to appear.
    (Note: I usually keep mine alphabetized, but this is NOT automatic)


    demo
    DEMOTheme
    Description
    ../images/demoimage.png
    ../images/
    demoimage.gif

    The TemplateID must match your folder name, but should be all lower case.
    The DisplayName should match the title you set in the MIST.INF file.
    The Preview image is a 300 x 180 pixel gif, and is used by the “Apply a Theme” function in the Admin tool. The .png version is only used by Frontpage as a preview image.

  • Now you can apply the new theme to your SharePoint site.
    - On the top navigation bar, click “Site Settings“.
    - In the “Customization” section, click “Apply theme to site“.
    - Select your your new theme, and click Apply.
    - Navigate to your SharePoint site and see how it looks!

No comments:

Post a Comment