Announcement

Collapse
No announcement yet.

Custom CSS with DomPDF

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Custom CSS with DomPDF

    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/

    Dompdf engine EspoCRM used the Tcpdf engine for PDF printing. Users have been often complaining about its limitations in CSS support, not allowing them to compose more sophisticated PDF documents. We’ve added a Dompdf engine implementation, which has much more complete CSS support.

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

    Comment


    • #3
      Footer example:

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

      Comment


      • #4
        Originally posted by yuri View Post
        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)

        Comment


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

          Comment


          • #6
            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

            Comment


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

            • bobcompleet
              bobcompleet commented
              Editing a comment
              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
              esforim commented
              Editing a comment
              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.

          • #7
            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:
            HTML to PDF converter for PHP. Contribute to dompdf/dompdf development by creating an account on GitHub.


            A brief usage guide would be appreciate.

            Comment


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

              foo

              Result image:

              Click image for larger version

Name:	image.png
Views:	3621
Size:	4.6 KB
ID:	94254
              Using this HTML code:
              Click image for larger version

Name:	image.png
Views:	3612
Size:	39.1 KB
ID:	94255
              Click image for larger version

Name:	image.png
Views:	3612
Size:	10.2 KB
ID:	94256

              Comment


              • esforim
                esforim commented
                Editing a comment
                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
                esforim commented
                Editing a comment
                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.

            • #9
              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


              Code:
              <style>
              body { background-color: YellowGreen; }
              p { color: #fff; }
              </style>
              and you will get a file with inline css:

              Code:
              <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.

              Comment


              • esforim
                esforim commented
                Editing a comment
                > 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
            Working...
            X