Introduction

By default, when adding Custom CSS in the Theme Builder, it will be applied on all site pages where ShortPoint is running.

If you would like to change that and make it so that the Custom CSS code only gets applied on certain pages, here's what you can do.

Before we start:

• You need to have ShortPoint SPFx installed in your environment.
• You need to have some basic HTML and CSS knowledge.
• You should know that ShortPoint injects the name/path of the page as an HTML class on the html tag.

Step 1. Prepare a list of pages

Put together a list of all the pages that you want to be modified by the Custom CSS code. You can also modify just one single page. Let's say for example that you want the home page to be modified, and its file name is: "NewHome.aspx".

Step 2. Extract the class name that Shortpoint injects

Open up the developer tool in your browser of choice (we are using Chrome for this example) and scroll up in the Elements Tab until the html tag is visible. You should see a bunch of classes that ShortPoint injects as helpers and attaches them to this tag. The one we are looking for starts with "sp-path-name-" and is followed by the name of the page using lower case letters and removing the page type extension, which in this case is ".aspx".

So using the example above, the class name that ShortPoint has attached to the html tag would be: "sp-path-name-newhome". If other pages need to have the same Custom CSS applied, the same naming convention for HTML classes will be applied, and you can use a comma separated list of selectors in your CSS code.

Step 3. Add your Custom CSS in the Theme Builder

Launch the ShortPoint Theme Builder and navigate to Utilities > Custom CSS. Now you can add your customized code using the above class name as a selector.

For example, in our case, it could look like this:

.sp-path-name-newhome body {
  background-color: red;
}