Resolve issues with the lay-out of the pop-up invitation

Resolve issues with the lay-out of the pop-up invitation


Are you experiencing issues with the way the invitation pop-up looks? Are buttons unreadable and/or disappearing?

Conflicting CSS is causing this unwanted result

Task Analytics uses custom stylesheets (CSS) to add styling to the pop-up. When you’re also using styles for the same elements as Task Analytics is, it can interfere with each other. We’ve seen this problem occur when you’re styling <button>-elements.

The positioning of the pop-up isn't right

You can always set the preferred pop-up positioning,  but if this isn't working, you can add custom styles to adjust the positioning. Use Google Tag Manager or your Content Management System to add the following stylesheet to show the pop-up at a different location:
  1. <style>
  2. #_tmc {
  3.      left:25px!important;
  4.      bottom:40px!important
  5. }
  6. </style>

Caching causes delays in the positioning of the pop-up
Task Analytics stores pop-up settings in your browser to make the pop-up load fast. This means it is possible you aren't seeing the pop-up on a different location after changing the pop-up positioning in the admin-section.


Add extra CSS to tackle the problem

The best way to fix this problem is by adding your custom stylesheets to your website. This can be done through your prefered tag manager or by adding the stylesheets directly onto your website.

You can adjust and add the following code to adjust the Task Analytics pop-up so it’s readable and in line with your company style guide:
  1. <style>
  2. /* This style is to prevent the existing stylesheets to interfer with the Task Analytics survey buttons (stylesheet). */
  3. #_tmc BUTTON._tmcNav{background-color:#FFF!important;color:#008bd0!important;border-bottom:2px solid #008bd0}#_tmc BUTTON._tmcNav:hover{background-color:#008bd0!important;color:#FFF!important}#_tmc ._tmcDone._tmcNav{background:#FFF!important;color:#00842d!important;border-bottom:2px solid #00842d}#_tmc button._tmcClose,#_tmc button._tmcMinimize{background:#FFF!important;color:#00842d!important}#_tmc button._tmcClose:hover,#_tmc button._tmcMinimize:hover{background:#008bd0!important;color:#FFF!important}#_tmc ._tmcDone._tmcNav:hover{background:#00842d!important;color:#FFF!important;border-bottom:2px solid #00842d!important}#_tmc ._tmcDone ._tmcSpinner{background-color:#00842d!important}#_tmc ._tmcClose,#_tmc ._tmcMinimize,#_tmc ._tmcClose:hover,#_tmc ._tmcMinimize:hover{background-color:#FFF!important;color:#008bd0!important}#_tmc ._tmcDone._tmcNav:hover > ._tmcSpinner{background-color:#FFF!important}
  4. </style>
You can download the CSS-file in the attached ZIP you find at the bottom of this article.


Modify the CSS to match your color palette

The script above uses 3 different colors, being blue (#008bd0), white (#FFF) and green (#00842D). You can change these colors accordingly. Don't forget the change all the colors where they occur.


Use CSS custom properties
You can also experiment with the use of CSS custom properties (variables) to make changing the colors easier. However, this is not always supported so test this before publishing it. Download the file attached to this article below.