Services Plugins FAQs

Bubble Page to PDF converter - Background Color not working

#1

Hello Support Team - I am using the Bubble Page to PDF Converter, and unable to set the background color on the header/footer using the template property.

Below is the HTML code I have put in the header template. I can see that the font color is working in the PDF, but not the background-color. I have tried different formats (rgb, color name, hex codes). None of them seem to work on background color.

<span style="font-size:36px;background-color:lightblue;color: rgb(0,255,0);"> INVOICE </span>

Can you please take a look and tell me if it is supposed to work and if there are any issues in how I am trying to do this.

Thanks.

#2

Hello, @partha
Thanks for reaching out.

Please allow me to check your request and to revert at the nearest time. It can take a bit of time due to the weekends and New Year celebration :slightly_smiling_face:

Thanks for the understanding.
Wishing you a Happy New Year! :partying_face:

Best regards,

#3

Thanks @Ecaterina. Looking forward to your analysis.

Wishing you a great New Year too…

I would like also to report that image in the header also doesn’t seem to work. I am currently using the latest version of the plugin (1.57.0)

Can you also suggest any solution for this issue?

<div>
<img alt="Test" src="https://s3.amazonaws.com/appforest_uf/f1640935611812x504297179327381600/new%20profile.png" width=150px height=90px>
</div>
#4

Hello @partha
Thank you for contacting us.

Our team is already investigating your report. It seems that both of your issues are connected, as the HTML code is not displaying correctly in the PDF.

We have forwarded this to our developer team and as soon as I have an update - I will let you know.

Thank you for your patience. :pray:

#5

Hi @partha, allow me to offer you an update on one of the reported issues:

A solution would be converting the image to base64 HTML img code before including this in the header/footer.

You can find a converter here: https://codebeautify.org/image-to-base64-converter.

Also, make sure you have enough space set in the header/footer height:

header
header729×806 72.7 KB

Hope this helps! :slightly_smiling_face:

#6

I also have an update on your first question @partha

In order for this to work, please add the following at the beginning of your HTML code as well:

<style>
        html {
          -webkit-print-color-adjust: exact;
        }
 </style>

Let me know if this worked.

Thank you. :relaxed:

#7

Thanks @diana.c I will try the suggested fixes. Thank you.

1 Like
#8

You are always welcome @partha! Let me know if this worked, or if you have any other questions. :relaxed: