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

[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]

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

[Dan02]

Thanks Costin!

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

Cheers,
Dan

[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]

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

[Dan02]

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