Apply CCS Styles or images

[mairav]

Hi, I would love to apply a css class to my footer and header, and customize the way both are shown with a css snippet I already created por PDF prints.

It would be nice we can define a resource folder, and select from there images to be used as backgrounds in our css. I would love to get my logo added in the header. And some icons in the footer.

[mairav]

I've been playing around with inline css style in the header and footer and can't figure out the way to change the margin/padding for the footer. Every time i touch something regarding margin or padding the footer disappears form the pdf.

I also can't make any modification to my footer or header div from my css snippets for @media print {}

[l1xnan]

1. The HTML snippet in the header/footer is separate, there should be no way to read your CSS snippet (I didn't actually test it, you can try it)
2. If you want to add an icon to the header/footer, please refer to this answer: https://github.com/l1xnan/obsidian-better-export-pdf/issues/128
3. If you want to add background images to all your pages, please refer to this answer: https://github.com/l1xnan/obsidian-better-export-pdf/discussions/164#discussioncomment-9032561
4. Can you share the HTML snippet about the header and footer margins? Most likely, there is a problem with style.

[mairav]

My footer is like this right now, but i want to get all the styles out and place them in my css snippet. I tried changing things from there trying to affect th footer element, but nothing happens. All the rest of the file is being affected by my snippet, but not the footer or header.

<footer id="footer" style="margin-left: 2cm; width: 12cm; height: 0.6cm; font-size: 7pt; color: #5699AE; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0cm; " >
    <span style="text-align: left;" id="email">info@astraios.ar</span>
    <span style="text-align: center;" id="web">astraios.ar</span>
    <span style="text-align: center;" id="phone">3541 301-1111</span>
    <div style="text-align: right;" id="page">Página <strong class="pageNumber"></strong> de <strong class="totalPages"></strong></div>
</footer>

This is working now, but it makes no sense the values I got to use, to make it work. That's why I was asking for the footer and header being affected by the css snippet. If you allow this, and you can make a way to name pages with ids like id="page001" then we can change the look and feel of the page one see #195

Or we can change the positioning and sytles of the footer and the header as we need.

[l1xnan]

The implementation of the header/footer feature depends on the chromium export PDF feature (the same as the browser's PDF export), the header/footer rendering and the body content rendering are independent of each other, and any style you define in the body will not be effective in the header footer fragment. Due to this mechanism, many of the header/footer customizations cannot be implemented. To achieve some of the scenarios you mentioned above, I need to start all over again, I have not yet thought of a good way, just a little clue, and have not had time to verify it

[mairav]

Hi, I manage to add the svg logo to the header. The styles still don't work as one would expect, but after several exports, I manage to make it look right.

If you add some king of feature to modify the footer and header from obsidian CSS snippets please mention me! :D