How can we help you today?

How to Apply Custom CSS on Specific Pages


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;

Click Apply, and then Publish. 

That's it! Now your selected page should have a red background color applied to it, while other pages are ignored.


Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 15 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more