Often times when styling SharePoint you’ll come across some odd exception where the styling that works everywhere else has some weird side effect on a particular type of site, or you’ll want to limit some jQuery functionality to a specific site template. Here’s a neat little trick I came up with for splitting the styling and scripting of a particular template so it’s independent of the others.
Simple Version – Single Site Template
The key to this trick is in a built-in javascript variable called _spPageContextInfo.webTemplate which returns the numerical ID number correlating to the web template the current site is using.
jQuery(document).ready(function () {
// Only run this script for a Community template
if (_spPageContextInfo.webTemplate == "62") {
// Set class on body tag, so we can use CSS specific to this site template
jQuery('body').addClass('communitySiteBody');
// Put other Community Site Template specific code here
}
});
In this example we’re checking to see if the value is 62, if it is, we know we’re in a Community Site, and so we add a class to the body, then we can start all of our Community-Site-specific CSS with .communitySiteBody and we know it won’t have an effect outside of Community Sites.
We can also stick in any custom code we need to in this block to get the functionality we’re after, without worrying about the code running on other types of sites.
Advanced Version – Specific Page In A Specific Site Template
We can even go a step further and target a single page within a certain type of site:
jQuery(document).ready(function () {
// Only run this script for a Community template
if (_spPageContextInfo.webTemplate == "62") {
// Set class on body tag, so we can use CSS specific to this site template
jQuery('body').addClass('communitySiteBody');
if (window.location.href.indexOf('/Category.aspx') > 0) {
// Set class on body tag, so we can use CSS specific to this page
jQuery('body').addClass('categoryPageBody');
// Put code you only want on the Category.aspx page in here
}
}
});
In this example, now we can have script that only runs on the Category.aspx page in a Community Site, and we’re able to target the CSS for this page exclusively by using the .communitySiteBody.categoryPageBody selector to start our CSS statements.
If you’ve ever had to write script or CSS around the way certain OOB web parts look or function on a specific page, you can appreciate how powerful this is. This will now let you change the styling of OOB web parts for a *specific page* in a *specific* type of site, without having to worry about side effects rippling through the rest of the site because you touched one of Microsoft’s overused classes.
Bonus – Add Classes For All Site Templates
The above is a great trick for writing scripts for specific web templates, but it gets tedious if you’re only doing it for the CSS tag. My recommendation is to use the above format to target specific sites for scripting purposes, and to continue using that method to create individual page CSS selectors as needed, but for the web template level CSS tagging, I recommend putting the below code into your core JavaScript somewhere.
This code will automatically label the body of every page with a class relating to the template being used. Implementing this at the start of your branding efforts should make it very easy to target specific types of sites, without messing up your previous efforts.
/// Add a class to the body, denoting what Site Template the current page is within
jQuery(document).ready(function(){
var siteTemplate = "unknown";
switch (parseInt(_spPageContextInfo.webTemplate, 10)){
case 0:
siteTemplate = "GlobalTemplate";
break;
case 1:
siteTemplate = "TeamSite";
break;
case 2:
siteTemplate = "MeetingWorkspace";
break;
case 3:
siteTemplate = "CentralAdminSite";
break;
case 4:
siteTemplate = "WikiSite";
break;
case 7:
siteTemplate = "DocumentCenterSite";
break;
case 9:
siteTemplate = "BlogSite";
break;
case 15:
siteTemplate = "GroupWorkSite";
break;
case 16:
siteTemplate = "TenantAdminSite";
break;
case 17:
siteTemplate = "AppTemplateSite";
break;
case 18:
siteTemplate = "AppCatalogSite";
break;
case 20:
siteTemplate = "PortalServerSite";
break;
case 21:
siteTemplate = "PortalServerPersonalSpace";
break;
case 22:
siteTemplate = "PersonalizationSite";
break;
case 30:
siteTemplate = "ContentsAreaTemplate";
break;
case 31:
siteTemplate = "TopicAreaTemplate";
break;
case 32:
siteTemplate = "NewsSite";
break;
case 34:
siteTemplate = "SiteDirectory";
break;
case 36:
siteTemplate = "CommunityAreaTemplate";
break;
case 38:
siteTemplate = "ReportCenter";
break;
case 39:
siteTemplate = "PublishingSite";
break;
case 40:
siteTemplate = "SharedServicesAdministrationSite";
break;
case 47:
siteTemplate = "CollaborationPortal";
break;
case 50:
siteTemplate = "EnterpriseSearchCenter";
break;
case 51:
siteTemplate = "Profiles";
break;
case 52:
siteTemplate = "PublishingPortal";
break;
case 53:
siteTemplate = "PublishingSite";
break;
case 54:
siteTemplate = "MySiteHost";
break;
case 56:
siteTemplate = "EnterpriseWiki";
break;
case 59:
siteTemplate = "ProductCatalog";
break;
case 61:
siteTemplate = "VisioProcessRepository";
break;
case 62:
siteTemplate = "CommunitySite";
break;
case 63:
siteTemplate = "CommunityPortal";
break;
case 90:
siteTemplate = "BasicSearchCenter";
break;
case 95:
siteTemplate = "DeveloperSite";
break;
case 2000:
siteTemplate = "FASTSearchCenter";
break;
case 2757:
case 2764:
siteTemplate = "AccessServicesSite";
break;
case 3100:
siteTemplate = "PerformancePoint";
break;
case 3200:
siteTemplate = "BusinessIntelligenceCenter";
break;
case 3300:
siteTemplate = "eDiscoverySite";
break;
case 6115:
siteTemplate = "ProjectSite";
break;
case 10000:
siteTemplate = "AcademicLibrary";
break;
case 14483:
siteTemplate = "RecordsCenter";
break;
default:
// We don't know what this is, so output it with the template number
siteTemplate = "UnknownSiteTemplate"+_spPageContextInfo.webTemplate;
}
jQuery('body').addClass(siteTemplate+'_body' );
});
Thanks to Ryan McIntyre for providing a convenient list of Site Templates with IDs!
Leave a Reply