Target specific pages or sections
Before you start
- You need access to the Control Panel with permission to manage the Developer Framework.
Note: The examples here are samples, not officially supported by Interact Technical Support. Review and test them with your development team before use.
Overview
A common question when adding custom JavaScript or custom CSS to Interact is how to target specific pages. For example, how to change the background colour of one homepage, or how to hide the like button for all pages in a section.
Interact adds information about a page to the html element of every page as items in the class attribute. The class includes the type of page (homepage or section) along with the internal unique identifier for that page. The class is different for every page across the intranet, so you can target a single page.
Examples
The following shows the class added for a homepage with an ID of 65:
The following shows that the page is the section homepage for section 3976:
The following shows that the page is a document within a specific content area (section) and category (subsection):
You can use these classes with CSS selectors or JavaScript selectors to apply 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; }