Custom CSS with DomPDF

[telenieko]

Hi,

On the release notes for 7.4 there is the new DomPDF engine and some mention about CSS but... How does one go about adding CSS to the PDF Templates?

Styles cannot be added to the template itself as the WYSWYG editor strips the style tags.

Ideally I would like to have a custom CSS and have it inserted to all my templates, more or less like how you can do for the frontend: https://docs.espocrm.com/development/custom-css/

[yuri]

Only inline CSS (style attribute) supported (in Espo). Dompdf has much better support than Tcpdf.

[yuri]

Footer example:

<div style="color: #AAA; background-color: blue; height: 100%; padding-top: 5mm; text-align: center; margin-left: -10mm; margin-right: -10mm;">Page {pageNumber}</div>

[telenieko]

Only inline CSS (style attribute) supported (in Espo). Dompdf has much better support than Tcpdf.

Does this hold true when using Dompdf Engine?

If so, any plans on permitting adding CSS resources? (Either global or on a per-template basis)

[esforim]

Is there any documents that we read more of this domPDF CSS capability? I fail to find their documents.

[bobcompleet]

Hi telenieko,

If I understand you correctly, you mean that you want to include a stylesheet so you can better style the elements in the pdf templates. The reason some of the more advanced css is not working with the template editor is for safety. The wysiwyg editor escapes all html that isn't whitelisted. Unfortunately this means you cannot add a `<style>` tag with an inline stylesheet inside the wysiwyg editor because of this.

I think there is a workaround though:
As you can see here https://github.com/espocrm/espocrm/b...mposer.php#L77
The DomPDF implementation is doing what you want already. If you want to add extra styling to the pdf, you can create an extension and add the css to the HtmlComposer in the Custom namespace. (Theoretically you can even make the css editable per template and load it there too, though this might cause security issues if not done properly.)

yuri is this the preferred way? I don't suppose you plan on creating direct css editing inside the GUI as a second way to change styles?

esforim https://github.com/dompdf/dompdf/wiki/Requirements

[esforim]

Thank Bob, didn't notice they have Wiki on there. You seem like expert in this, anything fancy you create with domPDF yet?

[bobcompleet]

I'm currently working on creating a custom frontpage with domPDF, I've figured out the part about the HtmlComposer that way. In my case I just want an extra wysiwyg field to create a cover page without the normal header/footer.

[esforim]

Sound good, I been trying to get rid of Words (Misosoft) and permanent to EspoCRM as document generation but the formatting just too ugly with my current setup.

[esforim]

bobcompleet
Have you create any template yet? I'm starting to test it but I don't understand how it work...

For example: https://github.com/dompdf/dompdf/wiki/Common-Use-Cases
I try these code but it doesn't seem to do anything.

There is also a bunch of code here but I don't know what to do with it:

https://github.com/dompdf/dompdf/wiki/CSSCompatibility

A brief usage guide would be appreciate.

[esforim]

A brief testing using the Wiki, it doesn't seem to do anything, we expecting something like this right?

foo

Result image:


Using this HTML code:

[esforim]

From yuri post: https://forum.espocrm.com/forum/gene...2440#post92440

How do we tell which is inline and which isn't in the Wiki?

[esforim]

Interesting, I think I get it. Will work on this and post some result.

Too bad it seem like Font: don't work though. It will default to the main Font in EspoCRM template.

[shalmaxb]

Inline means, that all the css goes into the HTML tags, as explained for example here: https://www.freecodecamp.org/news/in...-tag-directly/

You can also separate css and html beforehand and with both files you may use a css inliner tool (online tool) like: https://templates.mailchimp.com/resources/inline-css/

You can create a file like this and pass it to the inline tool

<style>
body { background-color: YellowGreen; }
p { color: #fff; }
</style>

and you will get a file with inline css:

<body style="background-color: YellowGreen;">
<h1>This is a heading</h1>
<p style="color: #fff;">This is a paragraph of text.</p>

This way every <p> will get the style inside the HTML tag.

[esforim]

> Too bad it seem like Font: don't work though. It will default to the main Font in EspoCRM template.

Is what I theorize true or I'm just wrong (hopefully I'm wrong). I want to mix and match a few Font.

Which tool do you go and do your design now?

I'm loving the padding:left field at the moment, I think with this I will finally be able to do some trickery