Click here to Skip to main content
11,578,524 members (59,861 online)
Click here to Skip to main content

Tagged as

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

, 21 Jan 2013 CPOL 6.9K 1
Rate this:
Please Sign up or sign in to vote.
How to Customize theme code for MYTHEME theme.

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

<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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

MJ Ferdous
Architect Brain Station-23
Bangladesh Bangladesh
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.

He worked on many international projects during his professional life. The major projects are included below:
Internal Enterprise Portal for Robi, Dhaka
nVision Solution for nSales A/S, Denmark
Shared Care Plan for Congral LLC, USA
Internet Banking Portal for the Bank of CREDEM, Italy
Document Management (DMS) for the Bank of CREDEM, Italy
MES solution for Rockwell Automation, Italy
Tourism for Travel Curve Inc., USA
and so on...

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 2007,2010 Platform.

Search him in google by 'MJ Ferdous' to get all links, articles, profile etc

Contact him: ferdouscs@gmail.com mjferdous@live.com

Blog: http://geekswithblogs.net/ferdous

Specialties
===========
Production troubleshooting, maintainability and scalability
SharePoint 2007/2010
Dot.Net Application
Project Management
Document Management Solution

You may also be interested in...

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150603.1 | Last Updated 21 Jan 2013
Article Copyright 2013 by MJ Ferdous
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid