Adding a border around all images in webhelp.xsl

[Christine]

Hi All,

Does anyone can tell me how to add a border around all my images in my webhelp.xsl file please ?

I had no trouble in adding a specific role for my PDF output and it worked perfectly when I added the following lines to my code in my pdf.xsl:

<xsl:template match="d:imageobject[@role = 'border']">
<fo:block border="1pt solid black">
<xsl:apply-imports/>
</fo:block>
</xsl:template>

Unfortunately, I do not know how to transpose these lines for my Webhelp output...
I noticed that the images were set around a frame so I set the parameter "make.grahic.viewport" at 0 in the transformation scenario for the webhelp output.

So far, I tried the following lines in my webhhelp.xsl file but it didn't work :

<xsl:template match="d:imageobject[@role = 'border']">
<span style="border:1px solid black">
<xsl:apply-imports/>
</span>
</xsl:template>

Your help would be really appreciated.
Many thanks in advance.
Christine

[bogdan_cercelaru]

Hello Christine,

To add border around all images in webhelp output, you should use a custom CSS file with the following CSS:

Code: Select all

div.fignone img {

    padding: 0;

    border: 1px solid black;

}

You can find information about how to use a custom CSS in our manual: WebHelp System Output / Customizing WebHelp Systems / Customizing WebHelp Output with a Custom CSS

Edit the WebHelp transformation scenario and open the Parameters tab.
For a DITA transformation, set the args.css parameter to the path of your custom CSS file. Also, set the args.copycss parameter to yes to automatically copy your custom CSS in the output folder when the transformation scenario is processed.

Regards,
Bogdan

[Christine]

Hello Bogdan,

Many thanks for your reply.
In fact, I made some investigations and I found out that my webhelp output is based on a webhelp skin.
Acccording to your knowledge, would it be possible to get all my images bordered if I copy/paste directly the code you mentioned in your previous post in my directory (I am using docbook not DITA):

Applications\Oxygen XML Editor 17\frameworks\docbook\xsl\com.oxygenxml.webhelp\oxygen-webhelp\resources\css\webhep_topic.css ?

If so, maybe you can tell me if there is a specific part in webhep_topic.css into which I should paste it ?

Many thanks in advance for your help,
Regards,
Christine

[bogdan_cercelaru]

Hi Christine,

It should work if you copy/paste the code directly to the end of the Applications\Oxygen XML Editor 17\frameworks\docbook\xsl\com.oxygenxml.webhelp\oxygen-webhelp\resources\css\webhep_topic.css file.

Regards,
Bogdan

[Christine]

Thank you for your prompt reply Bogdan but unfortunately, it didn't work...

Regards,
Christine

[Christine]

Many thanks for your prompt reply Bogdan but unfortunately, it didn't work...

While the webhelp output is generated from the transformation scenario, I can see the following log line at the bottom of my Oxygen XML Editor for each image:

[xslt] Loading stylesheet C:\Program Files (x86)\Oxygen XML Editor 17\frameworks\docbook\xsl\com.oxygenxml.webhelp\xsl\docbook\images.xsl

Is there something I could try at the level of this file ?

I know I am asking you a lot of questions as I am a beginner in XML and Oxygen XML Editor...
Thank you anyway...
Best regards,
Christine

[bogdan_cercelaru]

Hi Christine,

For Docbook you should use the following CSS selector

Code: Select all

.figure img {

    padding: 0;

    border: 1px solid black;

}

I've tested and it worked as expected when added at the end of the Oxygen XML Editor 17\frameworks\docbook\xsl\com.oxygenxml.webhelp\oxygen-webhelp\resources\css\webhep_topic.css file.

Regards,
Bogdan

[Christine]

Yes it worked perfectly !! Many thanks for your help Bogdan !

Best Regards,
Christine