Skip to Content
मेन्यू
This question has been flagged
3 Replies
7847 Views

I'm trying to make my own raport and I need to change couple things inside premade layouts.
The external one with background is closest to what I need but I want different background image and diffrent CSS in couple places (like table formating).

What is proper way to do this? 
I duplicated the external_layout_background view, modified it and called inside my report template. It was working just fine. But then I tried to modify background image and formatting. The way I did this was by modifying layout_background.scss and changing path to the background image and changing some of the formating. And it broke something, even thought I reverted all changes it is still broken. Maybe it is linux related or something

And I feel like it should be easier and cleaner way to do this stuff. How? Is there a way to do this sort of things from web UI? Or maybe write everything inside report template xml using inline CSS?

Avatar
Discard

Are you trying to just add/remove/move fields or do you need complete control over the layout ?

Best Answer

Hello,

Best way to do this :

1. if you want this kind of changes on all reports then inherit 

"external one with background" template and replace header or footer with your own image and background color which you want.

2. if you want this customised header and footer changes on that particular report or on few reports,

then better create new template same like "External background" and call this new template on reports using t-call

3. for css changes , better try to use bootstrap 4 standard class, 

if some class are not available on bootstrap then you can define 

css on top of that report like this way that will reduce conflict and you can fix easily if any css issue happen 

"<div class="page">
<style>
table th{
border-bottom: 1px solid black;
padding: 10px;
}
table td {
border-bottom: 1px solid gray;
padding: 10px;
}
</style>"

hope this will help

Thanks

Avatar
Discard
Author Best Answer

I acctualy don't need any header and footer as I have everything placed inside background image.So I removed <t t-call="web.external_layout"> from my template and now I have plain text without header and footer. But I'm having trouble with adding background image. Inline css as well as <style> tag does not work. For example somthing like this does not work:​


<?xml version="1.0"?>
<t t-name="web.equipment_affirmation">
<t t-call="web.html_container">
<t t-foreach="docs" t-as="eq">
<!-- <t t-call="web.external_layout"> -->
<div class="page">
<style>
.custom_background {
background-image: url(/base/static/img/bg_background_template.jpg);
background-size: cover;
background-position: bottom center;
background-repeat: no-repeat;
min-height: 620px;
}
</style>
<div class="custom_background">
...


I even used original odoo background image but it still does not work.

When I tried for the second time to modify scss file everything broke. Even when I reverted all changes. And even raports that does not use that file.

There is something wrong with image path. When I use imgur image it is appearing.

And can you please fix this forum. Using this text editor is huge pain. Formatting is broken, there is no propper code formatting. I can't upload picures and it constantly changes my language.

Avatar
Discard

ok now i got your question.

for that you have to create new scss file : on that you define this and load that scss by inheriting view: report_assets_common like this way :

<template id="assets_common" name="custom_report" inherit_id="web.report_assets_common">

<xpath expr="." position="inside">

<link rel="stylesheet" type="text/scss" href="/custom_report/static/src/scss/custom_report.scss"/>

</xpath>

</template>

then define new external layout template as i told you and set this class on "<div class="article o_report_layout_background_custom"> article div .. because report body part was inside that . .

Related Posts Replies Views Activity
2
दिस॰ 23
14674
0
अक्तू॰ 23
33
3
अक्तू॰ 23
788
1
अक्तू॰ 23
569
1
अग॰ 23
2420