Custom CSS Stylesheets for Calibre's Viewer

[Ralob]

This thread is for people to post their CSS custom stylesheets for the Calibre eBook Viewer. I know that not everyone is familiar with CSS, so I hope that if anyone needs assistance in making their eBooks display properly, they will find something useful in here.

[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;}

[ekaser]

Thanks for sharing, Ralob! I like pretty much your whole setup, except I like a lighter, slightly off-gray background, and slightly less indent:

background-color:rgb(228,226,224);
text-indent:2em;

[lcbannon]

Do I put this in the extra css box for code in the Look and Feel area???

[ekaser]

Originally Posted by lcbannon

Do I put this in the extra css box for code in the Look and Feel area???

In the Ebook Viewer application, click on the Hammer icon (Preferences), then put the code in the "User stylesheet" edit box and click OK. Have an ebook open in the viewer for the full effect, before and after.

[sideburnt]

If you're interested in CSS Styling take a quick look at
http://epubzengarden.com/?style=trad.../chapter1.html

Its a very new site but could become fantastic with a bit of contribution.

Hard to navigate around and took me a while to find the css preview page, I have linked to my favorite page style used on this site.

[ekaser]

Originally Posted by Ralob

My personal CSS style is extremely basic...

body {color rgb(0,0,0);
background-color:rgb(174,174,174);

You have an error in there. I was testing out a completely different color scheme (harking back to the "good old" MS-DOS days), when I used WHITE on BLUE background for my console (worked better then, with fixed pitch, large fonts :-). In your code above, you need to add a ':' after the body 'color' name. Without it, the body (text) color is ignored. It still works for what you want, because the default color is black. But it doesn't work if you try to set it to anything else. Not necessarily pleasing to use, but as another example, here's my "white on blue" style:

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

[Ralob]

Oops! Thanks

Fixed.

[mtravellerh]

Originally Posted by Ralob

Oops! Thanks

Fixed.

A propos margins: Please be advised that, if you use your CSS in ePubs for the ADEPT engine, the default page numbers will flow in the text body.

[Ralob]

Originally Posted by mtravellerh

A propos margins: Please be advised that, if you use your CSS in ePubs for the ADEPT engine, the default page numbers will flow in the text body.

Thanks for the info. I haven't used ePub yet as my reader doesn't support it ATM. But, I will keep this in mind for when I start using them.

[PhillipA82]

Originally Posted by mtravellerh

A propos margins: Please be advised that, if you use your CSS in ePubs for the ADEPT engine, the default page numbers will flow in the text body.

Didn't know that, thanks

[rakulos]

Hi,
Anyone having issues in getting the CSS to apply in the epub viewer? I'm using 0.6.31 and reading a variety of epubs from feedbooks, I've applied the CSS examples in this thread and clicked ok but the display never changes.

Sorry if I'm missing something blatantly obvious

[Jellby]

Maybe the book you are reading already defines CSS styles that override your definitions? Try adding "!important", for example:

body { color: red !important; }

[JirkaS]

Another good site for learning CSS and testing your trials is http://www.w3schools.com/Css/default.asp

[heidismiles]

Hi all, this may be a stupid question but I'm having trouble getting different fonts to show up in one book? Is this even possible?

I have several Stephen King files that I'm trying to convert from HTML. King often writes about writers, and when he does, there are usually several sections of a book in "typewriter" text.

I tried doing it this way:
<p style="font: 9.0px 'Courier New'">CHAPTER 1</p>

The font shows up in Calibre, but not on Stanza on my iPhone.
Any suggestions?