3

I need to change the class page, which you can see in every report template.

This does what I want:

<div class="page" style="margin-left: 7mm">
   ...
</div>

The problem is that I need to apply that style each time the class page is applied, so it would be very useful for me if I was able to modify the class to add my margin-left. If not, I guess I will have to change every template which has class="page" inside, which will be awful.

May be you're wondering why I need to add that margin-left, that's because I have to add a text on the left margin of every page, so I have to add a div in the header. The problem is that if you try to write inside the margin (out of the div class="page"), this text dissapears due to the left margin of the paperformat. So I set this paperformat margin to 0. After this I had to move the header and the footer 7mm to the right, which was easy. The problem is that I also need to move the content of the report 7mm to the right, and that's why I'm trying to modify the class page.

If anyone knows how to do that or finds a better solution for my issue, it would be very helpful.

forvas
  • 9,801
  • 7
  • 62
  • 158
  • Could you provide an image with the result you want to get? – ChesuCR Apr 10 '18 at 11:58
  • You can add one custom class through js and from that custom added class you add your css for that too. In your case add custom class to `.page` class and then apply css to your added class. Might that will work. – Keval Mehta Apr 12 '18 at 06:49

3 Answers3

4

To inherit and modify an existing CSS class, this worked for me:

<template id="my_custom_style_modifications" inherit_id="report.layout">
    <xpath expr="//style" position="after">
        <style type="text/css">                   
            .page {
                margin-left: 7mm;
            }                    
        </style>
    </xpath>
</template>

EDIT

Well, I needed to do this again and I was wondering why I had set my solution as the right one since it did not work for me this time (it threw me the error that style was not found in parent view)... something must have changed, I guess. This time I had to do the following to achieve my purpose (however, this solution only works if the report is printed in HTML format, not in PDF -still looking for something to fix that-):

<template id="aus_custom_reports_style_modifications" inherit_id="report.layout">
    <xpath expr="//html" position="before">
        <style type="text/css">                   
            .page {
                margin-left: 7mm;
            }                    
        </style>
    </xpath>
</template>
forvas
  • 9,801
  • 7
  • 62
  • 158
1

First if you want to change css in report don't add the css file to backend assets you should add it to report assets:

  <template id="assets_common" name="add css for page class" inherit_id="report.assets_common">

just to make sure that the css is applied and to make sure that this technique it's not working as expected add a border to the page or change background color and css if your css is applied.

Now if this technique is not working it will be better if you provide a picture or explain what you need exactly may be there is a better way to do it.

Note don't forget to add dependency for report addon in your manifest file.

Charif DZ
  • 14,415
  • 3
  • 21
  • 40
  • this technique will not work i think your code will be ignored by wkhtmltopdf so can you explain what you want again – Charif DZ Apr 11 '18 at 21:24
  • Thank you for your answer @Cherif, My purpose was to write a text vertically inside the margin-left of each page of every report. That was the issue, but I've found the response to the main question: How to inherit and modify a CSS class made in other module. – forvas Apr 16 '18 at 09:58
  • so you need something like header but in the left margin? – Charif DZ Apr 16 '18 at 16:06
  • Exactly, in fact, finally I've modified the header in a weird way to manage that. – forvas Apr 16 '18 at 16:17
0

Its working like this:

Write margin in CSS file

HTML

   <div class="page">
       ...
    </div>

CSS

.page{margin-left:7mm !important}
Nirmal Arya
  • 16
  • 4
  • Hi @Nirmal, that's the first thing I tried, I made a CSS file in my module and added it to the assets backend. Inside the CSS file I wrote `.page{margin-left:7mm}` but it didn't work. – forvas Apr 10 '18 at 11:56
  • Try with the `!important` keyword: `.page{margin-left:7mm !important}` – VXp Apr 10 '18 at 12:04
  • Try with important tag: .page{margin-left:7mm !important} – Nirmal Arya Apr 10 '18 at 12:07
  • It doesn't work, it seems that whatever I write in the class `.page` of my module doesn't affect to the original `.page` class. – forvas Apr 10 '18 at 12:33