I have a PDF containg several records. Each page has a header containing logo and client info and the body containingg a detail table.
The PDF is applied as the background image in my section.
My requirement is:
-
to maintain the part containing the header where it is currently located
-
clip the body and shift\translate it by 20mm to the right.
I have this css which clips the body and shifts it to the right by 20mm:
.page_mediabox img.ol_pdf_datamapper_input {
position: absolute;
clip: rect(80mm,210mm,297mm,0mm);
margin-left: 20mm;
top: 80mm;
}
How do I insert the top or header part? I tried using this:
page_mediabox img.ol_pdf_datamapper_input {
position: absolute;
clip: rect(0mm,210mm,80mm,0mm);
margin-left: 0mm;
top: 0mm;
z-index: -1;
}
.page_mediabox img.ol_pdf_datamapper_input {
position: absolute;
clip: rect(80mm,210mm,297mm,0mm);
margin-left: 20mm;
top: 80mm;
}
This obviously did not work because css cascades and the last style on the element overwrites the previous.
Now I thought about duplicating the background img tag for each page and assign it a different class, however the selector .page_mediabox img.ol_pdf_datamapper_input does not pickup anyhing in the script pane.
It seems I spend more time looking for workarounds than actually designing the template. In the old PlanetPress Suite, this task takes 10 seconds with a few clicks, drag and drops of the mouse.
I am looking for a solution which uses css. I thought about using two separate DIVs in the source html of the section, but this adds other difficulties to the template design such as adding another script to loop or clone through each page of the record…
Can anyone help? How can I clip regions of my PDF background and insert\position them at desired coordinates?