Odoo is the world's easiest all-in-one management software. It includes hundreds of business apps:
CRM | e-Commerce | Accounting | Inventory | PoS | Project management | MRP | etc.
I need some help adapting the the Invoice/Sale reports (using the "report.external_layout_header" view) to our company layout. I'm using some adapted QWeb reports which I downloaded from a GitHub archive and they are generally doing fine.
Our business paper shows a logo on the top right, a thin line going from the left to the right of the paper (behind the logo) and a colored bar of 1.3cm on the right of the paper (going from top to the bottom).
I experimented with the following code (in "report.external_layout_header"):
<div class="row zero_min_height">
<!-- line under the logo -->
<div style="position: absolute; top: 2.8cm; left: 0cm; right: 0cm; width: 100%; border-bottom: solid 1px black;"> </div> <!-- right margin -->
<div style="position: absolute; top:0cm; left:19.6cm; right:0cm; height:100%; background-color: #FFBA00;"> </div> <div>
<img t-if="company.logo" t-att-src="'data:image/png;base64,%s' % company.logo" style="max-height: 3cm; margin-right:0.25cm; margin-top: 0.5cm; float:right;" class="text-right"/>
But it does not work...
I have several problems:
- The line does not go from the very left to the the very right (about 1cm is truncated at each end).
- The line is over (and not behind) the logo.
- The colored bar does not go over the whole document, it is too wide in HTML and does appear on the PDF.
Previously I've done it in RML and there it worked fine...
Maybe I'm doing it wrong in QWeb, so any recommendations and tips are welcome!
Has anybody done something similar in QWeb already?
I'm still struggling with this problem.
It was really easy to accomplish this with RLM (it only took me 2 hours learning, setting and optimizing the layout). But it seems almost impossible to do this in QWeb! The HTML output is problematic, because everything is so dynamic and anything I tried is not shown in PDF (using wkhtmltopdf).
I tried several things. I changed the "report.style" CSS and added to the "body" the following:
1. Using gradients:
background: -webkit-gradient(left top, right top, color-stop(0%, #ffffff), color-stop(76%, #ffffff), color-stop(77%, #ffffff), color-stop(77%, #ffba00), color-stop(100%, #ffba00));
background: linear-gradient(to right, #ffffff 0%, #ffffff 76%, #ffffff 77%, #ffba00 77%, #ffba00 100%);
I see something in HTML but nothing in PDF. The specification of the width is problematic.
2. Using a background image (full width):
background-size: 100% auto;
The colored bar is too wide in HTML and I see nothing at all in PDF.
3. Using a background image (only the colored bar):
background-size: 1.3cm auto;
background-position: right top;
In HTML this is the best from the layout, but I do not see anything at all in PDF.
4. Using a complete background image in SVG:
This SVG has the following content:
<svg xmlns="http://www.w3.org/2000/svg" width="210mm" height="297mm">
<path style="fill:none;fill-rule:evenodd;stroke:black;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="m 0,102.25591 744.09449,0" />
<rect style="fill:#ffba00;fill-opacity:1;stroke:none" width="49.652042" height="1052.1321" x="694.3396" y="0.13824791" ry="0" />
You can see the line and colored bar in HTMl and it's almost correct, if you set the correct width of the window. In PDF I see nothing at all.
Does anybody have any other ideas? It would be so easy, if the paper format dialog would allow to give a background image for the whole paper (maybe as PNG/SVG/PDF).
Hi Sven, I think you should add "z-index:-1; " to your div style of that line behind the logo. I also used "overflow: visible;" to solve the same kind of problem in my Qweb external_layout_footer. See below for a part of my code (I added an extra image to our company settings):
<!-- footer image-->
<div style="z-index:-1;position: absolute; overflow: visible; padding-top: 5px;" >
<image align="left" t-if="company.x_report_iso_logo" t-att-src="'data:image/png;base64,%s' % company.x_report_iso_logo" width="65px" />
<div class="text-center" style="border-top: 1px solid #007F64; font-size: 11px; padding-top: 5px; padding-left: 60px; padding-right: 60px;">
About This Community
This platform is for beginners and experts willing to share their Odoo knowledge. It's not a forum to discuss ideas, but a knowledge base of questions and their answers.Register
Odoo Training Center
Access to our E-learning platform and experience all Odoo Apps through learning videos, exercises and Quizz.Test it now
|Asked: 2/24/15, 5:53 AM|
|Seen: 5008 times|
|Last updated: 7/25/16, 6:32 AM|