Editing SharePoint Themes

As I mentioned a few days ago I've been working on CSS files to edit themes in SharePoint. I haven't seen much documentation on how to do this so after picking up pieces from different places and then figuring out what to do I thought I'd pass my knowledge on.

I have access to SharePoint, SharePoint Designer and IE Developer Toolbar. I find SharePoint Designer better for viewing CSS or HTML files, but another good programme is Notebook++ which is an open source, source code editor for use on Windows. It supports many different languages:

ASP, Ada, ASCII art, Assembly, AutoIt, BAT, C, C#, C++, Caml, CSS, doxygen, FORTRAN, HTML, Haskell, Java, JavaScript, KiXtart, Lisp, Lua, makefile, Matlab, Objective-C, Pascal, Perl, PHP, PostScript, Python, Ruby, Scheme, Unix Shell Script, Smalltalk, SQL, Tcl, TeX, Verilog, VHDL, VB/VBScript, XML

You can download Notebook++ free here

Anyway getting back to the subject editing themes. To edit the theme you need to open the theme file. This is located in /_themes/THEME_NAME/THEME_1011-65001.CSS replacing THEME_NAME and THEME with the name of the theme you wish to edit. Open it from the SharePoint site. Doing that should open the CSS file in your default code editor, unless you have SharePoint Designer then you can locate it that way.

So now I have the CSS file open, I have my Web browser open with the site and theme I want to edit and IE Developer Toolbar. First thing to do is on the IE Developer Toolbar click on "Find" and then on "Select Element By Click" this means that you can click anywhere on the web page and you will not be taken to another page and it will show you the attributes for that part of the page that you have clicked on. So for example, I want to change the page border colour. So I clicked on the page border and in the current style list navigate to the background-color attribute, then right click on this and click "trace style" this brings up a new window, showing me the following

.ms-main {
BORDER-RIGHT: #ffffff 15px solid;
PADDING-RIGHT: 5px;
BORDER-TOP: #ffffff 15px solid;
PADDING-LEFT: 5px;
PADDING-BOTTOM: 5px;
BORDER-LEFT: #ffffff 15px solid;
PADDING-TOP: 5px;
BORDER-BOTTOM: #055baa 15px solid;
BACKGROUND-COLOR: #e3efff

Then a quick CTRL+F in SharePoint Designer and search for .ms-main will take me to the part of the .CSS file I wish to edit (a good idea is to either write in a comment detailing your changes or to create a copy in case you need to go back to the original.)

So I then changed all the #ffffff to blue wrote in a comment to say it was originally white and the I saved the file. After doing this the theme was just how we needed it so I had a look at another theme to see if any others could be edited slightly to become useful. On going back to my edited theme I noticed that everything I had changed had gone back to how it was. I still had SharePoint Designer open so I re saved the file and refreshed the browser, it changed again to the edits that I had made, so I realised that there must be another file that needs editing too in order to keep the theme the same. I discovered this file in the 12 folder on the server. This folder can usually be located in \Program Files\Common Files\Microsoft Shared\web server extensions\12 then navigate to "Template" and "Themes" there you will get a list of all the available themes, navigate to the one that requires editing. In my case my theme is called "Blue" so I opened the "Blue" folder, in this folder you will see 5 .CSS files, these should be called:

1. COLOR0.CSS


2. COLOR1.CSS


3. GRAPH0.CSS


4. GRAPH1.CSS


5. THEME.CSS

The THEME.CSS is the flie that needs to be edited in order to save the changes, this file begins with the body tag and looks something like this:

body {
font-family:Arial;
background-color:#FFF
text-align:center;
margin:5px;
}

This is the first line in the THEME.CSS however it is not the first line in 1011-65001.css, you will find this at approximately line 150. So now it is just a simple case of copying everything from body downwards, emptying the THEME.CSS file and pasting what you have copied into it. Once this is saved you can change your theme and go back to it and your changes will still be there. I did not require an IIS RESET to do this but there is a chance your changes won't save without one.

If you have any questions on this subject post me a comment and I'll do what I can to help :)



I have a confession to make - contrary to what I previously said the 1011-65001.css file is only acessible with Frontpage or SharePoint Designer, sorry about the mix up!

Free Blog Counter