Qweb Report's css not working on printing pages

Question

I made a report of Qweb in odoo 10. Put my css in tag and place it in ".page" class div. Like this

<div class="page">

   <style type="text/css">
     .header,
     .footer {
         display: none !important;
     }
   </style>

</div><!--end of page-->

It is working perfectly on screen but when I generate PDF or take print from the screen by CTRl + P. It doesn't shows the css colors, backgrounds, padding and margins. I have consulted following link:

Plus I also have one solution. If we apply this tag it reflects some of the properties on the printing page.

t-attf-style="background: #333;color: #FFF; padding: 10px 0px; margin: 0px 0px 0px 6px;"

Is there any way to print the backgrounds and some different font colors on printing page other than these options. The first link is not making any changes and the second solution don't work for all properties plus its very time taking to place this tag with all the HTML tags.

I am facing this problem from last one year. That would be great help and a new learning If someone helps me sort this problem.

Thanks

Answer 1

Well the right answer is always the one through that separate module of defining and calling color fields as done in custom invoicing module. But I suggest a hack. Create images of that color and put them on that area with position: absolute and adjust the remains(text) on it. Plus for font and other things t-attf-style works perfectly.