1. Home
  2. Customization
  3. Customize VisualSP
  4. Style Help items with custom CSS

Style Help items with custom CSS

Applies to: VisualSP
Print Friendly, PDF & Email

Help items can be easily styled with CSS to more closely match your company brand. VisualSP gives you styling control at the app level. You can find the style section by going to the menu in the Help panel and clicking on Manage My Subscription.

Scroll down the Manage Subscription page to the Look and Feel section and click on Toggle Look and Feel Advanced Properties.

Your screen will look like this:

Section 1 is a drop down where you can select the application to edit.

Section 2 is where you paste the CSS. No <style> tag is necessary. Just paste the code into the box and remember to save your work.

Selectors that apply to Help items

Tab

  • .Visualsp-handle

Banners

  • .visualsp-banner-container : the main container. Wraps everything and has another class to determine top or bottom (visualsp-banner-container-top and visualsp-banner-container-bottom).
    • .visualsp-banner : This is the banner itself and is where the background and foreground color is set. You’d have to use !important to override the colors.
      • .visualsp-banner-header : This basically just contains the "x" button which is in a div with the .visualsp-dialog-btns class assigned.
      • .visualsp-banner-content : This contains the content as entered by the user. Anything inside this is dependent on what the user provides.

Walkthroughs

  • .hopscotch-bubble : This is the main container for the bubble and the arrow.
    • .hopscotch-bubble-container : This is the main container for the bubble. The width and padding is added directly so you’d need to use !important to override.
      • .hopscotch-bubble-number : This contains the step number.
      • .hopscotch-bubble-content : This contains the actual content
        • .hopscotch-title : an H3 that contains the title.
        • .hopscotch-content : Contains the content as entered by the user.
      • .hopscotch-actions : Contains the action buttons
        • .hopscotch-nav-button : This is a BUTTON element. Will also have .next, .prev, .hopscotch-next, .hopscotch-prev, and hopscotch-cta assigned.
      • .hopscotch-bubble-close .hopscotch-close : This is BUTTON element that is the X in the top right corner.
    • .hopscotch-bubble-arrow-container : This is the container for the arrow. It also will have .hopscotch-arrow  and either .up, .right, .left, .down.

Media Dialogs

  • .visualsp-overlay-media : This is assigned to the overlay background that blackens the area around the dialog.
  • .visualsp-dialog-media : This is the main wrapper for the dialog
    • .visualsp-dialog-title : This wraps the title bar which includes the action buttons in the right corner.
      • .visualsp-dialog-title-text : This is assigned to an H1 tag and is the dialog title.
      • .visualsp-dialog-btns : This contains the buttons.
        • .visualsp-dialog-btn : This represents an individual A element. It will also have .visualsp-dialog-btn-resize class for the resize button, the close and pop-out buttons don’t have a specific class assigned so you’d have to use .visualsp-dialog-btn[title=Popout] or .visualsp-dialog-btn[title=Close dialog] to select them.
    • .visualsp-media-iframe : This is an IFRAME element that contains the content – anything inside of this can’t be altered.
Note

While custom styling is allowed, we do not support your styling.

Updated on July 27, 2020

Related Articles