posts - 80 , comments - 115 , trackbacks - 2

My Links

News


MJ Ferdous

Ferdous has industry level experience with SharePoint and has done several presentations and workshops on SharePoint. He also worked as SharePoint Consultant (CREDEM Italy, Robi etc) and Trainer (BASIS, JAXARA IT, LEADS Co.). He is currently working as SharePoint Architect at BrainStation-23. He also worked as Technical Project Manager for Congral LLC for managing revolutionizing Patient Centric Healthcare applications at the same company since 2009.

Before joining here, he worked for OT Group SPA and for Rockwell Automation in Italy. He is the author of several technical articles with over 49 articles published on http://mrbool.com where he is the Technical Author for the site and author of mssharepointtips.com as well. He is also founder of SharePoint Expert group. Looking for a Offshore Development or partnership.............. in any development in Dot.Net & SharePoint Platform.

invisible hit counter View My Stats

Tag Cloud

Article Categories

Archives

Post Categories

Image Galleries

Blogs [MVP]

My Articles

My Others Link

Public Speaking

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.

  1. 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
  2. Open the .inf file and assign the same name to the title in the [info] and [titles] sections of the file.
  3. 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:

/****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 style.

 

Code:

/****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:-----------*/

 

  1. Modify the image files in the copied folder by using the business graphics software of your choice.
  2. 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.
  3. 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

Copy Code

<Templates>
   <TemplateID>mytheme</TemplateID>
   <DisplayName>My Theme</DisplayName>
   <Description>Description</Description>
   <Thumbnail>images/myPreview.gif</Thumbnail>
   <Preview>images/myPreview.gif</Preview>
</Templates>
  1. 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

 

Print | posted on Tuesday, December 2, 2008 3:39 AM | Filed Under [ Sharepoint 2007 Office 2007 Microsoft Office SharePoint Server 2007 Microsoft Office SharePoint Designer 2007 ]

Feedback

Gravatar

# re: Sharepoint Custom Themes && Custom Cascading Style Sheet(CSS) Guideline

Helpfull
12/11/2008 2:58 AM | Khan
Post A Comment
Title:
Name:
Email:
Comment:
Verification:
 
 

Powered by: