Page 1 of 1
Changing the copy/paste button for <codeblock> in webhelp
Posted: Fri Nov 12, 2021 10:40 pm
by Dan02
Hi,
We are looking to change the look of the copy/paste button for <codeblock> output in webhelp, and curious what needs to be changed to do that? This very old post refers to the button that has now been implemented, and that we are looking to update the appearance of if possible:
post30078.html?hilit=copy%20button%20webhelp#p30078
Thanks!
Dan
Re: Changing the copy/paste button for <codeblock> in webhelp
Posted: Mon Nov 15, 2021 12:49 pm
by Costin
Hi Dan,
As WebHelp topics in the output are in fact HTML files, it is possible to style most of the elements appearing in the WebHelp Responsive output through your own CSS customization.
In this case, as the Copy button has a dedicated class set on it ("class=copyTooltip"), you could use the class to match that specific element in the output and style it as you wish.
You should take a look at the
How to Use CSS Styling to Customize the Output section from the User-Guide, for more information on how to use your internet browser's CSS inspector to identify the elements you could match through your custom CSS and how you could then use the custom CSS in your transformation to publish the output with the style changes you performed.
Regards,
Costin
Re: Changing the copy/paste button for <codeblock> in webhelp
Posted: Tue Nov 16, 2021 12:32 am
by Dan02
Thanks Costin!
"class=copyTooltip" was what I was looking for.
Cheers,
Dan
Re: Changing the copy/paste button for <codeblock> in webhelp
Posted: Thu Nov 18, 2021 8:27 pm
by Dan02
Hi Costin,
This doesn't seem to be working for us. Is there possibly some other class or parameter that controls the appearance of the copy/paste button? Or do you have a working example that you can share?
Thanks,
Dan
Re: Changing the copy/paste button for <codeblock> in webhelp
Posted: Fri Nov 19, 2021 2:31 pm
by alin
Hi Dan,
WebHelp uses the following CSS rules to style the
Copy button:
Code: Select all
.codeblock .copyTooltip{
background: #fafafa url("../img/Copy.png") no-repeat 85% 50%;
background-size: 15px;
width: 68px;
height: 32px;
margin-top: -7px;
color: #888;
border:1px solid #CCCCCC;
right: 15px;
position: absolute;
cursor: pointer;
opacity: 0.5;
font-size: 15px;
border-radius:0 7px 0 0px;
}
.copyTooltip::before{
content: " Copy ";
line-height: 2em;
text-indent: 0.5em;
}
.codeblock .copyTooltip:hover{
opacity: 1;
}
You need to override the above rules to match your desired UI design.
The image referenced by the
background property is located in:
[DITA_OT_DIR]/plugins/com.oxygenxml.webhelp.responsive/oxygen-webhelp/app/img/Copy.png
Regards,
Alin
Re: Changing the copy/paste button for <codeblock> in webhelp
Posted: Wed Nov 24, 2021 6:33 pm
by Dan02
Thanks Alin!
This is the info I needed. We were able to update the button by overriding these settings.
Cheers,
Dan