Wsrtjtyk

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.

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>

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.

Its working like this:

Write margin in CSS file

HTML

   <div class="page">

       ...

    </div>

CSS

.page{margin-left:7mm !important}