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
Play button on Xplains once published
Moderators: Alexander Halser, Tim Green
- Tim Green
- Site Admin
- Posts: 23181
- Joined: Mon Jun 24, 2002 9:11 am
- Location: Bruehl, Germany
- Contact:
Re: Play button on Xplains once published
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:
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
Just search for that text. Then add the attribute
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
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;
}
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"
Code: Select all
data-playbuttoncolor="#0000ff"
<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.
Tim (EC Software Documentation & User Support)
Private support:
Please do not email or PM me with private support requests -- post to the forum directly.