1

Currently I am using javascript to convert the URL into a unique body class. This helps to target sub sites for unique branding without impacting the entire site. Is there a way to do this without javascript? Below is what I am using now.

//add body class
// find the pathname
var urlPath = window.location.pathname;
//convert to lowercase
urlPath.match(/\/(.*?)(\+|$)/)[1].toLowerCase();
// remove the first character
urlPath = urlPath.replace(/\//g, '-').slice(1);
//remove file extension
urlPath = urlPath.replace(/\.[^/.]+$/, "");
// add class to body
$(document.body).addClass(urlPath);

An article explaining the issue in more detail - https://blog.mastykarz.nl/webdesigners-sharepoint-body-id/

In WordPress you can do the following

<body <?php body_class(); ?>>

Then designers can target individual pages and pages that use a particular template

<body class="page page-id-2 page-parent page-template-default logged-in">
Improve this question
2
  • You can use different CSS for your subsite & set it through site setting. I am not aware about the concept of JavaScript which you are using to change the branding of subsite. – Hardik Jun 6 '16 at 14:18
  • CSS can only work with selectors in the current DOM, it doesn't have any information about the URI. So your method of adding URL information into the DOM is your only option. A nicer way would be to inject a CSS file based on you URL info – Danny '365CSI' Engelman Jun 6 '16 at 14:19
0

To apply customized style sheet to your site's subsite:

  1. In the browser, open the SharePoint site in which the existing customized style sheet resides.
  2. On the Site Actions menu, Click Site Settings
  3. On the Site Settings page, under Look and Feel, click Master page.
  4. On the Site Master Page Settings page, in the Alternate CSS URL section, click Specify a CSS file to be used by this publishing site and all sites that inherit from it, and then type the full path for the customized style sheet, including the file name, in the box.

It will apply the stylesheet to your specific Subsite.

Improve this answer
7
  • Thank you but how would I target a particular page or section inside the sub site? – JacobLett Jun 6 '16 at 14:24
  • For that you need to add CEWP to the page on which you need the style to be applied on. – Hardik Jun 6 '16 at 14:25
  • is that works for you? – Hardik Jun 7 '16 at 11:47
  • Hi Hardik still thinking this through because it might be hard to maintain code embedded on pages and having a separate stylesheet for each individual site. Ideally it would be nice to have one global stylesheet that has body#subsite to target minor variations. I added some more context to the question on how I would like it to work similar to WordPress in that it adds a class for the page and page template it is using. – JacobLett Jun 7 '16 at 13:51
  • Are you using custom master page for your sites? – Hardik Jun 7 '16 at 13:55
0

Hardik's answer only works if you have the Publishing features activated (at the Site and Web levels). If you do have the Publishing features activated, using the Alternate CSS setting is probably the easiest and most straightforward way of applying custom styles to a specific (sub)site.

However, if you don't have the Publishing features activated, you will need a different way of getting there.

The way I tackled the problem of enabling custom styling at the individual subsite level was to create a two-pronged branding solution, and it hinges on the fact that each site (or subsite) has it's own unique master page gallery.

First, I created a Site scoped feature to deploy some common files that I did want to apply to all sites within the site collection. (Including some base CSS, some images, jQuery, etc.)

Then, I created a Web scoped feature to deploy a custom master page and a custom blank CSS file into the Web's master page gallery.

The master page references the common resources at the Site Collection level, as well as the blank CSS file at the Web level.

The way this works is that the SharePoint:CssRegistration element can use the SPUrl replacement tokens for the file path. For instance:

<!-- common css file across all sites -->
<SharePoint:CssRegistration name="<% $SPUrl:~SiteCollection/_catalogs/masterpage/CSS/common.css %>" runat="server" />

<!-- sub-site specific css -->
<SharePoint:CssRegistration name="<% $SPUrl:~Site/_catalogs/masterpage/CSS/site-specific.css %>" runat="server" />

This way, when I activate the feature at the web level and choose to use my custom master page, the connection is already there to a CSS file that will only apply to that particular site.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.