PejmanNik/puppeteer-report

Custom css in header/footer

Closed this issue · 3 comments

emilos commented

Hey,

Thanks for the great lib!

I'm trying to use a custom font in the header/footer. I tried doing it with puppeteer on it's own, and I managed to do it by having a style tag with an inlined font (base64 representation).

I'd like to do the same here - add some css to header/footer only, but I didn't find a way to do it yet. Would you accept a PR that introduces it? I'd be happy to contribute if this makes sense.

PejmanNik commented

Hi, Thank you for using it :)

I think it quite possible already. Just load the font and apply it to the header and footer id with CSS. what is the problem? what do you have in mind?

emilos commented

Thanks for the quick reply. I think I have found the issue on my side:

Version that works:

<html>
  <head>
    <style>/* some styles here, including footer */</style>
  </head>
  <body>
  </body>
</html>

Version that does not work:

<html>
  <head>
  </head>
  <body>
    <style>/* some styles here, including footer */</style>
  </body>
</html>

All other styles would be applied, except for the special classes like #footer.

Using style outside of head seems to be considered a bad practice for web pages (not sure if that matters much in this context), so I'll just fix it on my side. It wasn't very obvious to find though. Not sure if the lib can do anything to fix this. Maybe a readme update would be good enough? What do you think?

  • 👍1
PejmanNik commented

Right. Thank you for pointing that out.
Sure. I think adding an example in the examples folder and mention this matter in the readme will help a lot.
I'm open to any PR. Also, I can do it in the next week.