Como criar Tema para SharePoint

Choosing a theme
Select a theme as a starting point. In SharePoint select: "Site Actions -> Site Settings -> Site Theme" For the purposes of this article we'll choose "Simple"


Now that we have a starting point lets duplicate it and start creating our own theme.

On the SharePoint server, navigate to "C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES" and duplicate the "SIMPLE" folder. Rename this folder to whatever you'd like your theme to be called, let's make a new one called "SIMPLER".


In the "SIMPLER" folder, remove all of the images and rename "SIMPLE.INF" file to "SIMPLER.INF"

Open "SIMPLER.INF" file with notepad and change all instances of "Simple" to "Simpler"

Navigate to "C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\" and edit "SPTHEMES.XML"

Append the following xml, this is the information for the "Site Theme" area in SharePoint:


simpler Simpler Simpler is more simple than simple. images/thsimple.gif
images/thsimple.gif


We'll use the same thumbnails as the "Simple" theme. To change these later the gif files are stored in "C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\IMAGES"

You've created your own theme based on the Simple theme. To start editing the CSS open "C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES\SIMPLER\theme.css"

Creating multiple CSS files
A great way to organize your CSS is to create multiple style sheets. For example, you could create a style sheet called "navigation.css" where you would place all of your navigation-related styles.

At the bottom of theme.css append the following:

/* more customizations */ @import url("custom.css") screen; @import url("print.css") print;


Using the @import rule we're importing two separate style sheets, one called custom.css for screen media and another called print.css for print.

One important thing to note is that earlier browsers such as ie6 may have issues groking CSS level 2 stuff.

For more information on this technique see the W3C recommendation:
http://www.w3.org/TR/CSS21/cascade.html#at-import http://www.w3.org/TR/CSS21/media.html

Traversing the layout
As you can see in the diagram below Microsoft has used tables for layout in SharePoint 2007. This is an undesirable way of doing things, perhaps if they had used a more minimalistic approach relying more on CSS it wouldn't be so bad, but this is not the case. There are unnecessary attributes, sporadic inline CSS and tables embedded in tables throughout the application.



What this means is that identifying specific element classes is very difficult without the use of some kind of DOM inspector. A DOM inspector is a tool that can be used to inspect and edit the live DOM(Document Object Model) of any web document. Firebug has such a tool built in. Firebug is a Firefox extension that provides a set of development tools that let you edit, debug, and monitor CSS, HTML, and JavaScript. I would recommend grabbing Firebug or some other DOM inspection tool before you continue.

Overriding styles
It may be necessary to override some of core styles to achieve a desired look. Here's an example:

/* make all links red */ a {color:red !important;} td.ms-siteactionsmenu a {color:white !important;}


By using the !important declaration we're overriding all other styles that may be present for the a element. We want the link for the action menu to be a different color though so we also use the !important declaration to override.

For more information on this technique see the W3C recommendation:
http://www.w3.org/TR/REC-CSS2/cascade.html#important-rules

Previewing the theme
Seeing your CSS changes real-time is useful when customizing your theme. I would recommend using a tool that allows you to override styles on the fly. Firebug lets you do this, but I prefer Stylish because you can save your user styles. Stylish is a Firefox extension that allows easy management of style sheets and lets you preview your CSS changes instantly.

Once you are pleased with the changes you've made to your CSS, it's time to preview them. Open a command prompt and enter the following:

C:\>iisreset /restart

This will restart all Internet Information Services (IIS).


Now open SharePoint and select your updated theme.


Adding your company logo
Save your logo to your theme directory "C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES\SIMPLER"

Now we'll identify where we want to place the logo, let's put it in the traditional place in the upper left. We'll put it under the breadcrumb section in "td.ms-globalTitleArea":

/* insert logo */ td.ms-sitetitle { height:60px; background: 0 5px no-repeat url(logo.png); } h1.ms-sitetitle,td.ms-titleimagearea {display:none;}

We're changing the height of "td.ms-sitetitle" to fit the size of our new logo, and declaring the logo as the background. Then we hide the image and the h1 that are there by default.