Changing the copy/paste button for <codeblock> in webhelp

Post here questions and problems related to editing and publishing DITA content.
Dan02
Posts: 31
Joined: Thu Sep 30, 2021 6:46 pm

Changing the copy/paste button for <codeblock> in webhelp

Post 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
Costin
Posts: 828
Joined: Mon Dec 05, 2011 6:04 pm

Re: Changing the copy/paste button for <codeblock> in webhelp

Post 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
Costin Sandoi
oXygen XML Editor and Author Support
Dan02
Posts: 31
Joined: Thu Sep 30, 2021 6:46 pm

Re: Changing the copy/paste button for <codeblock> in webhelp

Post by Dan02 »

Thanks Costin!

"class=copyTooltip" was what I was looking for.

Cheers,
Dan
Dan02
Posts: 31
Joined: Thu Sep 30, 2021 6:46 pm

Re: Changing the copy/paste button for <codeblock> in webhelp

Post 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
alin
Site Admin
Posts: 268
Joined: Thu Dec 24, 2009 11:21 am

Re: Changing the copy/paste button for <codeblock> in webhelp

Post 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
Alin Balasa
Software Developer
<oXygen/> XML Editor
http://www.oxygenxml.com
Dan02
Posts: 31
Joined: Thu Sep 30, 2021 6:46 pm

Re: Changing the copy/paste button for <codeblock> in webhelp

Post by Dan02 »

Thanks Alin!
This is the info I needed. We were able to update the button by overriding these settings.
Cheers,
Dan
Post Reply