SharePoint master pages simplify and minimize the amount of work that it takes to create and maintain elements that function on multiple pages of a site. In our projects we always try to keep the number of master pages to a minimum. It means more work up front, but like so many things, it pays off in the long run.
During a recent project, my team and I created a worldwide site with many country sub-sites. The sub-sites may or may not contain different languages and therefore we needed to be able to adjust their font sizes separately. A 10 point font size in one language is not necessarily readable in another. One way to do this would be to create different master pages for every site that linked to separate CSS files but as I mentioned before, multiple master pages is not ideal.
The solution was to make the master page point to two CSS files: a main CSS file that styled everything on all of the sites, as well as a CSS file that would be relative to the individual sub-sites. The second CSS file would be configured with a relative path. The code looks like this:
<style type="text/css">@import url('../css/siteSpecific.css');</style>Instead of:
<link type="text/css" href="../css/siteSpecific.css" rel="stylesheet">
How it works.
The relative link tells the system to find the CSS file in a folder adjacent to the currently viewed webpage. Each site has its own folder where the second CSS file can exist.
Here is the main point of this blog.
It is the IMPORT function that makes this possible. The LINK method of pointing to a CSS file does not work for this. It doesn’t work because it assumes that the CSS file is relative to the location of the master page. That is not beneficial because we need the same master page to point to a different CSS file depending upon what site or sub-site a user is viewing. Only the IMPORT function will find the CSS file in a folder adjacent to the folder of the page that is being viewed.
Important.
For this to work correctly, the IMPORT code in the master page needs to be placed after the code that links to the primary CSS file. That way, the site-specific files will override the styles that are meant for all sites.
This solution worked very well for us because we were not able to predict how all of the different languages were going to look to the users in all of the countries. We rolled out all of the sites with the same font size and line height. As they tested and gave feedback about how their country site looked, we were able to adjust the look of their individual sites by adding a few styles to the site-specific CSS file of each site.
To try this out.
Create a top-level site with a sub-site. Then create a sub-site in the first sub-site. In each of the sites, place a “siteSpecific.css” file in a “css” folder next to the Pages folder. Place the import code noted above into the master page. In each of the CSS files, put a CSS class that styles the same elements differently like this:
For the top level site:
.ms-WPBody {font-size:8pt; color:#036;}
For the first sub site:.ms-WPBody {font-size:11pt; color:#C33;}
For the sub sub site:.ms-WPBody {font-size:14pt; color:#030;}
View the sites to see the difference:
Top level site:
First sub-site:
Sub-site of the first sub-site:
