Custom CSS Stylesheets for Calibre's Viewer

[borricua]

Originally Posted by Ralob

My personal CSS style is extremely basic, but it does exactly what I want- proper indentation for all paragraphs, adequate spacing between lines, background color that is easy on the eyes, and centered headings. Very basic but it does its job.

body {color:rgb(0,0,0);
background-color:rgb(174,174,174);
text-align:justify;
line-spacing:1.8;
margin-top:0px;
margin-bottom:4px;
margin-right:50px;
margin-left:50px;
text-indent:3em;}
h1, h2, h3, h4, h5, h6
{color:black;
text-align:center;
font-style:italic;
font-weight:bold;}

I entered you css and added a font family but it's still displaying in a serif font.
body { font-family: Verdana, Geneva, Tahoma, sans-serif;
color:rgb(0,0,0);
background-color:rgb(174,174,174);
text-align:justify;
line-spacing:1.8;
margin-top:0px;
margin-bottom:4px;
margin-right:50px;
margin-left:50px;
text-indent:3em;}
h1, h2, h3, h4, h5, h6
{color:black;
text-align:center;
font-style:italic;
font-weight:bold;}

[theducks]

Your issue may be the first C (in CSS)
you set the BODY.
that does not overrule a P (or any other) font-family if declared further into the BOX Model. That simply says to use this if nothing ELSE takes over.

[mark_e_h]

Originally Posted by Ralob

My personal CSS style is extremely basic, but it does exactly what I want- proper indentation for all paragraphs, adequate spacing between lines, background color that is easy on the eyes, and centered headings. Very basic but it does its job.

body {color:rgb(0,0,0);
background-color:rgb(174,174,174);
text-align:justify;
line-spacing:1.8;
margin-top:0px;
margin-bottom:4px;
margin-right:50px;
margin-left:50px;
text-indent:3em;}
h1, h2, h3, h4, h5, h6
{color:black;
text-align:center;
font-style:italic;
font-weight:bold;}

I tried using this basic style, but it seems to be ignored.
I'm sure my ignorance. In particular I would like to increase space between lines of text.

I would appreciate it if someone could point me in a direction on how to implement the style and make the reader pay attention.
thx,

.

[theducks]

I think there is an error in that style
that should be:
line-height: 1.8 not line-spacing

[mark_e_h]

Originally Posted by theducks

I think there is an error in that style
that should be:
line-height: 1.8 not line-spacing

That seems to be it.

Do you know if I put CSS styles in for a book, does Calibre only use it on the single book? Or is it applied to all books I read?

Thanks for your help.

BTW,
https://www.w3schools.com/css/default.asp
Was useful for me.


.

[theducks]

Originally Posted by mark_e_h

That seems to be it.

Do you know if I put CSS styles in for a book, does Calibre only use it on the single book? Or is it applied to all books I read?

Thanks for your help.

BTW,
https://www.w3schools.com/css/default.asp
Was useful for me.

.

Don't know. Knowing how Kovid does things thoroughly, Settings (in the Viewer) applies to the Viewer.

I hand edit my CSS in all books (cue Frank Sinatra: My Way) and use Publisher styles (some are now mine) on my devices.

[nqk]

Originally Posted by mark_e_h

That seems to be it.

Do you know if I put CSS styles in for a book, does Calibre only use it on the single book? Or is it applied to all books I read?

Thanks for your help.

BTW,
https://www.w3schools.com/css/default.asp
Was useful for me.


.

It applies to all books. But it may require !important to overwrite the built-in CSS of the book.

[mark_e_h]

Originally Posted by theducks

I think there is an error in that style
that should be:
line-height: 1.8 not line-spacing

OK - on some books,
line-height: 5.0 !important;
does exactly what I expect it to. On others, it seems to be ignored.

Any one help with the difference. How do I get the epub reader to pay attention?
thx,


.

[theducks]

Originally Posted by mark_e_h

OK - on some books,
line-height: 5.0 !important;
does exactly what I expect it to. On others, it seems to be ignored.

Any one help with the difference. How do I get the epub reader to pay attention?
thx,


.

Depends
Some devices do their own thing. Period

Yor problem (some books) is the Order. You set it in one place. A nested blocks style overrides it.

Nesting of styles (usage) can be important.

[JSWolf]

A line height of 5.0? That IMHO is too large.

[mark_e_h]

Originally Posted by JSWolf

A line height of 5.0? That IMHO is too large.

I think I was just trying different numbers to see if anything made a difference.
All numbers were treated the same way - they were ignored.
Other format items (margins, for instance) actually made a difference.

.

[JSWolf]

Originally Posted by mark_e_h

I think I was just trying different numbers to see if anything made a difference.
All numbers were treated the same way - they were ignored.
Other format items (margins, for instance) actually made a difference.

.

You might want to set all of your CSS at !important. It should be able to override the book's CSS

body {
  line-height: 5.0; !important
}

[rockster]

I tried these css styles and the line height style worked, but margin styles did not worked.

body {
  line-height: 1.3; !important
  margin-right:100px; !important
  margin-left:100px; !important
}

[JSWolf]

Originally Posted by rockster

I tried these css styles and the line height style worked, but margin styles did not worked.

body {
  line-height: 1.3; !important
  margin-right:100px; !important
  margin-left:100px; !important
}

You can use the viewer settings to change the L/R margins.

[rockster]

I forget about that. Thanks.