Style Help items with custom CSS

Applies to: VisualSP

Note

VisualSP believes in providing as much freedom and flexibility as reasonably possible in branding your end user's experience within the VisualSP application. To that end we have provided the ability for our customer administrators to implement custom CSS styling within your tenant application. It is important to note that we are not able to validate or provide direct support of the specific CSS to be implemented so caution should be exercised when building a custom CSS solution so that it does not negatively impact your end user's experience or result in a service disruption of your tenant application.

Help items can be easily styled with CSS to more closely match your company brand. VisualSP gives you styling control at the app level and at the help item level. For styling enterprise-wide branding, such as the look of the help tab, 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

Example CSS for styling the VisualSP tab background color to green and the accompanying text to white:

#visualsp-handle {
background-color: #157A42;
}

#visualsp-handle .visualsp-handle-text {
color: white!important; /* Needs important flag to override */
}

Banners

In addition to the enterprise-wide styling that is available at the application level, if your goal is to only style a single banner, this can be done in the editing window by clicking View -> Source code:

Add your CSS within <style> </style> tags in the Source Code window.

.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.

Example CSS for changing the padding of the Banner help item:

.visualsp-banner-container .visualsp-banner {
padding: 35px;
}

Example CSS for changing the position of the Banner close button:

.visualsp-banner-container .visualsp-banner .visualsp-banner-header .visualsp-dialog-btns {
right: 55px;
top: 50%;
}

Walkthroughs

Individual Walkthrough steps can be customized either at the source code level, as shown in the Banner example above, but also in the Events section of the Walkthrough Steps editor window:

Add the Set CSS activity and then open the dialogue:

Select the element you want to change the styling
Add the style name (ie., background-color, font-size, etc.)
Add the style value (is., red, 18px)

Here are some additional walkthrough elements you can style:

.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.

Example CSS for changing the walkthrough step number background and removing dependence on image sprite:

div.hopscotch-bubble .hopscotch-bubble-number {
background: #000;
padding-right:0;
border-radius: 15px;
}

Example CSS for changing the walkthrough "next" button to a green gradient:

div.hopscotch-bubble .hopscotch-nav-button.next {
border-color: #fff;
color: #fff;
background-color: #59981A; /* Blue to green */
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#81B622', endColorstr='#59981A');
background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#81B622),color-stop(100%,#59981A));
background-image: -webkit-linear-gradient(to bottom,#81B622 0,#59981A 100%);
background-image: -moz-linear-gradient(to bottom,#81B622 0,#59981A 100%);
background-image: -o-linear-gradient(to bottom,#81B622 0,#59981A 100%);
background-image: linear-gradient(to bottom, #81B622, #59981A 100%);
}

Example CSS for changing the walkthrough "back" button to a red gradient:

div.hopscotch-bubble .hopscotch-nav-button.prev{
border-color: #d10000;
color: #fff;
background-color: #59981A; /* grey to red */
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#D10000', endColorstr='#FF0000');
background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#D10000),color-stop(100%,#FF0000));
background-image: -webkit-linear-gradient(to bottom, #D10000 0, #FF0000 100%);
background-image: -moz-linear-gradient(to bottom, #D10000 0, #FF0000 100%);
background-image: -o-linear-gradient(to bottom, #D10000 0, #FF0000 100%);
background-image: linear-gradient(to bottom, #D10000 0, #FF0000 100%);
}

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.

Example CSS for changing the media overlay background color to blue:

.visualsp-overlay {
background-color: rgba(28, 186, 112,.75);
}

Example CSS for changing the media overlay title font weight:

.visualsp-dialog .visualsp-dialog-title h1 {
font-weight: 600;
}

Updated on December 20, 2023

Tagged: VisualSP

Selectors that apply to Help items

Tab

Banners

Walkthroughs

Media Dialogs

Related Articles