CSS-PDF: Borders around notes are too big

[mdslup]

Oxygen 22, 2020021016

I want to but a red border around my Warning notes. I add this rule to my CSS:

.note_warning {
border: 2px solid red;
}

However, this extends the border all the way to the end of the div, as seen here:
https://i.imgur.com/QmYdnf6.jpg

I want this border to end at the end of the text. Which means I don't want to put the border on the div itself, but rather something inside the div.

Looking at the HTML, I see that the structure is:

<div type="note_warning">
:: before <!-- Add warning icon -->
<span>WARNING</span>
Warning Text
<div>

Unfortunately, there is no structure that represents the area that I want. I need to add a new div that includes:

::before
span
warning text

If this were webhelp responive, I would edit the page templates. But seeing as how this is only a merged file, I don't what templates to edit to include this div.

Thanks.

[julien_lacour]

Hello,

You will need to use a publishing template instead of a simple CSS customization (if you were using only 'args.css' in your transformation).
All the information about Publishing Templates can be found in the documentation (check also all the sub-topics).
Then you need to to the following steps:

1. Inside the publishing template add the following extension point:

   Code: Select all

   <xslt>
     <extension file="note__content.xsl" id="com.oxygenxml.pdf.css.xsl.merged2html5"/>
   </xslt>
   

   This extension is called when generating the '.merged.html' file (from the .merged.xml' file)
2. Unzip the attachment file

   note__content.zip

   (803 Bytes) Downloaded 141 times

3. Copy the XSL stylesheet and update the extension point path accordingly
   The template creates and additional <span class="note__content"> element inside the note.
4. Update your CSS stylesheet to match the new element with the following selector:

   Code: Select all

   .note_warning .note__content {
       border: 2px solid red;
   }
   

Regards,
Julien