How to target specific pages or sections

Something that is often asked by users adding custom JavaScript or custom CSS to Interact is how to target specific pages. For example, how do we change the background color of a particular homepage, or how do we hide the like button for all pages in a section.

Interact handily adds some information about a page to the HTML element of every page as items in the class attribute. This class includes the type of page (homepage / section) along with the internal unique identifier for that page. This means that it will be different for every page across the intranet, allowing you to target that one single page.

Some examples are shown below

209 — This shows the class added for a homepage with an id of 65

335 — This shows that the page is the section homepage for section 3976

333 — This shows that the page is a document within a specific content area (section) and category (subsection)

This can then be used in conjunction with CSS selectors or Javascript selectors to add some CSS / Javascript code to one page only.

The example below hides the like button for all pages within a specific content area (3216)

html.section-3216 .widgetBody .count, html.section-3216 #documents-results-container .full-width > .ContentListItem, html.section-3216 #document #btnLike { display:none; }