Play button on Xplains once published

Please post all questions on Help+Manual 8 here

Moderators: Alexander Halser, Tim Green

Post Reply
Carol_Ann
Posts: 10
Joined: Thu Jan 14, 2021 9:56 am

Play button on Xplains once published

Unread post by Carol_Ann »

Good afternoon
Is there anyway that I can change the colour and size of the Red play button on the Xplains once published?
I have not been able to find anything.
Thanks so much
User avatar
Tim Green
Site Admin
Posts: 23157
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Play button on Xplains once published

Unread post by Tim Green »

Hi Carol Ann,

You can change the size of the Play button by adding some simple CSS to your skin. Open the .hmskin file in Help+Manual and go to Configuration > HTML Page Templates > Default. Locate the closing </head> tag in the Source Code and add this style information directly before it:

Code: Select all

.xplplaybutton {
	width: 150px !important;
	height: 150px !important;
     }
Adjust the width and height values to get the size you want.

The color can't be changed with CSS because the button is an SVG graphic. You can't currently change the color of the button directly because Help+Manual sets the color to red automatically when you publish with an embedded Xplain. If you want to change the color, you need to do this in the published HTML topic file, and you would need to change this every time you publish, so you may not want to do this. However, if you do, here's how:

Locate the HTML topic file containing the Xplain in your WebHelp output folder and open it in an editor. Locate the tag starting with

Code: Select all

<div class="helpxplain" 
Just search for that text. Then add the attribute

Code: Select all

data-playbuttoncolor="#0000ff"
with your own color code (the example is for blue) to the tag, like this:

<div class="helpxplain" style="width:100%;height:auto" data-url="./xplain/whyms.html" data-lightbox="true" data-aspect="56.25" data-title="Enter the title of your presentation" data-load="view" data-playbutton="true" data-playafter="2.00" data-playbuttoncolor="#0000ff"></div>

If you're not familiar with CSS color codes you can find a list here (you can use the standard names instead of the codes, if you want):

https://www.w3schools.com/cssref/css_colors.asp
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.
Post Reply