How to Brand your Surveys

CardioLog has built-in options to help customize your surveys to match the look and feel of your site. Additionally, you can use CSS to further brand your surveys with your organization's logos and style to fully present them as your own.

This article contains information on how to design surveys (e.g., fonts, colors, spacing) using CSS. 

1. Create Custom CSS Rules
2. Apply your Custom CSS Rules

Create Custom CSS Rules

1. Create a survey.
2. In the main Surveys window under Visitor Engagement, select the survey and click Preview. 
3. Use the browser console to inspect the HTML and CSS elements and edit the style of the survey. On most browsers, you can press the F12 key to open the Inspector and select elements.
   
    
   Surveys Dashboard
    

4. Create custom rules for the desired survey elements within the CSS code. 
   
   For example, you can change the text color of list items to red by creating the following CSS rule:

    #cas li {color:red;}

   
   
   Survey Preview
   
   Note: You must specify the element ID (eg., the survey div ID is #cas) in order to create CSS rules that will apply to surveys.

Apply your Custom CSS Rules

1. Add the custom CSS rules to [CardioLog Installation Folder]\CardioLog\Styles\customSurvey.css. When custom rules are added to this file, changes will only apply to the survey preview in the CardioLog user interface, so you can test your changes before you make them public.
   The [CardioLog Installation Folder] is installed on "C:\Program Files\Intlock\CardioLog\" by default.
   
   
   
   
2. Add the custom CSS rules to [Installation Directory]\CardioLogAgent\custom.css. When custom rules are added to this file, changes will apply to the surveys that appear publicly in SharePoint.
   [Installation directory] - by default, the CardioLogAgent folder is located in the CardioLog Installation folder. If the CardioLog Analytics SharePoint feature is installed, the CardioLogAgent folder is located on all SharePoint WFEs (Web Front Ends) in the SharePoint website "_layouts" folder.

Note: Intlock cannot guarantee functionality for CSS code that has been edited manually by the client according to the Service-Level Agreement (SLA).