Creating themes for Sharepoint sites using CSS

Themes are the easiest and fastest, but the least flexible way to change the look and feel of a Sharepoint site. Therefore, if the task is to slightly repaint the portal - make it a topic. In order to create your first theme you do not need in-depth knowledge of site building or Sharepoint architecture. It will be enough knowledge of CSS.


You can apply the finished theme through the Sharepoint web interface. A page with a topic selection is as follows.


Themes are applied for each Sharepoint site separately and this action is done by the administrator.
')
Let's create the first theme in your life. On the SharePoint server, go to the "C: \ Program Files \ Common Files \ Microsoft Shared \ web server extensions \ 12 \ TEMPLATE \ THEMES" folder. It contains all the standard Sharepoint themes. Copy for example a folder with the theme "SIMPLE". Rename it to your discretion. For example "HABR".



In the "HABR" folder, delete all the images and rename the SIMPLE.INF file to HABR.INF. Open HABR.INF and replace “Simple” with “HABR” everywhere.

Go to the “C: \ Program Files \ Common Files \ Microsoft Shared \ web server extensions \ 12 \ TEMPLATE \ LAYOUTS \ 1033 \” folder and edit SPTHEMES.XML by adding the selected text:



Well that's all. We created a topic. Now we are armed with something like Internet Explorer Developer Toolbar or any other browser add-on that allows working with CSS. By the way, IE8 has a built-in developer console with the capabilities we need.

So let's change the logo and repaint the Site Action drop down menu.



We write the following in theme.css:

#siteactiontd div, .ms-siteactionsmenu div {
background-image: none! important;
background-color: # 86C5EA! important;
font-family: Arial! important;
font-size: 12px;
}

td.ms-sitetitle {
width: 240px;
height: 130px;
background: 0 5px no-repeat url (habr_logo.gif);
}

h1.ms-sitetitle, td.ms-titleimagearea {
display: none;
}

Use! Important when it comes to overriding.

Apply the theme to the site by going to the Site Actions / Site Settings / Site Theme page.

As you can see, “coloring” the portal is easy! After no more than 20 minutes, I got this result: