Hotspot Colors

Please post all questions and comments regarding Help & Manual 7 here.

Moderators: Alexander Halser, Tim Green

Post Reply
User avatar
Dave Mate
Posts: 3
Joined: Mon Feb 12, 2018 4:28 pm

Hotspot Colors

Unread post by Dave Mate »

Hey guys,

I am doing this little splash screen for my manual, and I would like to use hotspots in it - for the user to access specific versions more quickly.

My question is, however, whether there is an option to change the color of unselected (or highlighted, for that matter) hotspot items because they kind of seem way too dark to me and it breaks the whole design (see the picture).

https://imgur.com/a/ZA5Qw

Thanks for your help :)
User avatar
Tim Green
Site Admin
Posts: 23155
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Hotspot Colors

Unread post by Tim Green »

Hi Dave,

You can change this by adding your own modified version of the hotspot CSS to your HTML page template in the skin you are using to publish. To do this, open the .hmskin file in Help+Manual and in the Project Explorer navigate down to Configuration > HTML Page Templates > Default. In the Source Code locate the closing </head> tag and insert this directly before it:

Code: Select all

<style type="text/css">
/* CSS for responsive image maps */
.hmImageMap a.hmHotspotRect { display:block; position:absolute; border: 1px solid transparent; background:#000; opacity:0.01; filter:alpha(opacity=1)  }
.hmImageMap a.hmHotspotEllipse { display:block; position:absolute; border-radius:50%; border: 1px solid transparent; background:#000; opacity:0.01; filter:alpha(opacity=1) }
.hmImageMap:hover a.hmHotspotRect {opacity:0.3; filter:alpha(opacity=30); }
.hmImageMap:hover a.hmHotspotEllipse { opacity:0.3; filter:alpha(opacity=30); }
a.hmHotspotRect:hover { border:1px solid #000; background:#FFF; opacity:0.3; filter:alpha(opacity=30) }
a.hmHotspotEllipse:hover { border:1px solid #000; background:#FFF; opacity:0.3; filter:alpha(opacity=30) }
</style> 
The only thing you need to change to make the hover color less dark are the opacity:0.3; filter:alpha(opacity=30) attributes. You need to change both in the same place in exactly the same way, because the different formats are for different browsers. The 0.3 and 30 values both mean 30% opacity, so you could try changing them to 0.2 and 20.

WARNINGS
DON'T change the 0.01 and 1 values in the other settings to 0! That is required for some badly-behaved browsers and doing that would cause problems. Also be careful about reducing the opacity too much. It may be looking dark on the device you are viewing it on, but on the great majority of devices it will look just fine. If you reduce it too far, many users won't even see that something is happening when you hover with the mouse. :?
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
User avatar
Dave Mate
Posts: 3
Joined: Mon Feb 12, 2018 4:28 pm

Re: Hotspot Colors

Unread post by Dave Mate »

Wow, Tim. Thank you so much for your help!

Looks much better now! :mrgreen:

Dave
Post Reply