Which selectors do I reference to edit CSS for UserIQ campaigns to ensure I have consistent branding (color, font, etc.,) with my app?

What is Custom CSS and why would I need it?

Let’s say you’ve created a campaign theme in UserIQ’s theming library but you’d like to make additional changes like switching fonts or adjusting padding– this can be done using Custom CSS. Every element on a page has classes and IDs appended to them in the HTML, and our campaign modals do, as well. To add additional styling to your theme, you can create your own CSS based off of the IDs and selectors below.

How do I find these selectors on a page?

To find selectors on a page, you can right-click on the campaign modal and you will be presented with an option that says Inspect. Clicking this option will allow you to see the selector that is used for the specific element you are targeting from your browser’s Developer Console. Here, you can manipulate the CSS as needed and then copy that over to the Custom CSS Fields in UserIQ’s Theming Library. Upon save, you would see the updated styling campaigns using the specific theme.

Where do I insert my Custom CSS in UserIQ?

To insert your Custom CSS, you can navigate to the themes edit page and navigate to the Custom CSS Tab, see below:



Example Use Cases:

• Adjusting font family of text inside of the modal
• Adjusting positioning/padding of the modal or an element inside of the modal
• Adjusting sizing of the modal or elements inside of the modal
• Changing background color schemes inside of the modal.

Commonly Used Selectors

The following selectors can be used to reference modals, positioning of the modal, and modal content on Announcements, Rating Surveys, Custom Surveys and NPS Surveys

1. #_uiq_ft._uiq_modal.in - This CSS Selector nests the modal on the DOM. This selector is the parent element that acts as the container for all components of the campaign (like the modal and content in the modal).
2. #_uiq_ft ._uiq_modal-dialog - This is the first child element of the above-mentioned selector. This selector holds the modal inside of the container. This selector can essentially be used to adjust the positioning of the modal inside the holder.
3. #_uiq_ft ._uiq_modal-content - This selector holds the content in the modal. Elements such as the Images, Buttons, Headers, etc. are the chile This selector can essentially be used to adjust the positioning of the modal inside the holder.
4. #_uiq_ft button.uiq_close - This selector references the dismiss button (or the close button seen at the top right-hand side of the modal).
5. #_uiq_ft ._uiq_modal-header - This is the selector that can be used to reference the Header of the Modal.
   
6. #_uiq_ft ._uiq_modal-title - This selector references the text within the header. The Header text in the modal can be referenced using this selector.
   
7. #_uiq_ft ._uiq_modal-body - This is the parent selector which houses all of the body content in the modal.  All body content can be referenced using this selector.
8. #_uiq_ft ._uiq_modal-footer - This selector references all of the footer contents of the modal (including buttons and spacing)
9. #_uiq_ft ._uiq_modal-footer .uiq_remind_me - This selector references the Remind Me Later button on Announcement Modals. By default, this button is seen to the far right of the modal.

Announcement Selectors

1. ._uiq_modal-image - This is the selector that can be used to modify the image that is seen above the header.
   
   Note: Currently, announcements are the only campaigns that allow an 800 X 200 image above the header.
   
   
2.  #_uiq_ft ._uiq_modal-body ._uiq-row - If using the Detailed Templates, you will be presented with content in block format. This selector references the rows of block formatted content

Common Info Bar/Subtle Template NPS Selectors

1. #_uiq_ft_subtle._uiq_modal_subtle._uiq_top_subtle - This selector references the entire body of the Info Bar when the info bar is positioned at the top of the page. When the position of the Info Bar is at the top of the page, this is the parent selector that can be used to reference the overall Info Bar modal.
2. #_uiq_ft_subtle._uiq_modal_subtle._uiq_bottom_subtle - This selector references the entire body of the Info Bar when the info bar is positioned at the bottom of the page. When the position of the Info Bar is at the bottom of the page, this is the parent selector that can be used to reference the overall Info Bar modal.
3. #_uiq_ft_subtle ._uiq_modal_content_subtle - This selector will references the body content of the Info bar (including text and buttons).
4. #_uiq_ft_subtle ._uiq_modal_content_subtle #_uiq_body_subtle - This selector references specifically the text content in the modal.
5. #_uiq_ft_subtle .uiq_close_subtle, #_uiq_text_wrap_subtle - These selectors reference the dismiss button (or the close button seen at the top right hand side of the modal).
6. #_uiq_ft_subtle ._uiq_modal_content_subtle #_uiq_btn_container_subtle - This selector is acts as a holder for the Left, Right, and Remind Me Later buttons in Info Bar modals.
   
   

Subtle NPS Selectors

1. #_uiq_ft_subtle #uiq_nps_container - This selector references the 0-10 span of ratings in a Subtle NPS Survey.
    
2. #_uiq_ft_subtle ._uiq_modal_content_subtle #_uiq_btn_container_subtle - This selector references the button container for Subtle NPS Surveys. Left and Right buttons can be referenced from here.
   
   

Default NPS Survey Selectors

1. #_uiq_ft #_uiq_ftBody.uiq_nps - This selector acts as a wrapper for NPS body content. It contains the text content, NPS 0-10 scale of scores, and comment box.
2. #_uiq_ft ._uiq_modal-body p - This selector references specifically the text content in the body of the NPS Survey content. If you’d like to adjust font-family, positioning of just the text, or anything else specific to the text content in the modal, this selector can be used to achieve the desired actions.
3. #_uiq_ft ._uiq_modal-body table - This selector references the 0-10 span of ratings in an NPS Survey.  If comment boxes are enabled and you’d like to adjust the sizing or positioning of the rating spectrum in the NPS Survey, you can do so using this selector as a reference.
4. #_uiq_ft #_uiq_ftBody.uiq_nps .uiq_nps_comment_wrap - This selector references the comment box on the NPS Survey Modal. If comment boxes are enabled and you’d like to adjust the sizing or positioning of the comment box in the NPS Survey, you can do so using this selector as a reference.
   
   

Rating Survey Selectors



Note: by default, the Rating Survey Content (header, body, footer) is center aligned. To achieve this, we add a .uiq-text-center class onto the modal.

1. #_uiq_ft ._uiq_modal-header.uiq-text-center - This selector references the header content in Rating Surveys. If you’d like to adjust the alignment of text, sizing, or any additional positioning, it can be achieved using this selector.
2. #_uiq_ft ._uiq_modal-body.uiq-text-center - This selector references the Rating Survey Modal body. This selector acts as a wrapper for the Rating Survey body content.
3. #_uiq_ft ._uiq_modal-footer.uiq-text-center - This selector references all of the footer contents of the modal (including buttons and spacing).
   
   

Custom Survey Selectors



Note: To reference an individual question altogether in a Custom Survey, you can do so by referencing their id. Ids are can be seen in the format: id="question_900"

1. #_uiq_ft #_uiq_ftBody fieldset - This selector references all individual questions and answers in the Custom Survey.
2. #_uiq_ft #_uiq_ftBody legend - This selector references specifically the question text in the Custom Survey.
3. #_uiq_ft #_uiq_ftBody ._uiq_column - This selector references the specifically the answers in a Custom Survey question.
   
   

Guided Tours

1. .useriq-element.useriq-theme-arrows- These selectors reference the overall Guided Tour Modal.
2. .useriq-element.useriq-theme-arrows .useriq-content - This selector references the Guided Tour Modal Content (including header, body, and footer). This selector can essentially be used to adjust the positioning of the modal inside the holder.
3. .useriq-element.useriq-theme-arrows.useriq-has-title .useriq-content header - This selector references the header of the Guided Tour
4. .useriq-element.useriq-theme-arrows .useriq-content .useriq-text - This selector references the body of the Guided Tour
5. .useriq-element.useriq-theme-arrows .useriq-content .useriq-text p - This selector references the text content inside of the body of the Guided Tour.
6. .useriq-element.useriq-theme-arrows .useriq-content footer - This selector references the footer contents in the Guided Tour
7. .useriq-element.useriq-theme-arrows .useriq-content footer .useriq-buttons li .useriq-button.useriq-button-secondary - This selector references the left-hand side button inside of the Guided Tours.
8. .useriq-element.useriq-theme-arrows .useriq-content footer .useriq-buttons li:last-child .useriq-button - This selector references the right-hand side button inside of the footer in Guided Tours.
   
   

Tooltips

1. .useriq-icon-tip - This selector references the Tooltip anchor.
2. .drop-element.drop-theme-hubspot-popovers.drop-after-open - This selector references the tooltip content modal
3. .drop-element.drop-theme-hubspot-popovers.drop-element-attached-left.drop-element-attached-middle .drop-content - This selector references the content container in the Tooltip content modal.
4. .drop-element * - This selector references the specific text inside of the tooltip.
   
   

Launchers

1. #uiq_launcher.uiq_launcher_container - This selector references the launcher button that is seen at the bottom right-hand side of the page.
2. #uiq_launcher_pane - This selector references the entire launcher panel that is seen.
3. #uiq_launcher_header - This selector references the header seen inside of the launcher panel.
4. #uiq_launcher_content - This selector references the Launcher Content seen inside of the Launcher panel.
5. #uiq_launcher_content ._uiq_row - If the launcher is tabbed, this selector references the tabs inside of the launcher panel.
6. #uiq_launcher_footer - This selector references the content inside of the Launcher Footer. Elements such as the progress bar and percentage tickers in the launcher footer can be referenced from here.
   
   Note: For changing the icon of the launcher, please refer to our documentation here: How to update a Launcher icon through CSS?
   
   

Additional Notes:

• You can insert classes and ids into your campaign via the HTML editor in the campaign edit page. These CSS selectors can also be referenced via Custom CSS for any needed modification.
• Height and width for the Tooltip Content can be adjusted in-app inside of UserIQ using the following Height and Width fields. These changes will be reflected on the tooltip content modal.