- 06 Aug 2024
- 1 minute to read
User tour step targets
- Updated on 06 Aug 2024
- 1 minute to read
When creating a user tour you will need to add each step for which you want to provide information. For each step you can decide which feature to highlight using the settings in the Step target section.
First, select the Target type from the following options:
- Block: This option allows you to select a block type from the Block dropdown list. If a block of this type is present on the selected page, it will be highlighted.
- Selector: Highlight part of the page using the selector from an element's CSS code. Find out more in the instructions below.
- Display in middle of page: This option displays the step as a pop-up in the middle of the page. This can be useful for introductions or general guidance that isn't specific to a block or layout element.
If the element you want to highlight isn't a block, you will need to use the Selector option. These steps will outline how to find the relevant CSS in Google Chrome, but the method may be different in other web browsers. Follow these steps to find the selector:
- Navigate to the page containing the element you wish to highlight in Google Chrome.
- Press Ctrl+ Shift + I to open the Developer tools. Alternatively, open the menu and go to More tools > Developer tools.
- Click the inspect element icon () or press Ctrl + Shift + C.
- In Totara, select an element (e.g. the navigation bar or a button) and a section of CSS code will be highlighted in the Elements window of the Developer tools panel.
- With the code selected, click the ellipsis icon () next to it, then Copy > Copy selector.
- Paste the selector (which should look something like '#yui_3_17_2_1_1610030264859_192') into the CSS selector field for the user tour step.
- Test the user tour to ensure that the step points to the correct element.