How to use custom css for PDF-templates?

[ctheuring]

i.e. to add a border for a table and make less padding.

2nd:
In documentation I found:
"Administrator can add Templates tab at Administration > User Interface. An access to templates must be defined in Roles (Templates scope)."
But where and how? And is this the right place to change the standard-design of a table for PDF?

Christoph

[victor]

ctheuring,

i.e. to add a border for a table and make less padding.

This can be done in Code View (screenshot 1) of any template.

But where and how? And is this the right place to change the standard-design of a table for PDF?

In Administration > PDF Templates. And yes, this is a right place.

More about it:

https://www.espocrm.com/tips/pdf-template/

https://www.espocrm.com/features/printing-to-pdf/

https://docs.espocrm.com/user-guide/printing-to-pdf/

[ctheuring]

Thank you Victor ... but - sorry -
the <p> code in your screenshot is nonsence. there is a <p Style ...> and next a </p> ... nothing code between for affect anything.
I've tried different html-codes ... i.e. < td style="width:33%"> or <table border="1"> most of this html-codes are debricated -> use CSS ... and also have no resuts.
And with saving, the code was modified. Is the code HTML4 oder HTML5?
And WHERE can I position a css-file?
Thanks for your effort
Christoph
P.S.
tomorrow I'll check your links

[shalmaxb]

Hello, there are two PDF engines in espoCRM. You can choose the one, you want to use in Administrator -> settings (in German Einstellungen). These two engines behave differently each, DomPDF is better for CSS. As far as I know, CSS has to be inline, not via linked CSS-file. In TCPDF you can style some tags via inline style attribut as in HTML.

As I already have a lot of templates in TCPDF, I did not move to DomPDF, but I guess, it would be the better choice, when starting to create templates.

TCPDF has a lot of unexpected behaviour, but when you learned how to cope with that, the results are not that bad. Anyway you will have to learn how to use the template languae (which is handlebars) to be able to use it to your favour.

I write my templates firstly in a HTML editor and copy the result into the template of espoCRM. Never use the WYSIWYG editor, the results will end up in a total mess, use the code view of the editor. But be aware this code view has no formatting at all. Sometimes the formatting, to make it visually pleasant, will cause wrong design. Whenever the result would not be as expected, look into the code view again, mostly the editor messed something up on saving. The reason for that could be anything. Sometimes one space digit too much may cause that.
Be ready to spend quite a time creating templates, that work, because you will have a lot of trial and error. Once you got used to it, the results are not too bad.

[ctheuring]

Moin shalmaxb,

I use - as recoomended because of better use of css - the DomPDF.
But I can't find the place to save a custom-css (i.e. as in a sister-template in WordPress) that would be embedding (overwrite the content of definitions from espo-css with the content of the custom-css, i.e. the definitions of h1, h2, h3 etc.) Thats the best way to make changes for your own application without losing the possibilities of updates (because of overwriting during an update/upgrade of espoCRM). I'm asking aunt google about custom-css ... no answer.
I think, it's just not implemented. I'll make a request.
In html5 it is deprecated to use markups directly in the code - it's recommended to use css!
As far I try your tip with writing code in a html-editor - thanks, good idea!

Christoph
P.S.
The reason of mess is a bad parser, which is not up on current html-language.

[yuri]

<table style="width: 100%" border="1">
  <tbody>
    <tr>
      <td style="width: 30%">Test 1</td><td>1</td>
    </tr>
    <tr>
      <td style="width: 30%">Test 2</td><td>2</td>
    </tr>
  </tbody>
</table>​

This works fine. None of used attributes is deprecated.

[yuri]

It seems you mixes the PDF CSS and the Espo UI CSS. You can define a custom CSS for the UI. https://docs.espocrm.com/development/custom-css/

If you see an inline styling, it's for a reason. E.g. the list view has widths of columns defined inline. Because they are defined dynamically by the layout (Administration > Entity Manager > {Your Entity} > Layouts > List.

[ctheuring]

your are right yuri - I had diffenent syntax, so it doesn't run. Your example made the day.
Sorry.
Christoph