Finding a CSS selector for a section
When wanting to add a Custom overlay module to a section on the Intranet, you will need first to identify which areas of the page you wish the overlay module to point to. Once you have identified them, you can extract the required CSS class for them using the browser’s inbuilt developer tool.
Steps
- Navigate to the section you wish to add the tour to
- Open the browsers developer tool
- Google F12
- Edge CTRL + SHIFT + I
- Setting
- Right click > Developer tool
- Right Click > Inspect
3. Click the select element icon in the top left of the developer tool
4. Select the desired item of the section you are on
5. View the elements HTML code
6. Look for the Class tag
-
- The tag needs to be unique
- It will often have the name of the element in it
7. Copy the unique class name
8. Go to the PoP admin page
9. Give a unique title and paste the Class name into the CSS selector box with a full stop at the front.
10. Save
Useful CSS selectors:
| Element | CSS selector |
| Logo | .invotra-workbar-logo |
| Profile | .invotra-workbar-profile-link |
| Search | .invotra-workbar-menu-search |
| News (Widget) | .pane-invotra-news-widget |
| Notifications Bell | .notifications-icon-wrapper |
| Whole page | .page, .mdc-layout-grid |
| Work Bar | .invotra-workbar-mobile-menu-icons |
| Nav Bar | .invotra-workbar-secondary |
| Feed | .feeds-icon-wrapper |
| All content (Widget) | .pane-simple-content |
| User Profile (Widget) | .pane-current-user |
Section:
Open Developer:
Selecting an element:
Copying a class:
Adding the CSS selector:
