Sharepoint Custom Themes && Custom Cascading Style Sheet(CSS) Guideline

How to Customize theme code for MYTHEME theme. It is only necessary if you want to create another one like MYTHEME theme. Here are the instructions of creating Custom Theme with MYTHEME standard.

How to Customize Themes

You can add new themes or customize existing ones for application to Web sites in Microsoft Windows SharePoint Services 3.0. This programming task shows how to customize an existing theme.

To create and customize from an existing theme:

1. Copy one of the theme folders in Local_Drive: \Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES and give the folder a unique name.

   Note: In this example, the name is MyTheme. This folder contains cascading style sheets (CSS) files, image files, and other files that define the styles, formatting, and color for the various user interface (UI) elements that are used in the theme.

2. Find the .inf file in the copied folder, and rename it with the name given to the folder, i.e., in this example, rename that .inf file with MyTheme.INF
3. Open the .inf file and assign the same name to the title in the [info] and [titles] sections of the file.
4. There is one theme.css file in that MyTheme folder, open that, Customize the styles defined in the following as needed.

   Field-Label Text: It is for all Sharepoint text label and field in the form. You have to insert the following code to change in MyTheme standard.

   Code

   CSS

   /****Com001: customized for each item field**
   Last updated: by MJ Ferdous on 19 nov 08
   **/
   .ms-formbody {
       background: transparent;
       border-top: 1px solid #ffffff; 
   }
   
   .ms-formlabel  {
       border-top: 1px solid  #ffffff;
       color: #000000;
   }
   
   h3.ms-standardheader{
   color:#000000;
   font-weight:normal;
   font-family:vardana;
   }
   /*------------end of Com001:-----------*/

   Button: You have to integrate the following code in the theme.css inside corresponding theme (i.g. “MYTHEME”) folder to change all button styles.

   Code

   CSS

   /****Com002: customized for each button**
   Last updated: by MJ Ferdous on 19 nov 08
   **/
   
   .ms-ButtonHeightWidth
   {
   width:12.0em;
   font:8pt verdana;
   height:2.1em;
   padding-top:0.1em;
   padding-bottom:0.4em;
   color:#00231b; 
   background-color:#cbdeda;
   border:#00231b 1px solid; 
   font-weight:bold;
   cursor:hand;  
   }
   
   .ms-NarrowButtonHeightWidth
   {
   width:9em;
   height:2em;
   font:8pt verdana;
   padding:0;
   color:#00231b; 
   background-color:#cbdeda;
   border:#00231b 1px solid; 
   font-weight:bold;
   cursor:hand; 
   }
   
   .ms-ButtonHeightWidth2
   {
   height:2.1em;
   font:8pt verdana;
   width:11.72em;
   padding-top:0.1em;
   padding-bottom:0.4em;
   color:#00231b; 
   background-color:#cbdeda;
   border:#00231b 1px solid; 
   font-weight:bold;
   cursor:hand; 
   }
   
   /*------------end of Com002:-----------*/

5. Modify the image files in the copied folder by using the business graphics software of your choice.
6. Add a file for thumbnail and preview images for your custom theme to the Local_Drive: \Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\TEMPLATE\IMAGES directory. In this example, the file is called myPreview.gif.
7. Add a theme template definition to SPTHEMES.XML, which is the file that determines which themes are available as options on the Site Theme page. This XML file is located in the Local_Drive: \Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\TEMPLATE\LAYOUTS\1033 directory.

   The following example specifies a template for the custom theme.

   XML

   XML

   <Templates>
      <TemplateID>mytheme</TemplateID>
      <DisplayName>My Theme</DisplayName>
      <Description>Description</Description>
      <Thumbnail>images/myPreview.gif</Thumbnail>
      <Preview>images/myPreview.gif</Preview>
   </Templates>

8. Reset Internet Information Services (IIS) by typing iisreset at the command prompt so that your custom theme appears in the list of options on the Site Theme page and can be applied to SharePoint sites.

Robust Programming

Reference: http://msdn.microsoft.com/en-us/library/aa979310.aspx