We served 2,120,289 users last month
 Best ASP.NET 2.0 and .NET 3.0 Hosting Providers
  Blue Theme Orange Theme Green Theme Red Theme
 
Home | Forums | Videos | Photos | Downloads | Blogs | Interviews | Jobs | Beginners | Training
 | Consulting  
Submit an Article Submit a Blog 
 Login Close
User Id:
Password:
 
Forgot Password
Forgot Username
Why Register
 Jump to
Skip Navigation Links
TechnologyExpand Technology
WebsiteExpand Website
Sponsored by
Become a Sponsor
 Resources  
Close
 Our Network  
Close
Search :       Advanced Search »
Home » Sharepoint » Custom Theme Creation and applying in SharePoint (MOSS 2007)

Custom Theme Creation and applying in SharePoint (MOSS 2007)
By  Dhananjay Kumar January 05, 2009

This article will explain step by step procedures to create a custom site theme and how to apply custom site theme to SharePoint site.
Author Rank:
Total page views :  4754
Total downloads : 
   Print Read/Post comments Post a comment  Similar Articles  
   Email to a friend  Bookmark  Author's other articles  
 
Sponsored by
Become a Sponsor


Site Theme

  • Site Theme is a way to control Look and Feel of a SharePoint site. 
  • It uses Cascading Style Sheets(CSS files) to define how the site looks. 
  • There are default 18 Site Themes. 
  • Master Pages are the other way to change Look and Feel of site.
  • Site Theme changes color schemes of entire site, whereas Master Pages changes only chromes like navigation, quick launch etc.
  • Custom Site Theme could be created.
  • User could add new Site Theme
  • All the preconfigured themes in SharePoint are stored in the File System on the SharePoint Server.
  • Site Theme could be change as 

    Site Setting-> Look and Feel -> Site Themes

Steps to create custom Site Themes and apply that

1. Log on the SharePoint server as an Administrator.

2. Open the folder

C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES

3. This folder contains number of folders; each with the name matches one of the themes in administrative page.


 
4. Copy one of existing folder.

5. Rename copied folder with any arbitrary name. Here I am copying JET folder, and pasting it in same folder. Renaming it to TEST. (Make sure at time of renaming, name is in Upper Case).


 
6. Open the new folder (TEST in this case). Search for .INF file.  Here we have copied JET folder and rename that as TEST folder. So Inside TEST folder, we will get JET.INF. Rename JET.INF to TEST.INF. (Right click and Rename).

7. Edit TEST.INF with notepad. Change all Jet to Test. When TEST.INF will open in Notepad, you will find

[info]
Title=Jet
.
.
.
.
[titles]
1031=Jet
1036=Jet
...

Something likes that. Just change all Jet to Test. Here Test may not be in Upper Case. To change, click on Edit->Replace. Then Save the file TEST.INF


 
8. Now open the file SPTHEMES.XML. This file could be find at

C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033


 
Open file SPTHEMES.XML in notepad. Here <TEMPLATE> tag is defined for each site themes. Just copy and paste one <TEMPLATE> tag.

<Templates>
  <TemplateID>Jet</TemplateID>
  <DisplayName>Jet</DisplayName>
  <Description>Jet has a gray frame with blue control areas and yellow highlights.</Description>
  <Thumbnail>images/thjet.gif</Thumbnail>
  <Preview>images/thjet.gif</Preview>
            </Templates>    

Paste it as

<Templates>
  <TemplateID>Test</TemplateID>
  <DisplayName>Test</DisplayName>
  <Description>This is Testing Site Theme.</Description>
  <Thumbnail>images/Eye.gif</Thumbnail>
  <Preview>images/Eye.gif</Preview>
            </Templates>    

Change <Template ID>, <Display Name>, <Description> <Preview>. Here I am changing preview to Eyes.gif. Make sure Eyes.GIF is present in folder
C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\IMAGES. If Eye.GIF is not available, Paste Eye.Gif in this folder. Whatever image you want to use with site theme. First copy and paste that Image in this folder. Here Eye.GIF is my own image. I have copy and pasted this image in Image folder.

9. Open the site in SharePoint designer

10. Open Edit ->View Folder. It will display all folder name. Delete _Theme folder.

11. Save the site in SharePoint designer

12. Click on Start->Run.

13. Type IISRESET.  This will restart the IIS server.

14. Go to Site Action-> Site setting -> Look and Feel -> Site Themes

15.  Select TEST site theme. And apply it.


 
16.  Now open the Site in SharePoint designer.

17.  Open the folder list of site in SharePoint designer.

18. Browse through _Theme folder.

19. Search for custom theme folder. In this case it is Test

20. Open the Test1011-65001.css file.

21. Modify this file accordingly.  This change would be depicted in Sites.

22. Save this file.

23.  Now open Test folder or custom theme folder.  Location of this folder is

C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES

24. Open Theme.css file

25. Replace content of Themse.css file with content of Test1011-65001.css file and save it.

26. Now go to site -> Site Action -> Site Setting -> Look and Feel -> Site Theme , select custom theme , apply it.....


Login to add your contents and source code to this article
 About the author
 
Dhananjay Kumar
I am Dhananjay Kumar. I passed computer science  & engineering from AEC Agra in year 2007. I born and brought up in Jamshedpur , Jharkhand.I am MCTS on WCF, MOSS Development , .Net Framework 2.0 Web Application so far. I read and write on WCF, SilverLight , SharePoint , ASP.Net MVC, ASP.Net 3.5 Extensions , .Net 4.0 , C# 3.0 , C# 4.0 etc etc. Currently , I am working for UST Global as Software Engineer and active member of Microsoft COE team .
 
Looking for C# Consulting?
C# Consulting is founded in 2002 by the founders of C# Corner. Unlike a traditional consulting company, our consultants are well-known experts in .NET and many of them are MVPs, authors, and trainers. We specialize in Microsoft .NET development and utilize Agile Development and Extreme Programming practices to provide fast pace quick turnaround results. Our software development model is a mix of Agile Development, traditional SDLC, and Waterfall models.
Click here to learn more about C# Consulting.
 
Introducing MaxV - one click. infinite control. Hyper-V Hosting from MaximumASP.
Finally – a virtual platform that delivers next-generation Windows Server 2008 Hyper-V virtualization technology from a managed hosting partner you can truly depend on. Visit www.maximumasp.com/max for a FREE 30 day trial. Hurry offer ends soon. Climb aboard the MaxV platform and take advantage of High Availability, Intelligent Monitoring, Recurrent Backups, and Scalability – with no hassle or hidden fees. As a managed hosting partner focused solely on Microsoft technologies since 2000, MaximumASP is uniquely qualified to provide the superior support that our business is built on. Unparalleled expertise with Microsoft technologies lead to working directly with Microsoft as first to offer IIS 7 and SQL 2008 betas in a hosted environment; partnering in the Go Live Program for Hyper-V; and product co-launches built on WS 2008 with Hyper-V technology.
Dynamic PDF
ceTE software specializes in components for dynamic PDF generation and manipulation. The DynamicPDF™ product line allows you to dynamically generate PDF documents, merge PDF documents and new content to existing PDF documents from within your applications.
Go.NET
Build custom interactive diagrams, network, workflow editors, flowcharts, or software design tools. Includes many predefined kinds of nodes, links, and basic shapes. Supports layers, scrolling, zooming, selection, drag-and-drop, clipboard, in-place editing, tooltips, grids, printing, overview window, palette. 100% implemented in C# as a managed .NET Control. Document/View/Tool architecture with many properties&events. Optional automatic layout.
Dundas Software
Dundas Chart for .NET is the most advanced .NET charting package available today.  With an extremely complete feature set, elegant architecture and easy implementation, Dundas Chart can quickly add advanced Charting functionality to enhance and transform ASP.NET and Windows Forms applications.  Whether you are implementing charting into internal projects, or building applications for clients, Dundas Chart offers advanced technology and advanced results to get the most out of data.
Clickatell's SMS Gateway
Clickatell's Developer Solutions allow you to SMS enable any website or application via a range of API's. Learn More about our API connections.
Free access to .NET Memory Management video
Everything you need to know about Garbage Collection, Temporary Objects, Fragmentation, Finalization and common causes of memory leaks in .NET. Watch the video here.
Microsoft Visual Studio 2010 Professional
Microsoft Visual Studio 2010 Professional will launch on April 12, but you can beat the rush and secure your copy today by pre-ordering at the affordable estimated retail price of $549 (US). Pre-order now.
Nevron Chart for .NET 2010.1 Now Available
The leading .NET charting control now features PDF, Flash and Silverlight export, visualization of large datasets and more. Deliver true charting functionality to your BI, Scorecard, Presentation or Scientific apps. Download evaluation now.
Developer-Ready ASP.NET 2.0 Web Hosting with 3 MONTHS FREE
Now supporting .NET 3.0 Framework with Windows Workflow Foundation, Windows Communication Foundation (WCF), Windows Presentation Foundation (WPF), windows CardSpace (WCS)! Providing more flexibility for Developers with Web Services Support and a User/Permission Manger. Also supporting MS SQL 2005/2000 with Real-Time Backups, FREE Automated Attach .MDF Tool, FREE SQL Restore and Shrink SQL DB Tools, and SQL
 
   Print Read/Post comments Post a comment  Similar Articles  
   Email to a friend  Bookmark  Author's other articles  
 
 Post a Feedback, Comment, or Question about this article
Subject:  
Comment:  
Sponsored by
Become a Sponsor
 Comments
How to apply themes programatically ? by Nimesh On January 9, 2009
Hey.. do u have any idea about how to chagne the theme programatically ???
Reply | Email | Delete | Modify | 
Re: How to apply themes programatically ? by Dhananjay On January 11, 2009
What exactly you want to do ? Changing Site theme ? creating new Site theme? could you explore more your question ?
Reply | Email | Delete | Modify | 
Re: Re: How to apply themes programatically ? by Nimesh On January 12, 2009
My intention is to change the theme of the site based on some users.
like i have a DBTable where i have all the details like username and themes.
Corresponding to each user there are different themes. i am taking it from the table based on the user login.
i wanna apply this theme for the entitre site... For that i created a webpart and applying that webpart to the first page... but it has some issue....

Do you know any other way that i can change the theme dynamically
for eg: i am pasting my entire code here..

using System;

using System.Runtime.InteropServices;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Xml.Serialization;

 

using Microsoft.SharePoint;

using Microsoft.SharePoint.WebControls;

using Microsoft.SharePoint.WebPartPages;

using System.Data.SqlClient;

using System.Web;

using System.Data;

using System.Configuration;

 

namespace ChangeTheme

{

    [Guid("7967e7bc-77e1-421e-83f1-6ab81fcdef6c")]

    public class Theme : System.Web.UI.WebControls.WebParts.WebPart

    {

        public Theme()

        {

        }

        ConnectionStringSettings cs = ConfigurationManager.ConnectionStrings["UserCustomizedThemes"];

 

       

        protected override void CreateChildControls()

        {

            string MyTheme = GetThemeBasedOnUser();

            using (SPSite site = SPContext.Current.Site)

            {

                foreach (SPWeb web in site.AllWebs)

                {

                    //SPWeb web = SPControl.GetContextWeb(this.Context);

                    web.AllowUnsafeUpdates = true;

                    web.ApplyTheme("none");

 

                    web.ApplyTheme(MyTheme);  //use your value 

                    web.Update();

                    web.AllowUnsafeUpdates = false;

                    if (web != null)

                        web.Dispose();

                }

            }

            base.CreateChildControls();

        }

       

 

      

 

       

 

        /// <summary>

        /// Description : .

        /// </summary>

        /// <param name="UserName"></param>

        /// <returns></returns>

        private string GetThemeBasedOnUser()

        {

            string loginName = HttpContext.Current.User.Identity.Name;

            SqlConnection sqlConnection = new SqlConnection(cs.ConnectionString);

            sqlConnection.Open();

            SqlCommand cmdGetTheme = new SqlCommand();

            cmdGetTheme.CommandType = CommandType.StoredProcedure;

            cmdGetTheme.CommandText = "proc_GetThemesBasedOnUserLogin";

            cmdGetTheme.Parameters.AddWithValue("@loginName", loginName);

 

            SqlParameter output = new SqlParameter("@outPut", SqlDbType.VarChar, 500);

            output.Direction = ParameterDirection.Output;

            cmdGetTheme.Parameters.Add(output);

 

            cmdGetTheme.Connection = sqlConnection;

            cmdGetTheme.ExecuteNonQuery();

            sqlConnection.Close();

 

            if (cmdGetTheme.Parameters["@outPut"].Value.ToString() == string.Empty)

            {

                return string.Empty;

            }

            return cmdGetTheme.Parameters["@outPut"].Value.ToString();

 

        }

    }

}

 


Reply | Email | Delete | Modify | 

 Hosted by MaximumASP  |  Found a broken link?  |  Contact Us  |  Terms & conditions  |  Privacy Policy  |  Site Map  |  Suggest an Idea  |  Media Kit
Current Version: 5.2009.6.2
 © 2010  contents copyright of their authors. Rest everything copyright Mindcracker. All rights reserved.