I also wanted to lighten the backdrop so it's easier to see the page behind the tour.
I found the following works well in a custom CSS file or the custom CSS field on the theme (in Site admin > Appearance > Themes > [themename] ):
.tour-backdrop { opacity: 0.5; }
I added the following CSS to make it more readable.
But I have some trouble with the bread crumb, otherwise I would have set the opacity to 1
.tour-step-background {
background-color: white;
background-image: initial;
border-radius: 0px;
opacity: 0.5;
}
I also changed the close button:
.popover[class*="tour-"] .popover-navigation [data-role="end"] {
background-color: #7a7a7a;
float: right;
font-size: 0.9em;
margin: 10px;
}.popover[class*="tour-"] .popover-navigation [data-role="end"]:before {
content: "\f011";
font-family: FontAwesome;
left:-5px;
}
and the footer info:
.usertour a {
color: #c0c0c0;
padding-left: 21px;
}
.usertour a:before {
content: "\f09c";
font-family: FontAwesome;
left:-5px;
}
