Creating themes for Sharepoint sites using CSS

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


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 is done by the administrator.

Let's create the first theme in our life. On the SharePoint server, navigate to the C: \ Program Files \ Common Files \ Microsoft Shared \ web server extensions \ 12 \ TEMPLATE \ THEMES folder. It contains all the standard Sharepoint themes. For example, copy the folder with the theme "SIMPLE". Rename it at 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 folder “C: \ Program Files \ Common Files \ Microsoft Shared \ web server extensions \ 12 \ TEMPLATE \ LAYOUTS \ 1033 \” and edit SPTHEMES.XML to add the selected text:



That's it. We have created a theme. Now we are armed with something like the Internet Explorer Developer Toolbar or any other browser add-on for working with CSS. By the way, IE8 has a built-in console for developers that has the capabilities we need.

So, let's change the logo and recolor the Site Action drop-down menu.



Let's 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: