Boris GomiunikOn SharePoint and Web

I’ve had an interesting challenge recently. I’ve needed to create a custom site theme where certain subwebs would have their “identifiers” in design. What I mean by that: The site collection would have a specific theme applied, but in certain subwebs you should have the option of changing the banner for example.

The solution is actually quite simple:

When creating a theme you have to customize the theme.css file. Instead of putting all your class and id css definitions in theme.css, create additional CSS – for example main.css and put all of them there. Next, in theme.css import that file and right after this import, import another css in a document library (for example customCSS). So the whole scenario would be as follows:

theme.css

/*Main theme css*/
@import url('main.css');
/*enable custom styling*/
@import url('../../customCSS/custom.css');

main.css

/*all your CSS styling here*/

and in the (sub)webs where you need custom styling just create a document library called customCSS and inside put custom.css where you override the styles in main.css

Here’s an example:

Default theme:

main.css
…

td.ms-bannerContainer {
    border-bottom: 1px solid #326666;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 100px;
    background: #ece9e4 url('header.jpg') no-repeat left bottom;
}

…

Customized theme

main.css
…

td.ms-bannerContainer {
border-bottom: 1px solid #326666;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 100px;
	background: #ece9e4 url('header.jpg') no-repeat left bottom;
}

…

../../customCSS/custom.css

…

td.ms-bannerContainer {
     background: #ece9e4 url('header.jpg') no-repeat left bottom;
}

…

…