Custom CSS Stylesheets for Calibre's Viewer

[DoctorOhh]

Originally Posted by Fahi

Hi, I found this image to use as a background. I don't know CSS but I tried to figure out how it works and how to make the text fit into this background searching on the forum and on the internet in vain.
When i try to add body margin on top for example, i lose a part of the text at the bottom.

You are seeing why I settled on the settings I did when I posted how I set up the viewer in post 246 above. I think you are running into limitations of the QT webengine. You can set top and bottom margins in preferences, but this shrinks your image. This is why my image doesn't have the dark book like edges because the text gets lost in the darker edges. If you don't use a background image the margins set in preferences work great. Good Luck. Maybe somebody else can crack this issue, but after banging my head against the wall you can see what I settled on above.

[Fahi]

I think you are running into limitations of the QT webengine.

After spending a few hours on that, I was wondering if the problem wasn't something like that :P
Finally i took your background image, which is great too. I just modified it a little to simulate a book that suits me better. I put also the croped background i wanted to use initially.

And i use this css

body{
 margin-top: 0.15em !important;
}

p{
 margin-bottom: 0.3em !important; 
 margin-left:   6.5em !important;
 margin-right:  6.5em !important;
}

h2,h3,h4,h5,h6{
 margin-left: 4.5em !important;
}

I'm still interested if someone find a solution to put a space at the top and bottom of pages.

I hope in a future update we can deal with the body margin, that would solve all these problems Anyway thanks for this great software and thank you Doc for your time responding to me.

[duns]

It's possible, with the latest release, to customize also the "upper" row (id=book-top-margin)? I tried this, but unsuccessfully:

#book-top-margin {background-color: gray !important; color: rgb(252, 252, 252) !important;}

[kovidgoyal]

margins take the same color as whatever backgroud color you have defined in the coor preferences for the viewer.

[duns]

Originally Posted by kovidgoyal

margins take the same color as whatever backgroud color you have defined in the color preferences for the viewer.

Thank you!

Yes, but why not let to customer ... customize that colors (with css)?

[kovidgoyal]

Because I dont see the point, why would anyone want margins in a different color from the page? And if you really do, the set the page color to what you want the margins to be and use an image as the page background.

[duns]

Originally Posted by kovidgoyal

Because I dont see the point, why would anyone want margins in a different color from the page? And if you really do, the set the page color to what you want the margins to be and use an image as the page background.

Maybe we don't understand each other: I don't mean "margins", but the top bar, i.e. where you can put the title of the ebook and the like. That I would differentiate it from the body of the text because it is not the body of the text.
I simply ask you to give the possibility, if a css expert customer wants, to differentiate that background (css ID #book-top-margin).

[kovidgoyal]

That is the top margin, and is it is separated by whitespace from the text of the book, just as in all paper books for instance. You can control how much space there is yby changing the size of the margin.

[duns]

Originally Posted by kovidgoyal

That is the top margin, and is it is separated by whitespace from the text of the book, just as in all paper books for instance. You can control how much space there is yby changing the size of the margin.

Thank you.
We are not all "made in the same way" : personally I would prefer to see "author" and "title" and "chapter" with a background that distinguishes it from the body of the text.
Is would be technically difficult to let users (with css knowlegde) customize this background?

[DoctorOhh]

Originally Posted by duns

Thank you.
We are not all "made in the same way" : personally I would prefer to see "author" and "title" and "chapter" with a background that distinguishes it from the body of the text.
Is would be technically difficult to let users (with css knowlegde) customize this background?

Maybe something like this (see attached)? I used the latest calibre to setup the book viewer as shown.

[duns]

Originally Posted by DoctorOhh

Maybe something like this (see attached)? I used the latest calibre to setup the book viewer as shown.

Yes, thanks, like that!
Today I managed to get something similar (see the image attached), but now Calibre viewer is become very slow...

EDIT

No: I have changed something and now the speed is normal. This is my css code:

body {
  counter-reset: section;  /* Set a counter named 'section', and its initial value is 0. */
  background-image: radial-gradient(white 20%, #e5e4dc 70%) !important;
}

h2 {
  counter-reset: paragraph;    /* Set a counter named 'section', and its initial value is 0. */
  counter-increment: section; /* Increment the value of section counter by 1 */
}
p::before {
     counter-increment: paragraph;       /* Increment the value of parag counter by 1 */
     content: "[cap." counter(section) ", para." counter(paragraph) "] "; 
     color: gray; font-size: 70%;
}
h2 {background: #B35A31 linear-gradient(to left, #B35A31 80%, #F4E492 105%); color: white !important; font-weight: bold !important; text-shadow: gray -1px -1px;  border-radius: 8px; box-shadow: 5px 4px 4px gray;  margin-bottom: 25px !important;}

h3, h4 {color: #B35A31 !important; border-bottom: thin white solid;}

div {max-width: 90vw !important; margin-left: auto; margin-right: auto;}

[kovidgoyal]

What size image are you using for the background?

[duns]

Originally Posted by kovidgoyal

What size image are you using for the background?

Not an image, but css (radial-gradient).

[dunhill]

Originally Posted by DoctorOhh

Maybe something like this (see attached)? I used the latest calibre to setup the book viewer as shown.

DoctorOhhh could you share the code?

[DoctorOhh]

Originally Posted by dunhill

DoctorOhhh could you share the code?

No special code. I described how I set things up in post 246. But I attached the adjustments I entered in Viewer - Preferences to get this look. Essentially no margins left, right or bottom. Change the color so the background and fore a different then add code in style to change the book text color back to black.

In calibre preferences I did create a Save to Disk metadata plugboard (see attached) to save the Author - Title to the title field upon using the Save to Disk feature to get the Author and title to display where only the Title would normally appear. This means I would have to use the Save to Disk feature to save the book into a reading directory before I read the book.

This was just an exercise to show what could be done with existing settings. I use the setup in post 246 myself.