Guided Tour - How to change the look and feel

[Moedeb]

I have been trying to update the look and feel of the guided tour for the Service Portal for a little bit now and wasn't able to find anything that specifically told me where and what details I needed to change in order to do this.

So after looking around I've found this works for me and wanted to share it in case others also want to be able to do the same thing.

Disclaimer: I am still pretty new to ServiceNow development and do not have any sort of scripting background, I'm self taught and generally find things through the forum or through trial and error, so I cannot be sure that this is the absolute best and most effective way to do this and do not know if it will inadvertently affect anything else, so please use this knowing that. It is working for me and that's the best I can offer sorry.

So you need to find and edit the Style Sheet being used for your theme. In my case I'm on Madrid and am using 'sp-theme-la-jolla.css' This can be found under "Service Portal >> CSS"

If you don't know your theme, check the Service Portal settings.

I added the following to the top of my style sheet called "sp-theme-la-jolla.css" (as mentioned use the one that goes with the theme you are using).

/*------This is for callout colors for guided tour--------------------------------------------------------------------*/

/*--------This is for the introduction box--------*/

/*--Border around entire box--*/
div.gtd-modal .modal-dialog .modal-content.gtd-modal-content {
 border-color: #383a42;
}

/*--Header of introduction box--*/
.modal-header {
  background-color: #b2c5d8;
  
  
  /*------line at bottom of the header--*/
   padding: 15px;
   border-bottom: 2px solid #00a7d3;
}

/* The body and footer will set details for both introduction and conclusion */
.modal-body {
  background-color: #b2c5d8;
  
}

.modal-footer {
  background-color: #b2c5d8;
}

/* Settings for the button on the introduction */
div.gtd-modal .modal-dialog .modal-content.gtd-modal-content .gtd-begin-tour {
  color: #000000;
  background-color: #ffffff;
  border-color: #b2c5d8;
}

/*-------------End of introduction box-----------*/


/*--------This is for the conclusion box--------*/
/*--Header of conclusion box--*/
div.gtd-modal .modal-dialog .modal-content.gtd-modal-content .gtd-header-without-text {
  background-color: #b2c5d8;
}

/* Settings for the button on the conclusion */
div.gtd-modal .modal-dialog .modal-content.gtd-modal-content .gtd-complete-tour {
  color: #000000;
  background-color: #ffffff;
}

/*-------------End of conclusion box-----------*/


/*-----Below is for callout instructions/comments-----*/
/* Settings for the 'Next' button */
#gtd-callout-next {
  color: #000000;
  background-color: #ffffff;
  border-color: #b2c5d8;
}

/* Settings for the callout body */
#gtd-callout {
  background-color: #b2c5d8;
  border-color: #000000;
}

/*-callout arrow-*/
div[class*='tour-tour'].hopscotch-bubble .hopscotch-bubble-arrow-container.down .hopscotch-bubble-arrow {
  border-top: 17px solid #b2c5d8; /*-sets size of the arrow first (17px is default) then sets the color of the arrow-*/
}

/*--------End of callout settings for guided tour------------------------------------------------------------*/

 Now save it and test your guided tour, all colors should have changed. Simply update the colors to suit what you want in each section of the Introduction, Callout and Conclusion.

I've tried to comment each area so it is as easy as possible to know what you are going to change.

Hope this helps.