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
- 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.
- 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
- Open the .inf file and assign the same name to the title in the [info] and [titles] sections of the file.
- 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:
.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;
}
Button: You have to integrate the following code in the theme.css inside corresponding theme(i.g. “MYTHEME”) folder to change all button style.
Code:
.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;
}
Modify the image files in the copied folder by using the business graphics software of your choice.
- 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.
- 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
<Templates>
<TemplateID>mytheme</TemplateID>
<DisplayName>My Theme</DisplayName>
<Description>Description</Description>
<Thumbnail>images/myPreview.gif</Thumbnail>
<Preview>images/myPreview.gif</Preview>
</Templates>
- 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
Warning Changes that you make to SPTHEMES.XML might be overwritten when you install updates or service packs for Windows SharePoint Services, or when you upgrade an installation to the next version.
Ref: http://msdn.microsoft.com/en-us/library/aa979310.aspx