Viewer Styles CSS margin on body ignored

[Valjean]

Hello,

First of all, thanks for the great application!!
I am trying to create a "custom" layout by using the Styles configuration.
In the previous versions this seemed to work, but in the newer versions it is not working anymore.
I am trying to add more margin on top and on the bottom, but I am not sure how to do that. Also the images seem to not be aligned correctly.

here is my css:

p, h1, h2, h3, h4, h5{
font-family: Bookerly !important;
margin-left: 6em !important;
margin-right: 6em !important;
line-height: 1.8 !important;
}


body {
height: 85% !important; <- does nothing
margin-top: 40px !important;
margin-bottom: 40px !important;
text-align: center !important;
font-size: 24px !important;
}

div{
margin-left: 1.25em !important;
}

* {
color: rgb(0,0,0) !important;
}



Thanks for your help

[kovidgoyal]

If you want to add page margins use the setting for that in the viewer preferences.

[JSWolf]

1.8 is much too high a line height.

[Valjean]

Thank you for the reply. I tried that, but unfortunately, that does not work.
It just cuts of from top and bottom of the picture, instead of pushing the text down (or up).
Please see the picture below.

What is interesting, is that in the past I could keep the background untouched and "push" the text from top and bottom without touching the background. Something has changed from previous versions. I used to replace the viewer.js or viewer.html with some back-up files I had and it worked ok. Now it does not work anymore. (could be that I may have lost the old back-up files - I reinstalled my linux system).
I tried a few older versions (7.1.0, 7.2.0, etc) but I did not find the one that works

Thanks again for your help.


@JSWolf, but I want the text to be spaced out. This is the line height I prefer. Do you mean it has a negative impact on the page overall?

[kovidgoyal]

Use the official calibre binaries and you will be fine. The margins specified in the viewer settings do push the text down and leave the background picture unaffected in current calibre versions >= 8.4

[Valjean]

First of all thank you very much for the fast reply!!
I realize now that my explanations were not very clear.
Since I do not want to waste too much of your time, I give it one more try

I am on Calibre 8.10.
Below there are 3 pictures that show what I mean better.

Picture 1: No margin. As expected, text is too close to the edge of the picture (in some cases the text would go outside of the "book page" in the background).
Picture 2: I set margins of: Left: 50, Right: 60, Top: 60, Bottom: 60. The text is indeed pushed from all sides, however, you can see that the background image is cropped (i.e. the header, footer and the left and right bars overlap the background image).
Picture 3: A quick and dirty photoshoped image that shows how I would expect that the final result looks like (i.e. the background image is scaled down and the header, footer and the left and right bars do not overlap it). The text fits better within the background "book page".

I understand that the margins are not supposed to affect the background image. I guess the better question is how can I achieve the result in Picture 3. Maybe there are other options .
Thanks again!!!

[kovidgoyal]

I cannot replicate that, steps I tried:

1) Set a background image in the Styles section of the viewer with style set to scaled
2) Change the page margins to 80 in the page layout section
3) The background image appears under the wider margins, as expected

[Valjean]

Thanks a lot! Your comment helped! I found the issue.
The color scheme was the problem.


In your predefined color schemes, the margins have transparent background. How can I make the background transparent for the margins, in my color scheme?

Thanks!!

[Valjean]

Maybe one additional hint. Please feel free to completely ignore it .

It seams that there is no clear separation between what margin means and what header and footer means (configuration wise).

In my case I would like to increase the margins by 50 for example, keep the background for the margin transparent, but, I would like the header and footer to have a different background (for visibility purposes). However, the header and the footer should not occupy the whole margin. I hope it makes sense.

At the moment, I can change the background of the margin!! not the background of header and the footer.


Not a big issue I can still achieve the result I want that by adjusting the background image.
Thanks again for the support!

[kovidgoyal]

Originally Posted by Valjean

In your predefined color schemes, the margins have transparent background. How can I make the background transparent for the margins, in my color scheme?

Dont change it from default in your color scheme