Custom CSS Stylesheets for Calibre's Viewer

[foosion]

My desire is to have a top and bottom border, so that the text does not touch the frame. I can do side borders with the css stylesheet, but top and bottom borders don't work, because they don't work in the gui framework used in Calibre.

Walt, I'm the one who wanted a non-distracting background.

Originally Posted by kovidgoyal

You have to match the background color to the background color of the book page which may or may not be white. Since the calibre viewer supports javascript, you'd have to dynamically change the color if a script in the book page changed the background color.

If Calibre is aware of changes to the background color, it's obviously trivial to change the background color of the border.

Many of the css stylesheets listed in this thread include a background color, some with the !important qualifier. Some also try to add top and bottom margins.

I've never read an ebook that changed the background color in the middle of the book, but I can't pretend to have a small fraction of your experience.

Originally Posted by kovidgoyal

And negativeve co-ordinates in the css will not work correctly.

The primary purpose is to implement top and bottom margins, which don't work at the moment. This approach can't do any worse.

This approach is not appropriate for left and right margins, as they work fine by specifying a css stylesheet.

Originally Posted by kovidgoyal

Then a book can define different margins in every html file it contains, so you'd have to watch for that and adjust dynamically.

Personally, I just want some blank space on the top an bottom so that the text doesn't crowd the frame. I wouldn't want it to change.

Originally Posted by kovidgoyal

All in all, that makes this approach too hacky for the functionality it provides.

Tilting at windmills is a hobby of mine.

If it's not something many people want and it risks being too fragile, it's not a change worth making.

[MplsGirl]

I LOVE THIS ONE!! SO PRETTY!

But does anyone know how to increase paragraph spacing for all paragraphs? Or does it only work if the original ebook is formatted that way?

Basically I want something like this:


Uploaded with ImageShack.us

Can anyone help me?!

Originally Posted by jamezb3

I use this one, I find it easy one the eyes.

body {
color: rgb(189,226,252);
background-color:rgb(80,80,80);
text-align:justify;
line-spacing:1.8;
margin-top:10px;
margin-bottom:4px;
margin-right:20px;
margin-left:20px;
text-indent:2em;
}
h1, h2, h3, h4, h5, h6 {
color:black;
text-align:center;
font-style:italic;
font-weight:bold;}

[moodjbow]

Hey there, I made also some CSS customizatioins, but fact is that in reading mode there is indent on each paragraph even when I define it as 0. My format is epub. On the other hand when I say "print" from calibre's viewer there are no indents, no matter how I define in the custom CSS field. What's the problem there?
OK, I post here my "old book"-style for the ones that are interested:
body {
background-color: #fefcf2;
color: #333333;
width: 33em;
padding: 2em 3em;
border: 1px solid #ccc;
margin: 0 auto;
font-family: "Book Antiqua", Palatino, serif;
text-align: justify;
text-indent: 0; }
h1 {
font-size: 2.5em;
font-weight: bold;
text-align: center;
font-family: "Monotype Corsiva", "Apple Chancery", fantasy;
border: 1px solid #ccc;
border-radius: 10px; }
h2, h3, h4 {
font-weight: bold;
text-align: center;
border: 1px solid #ccc;
border-radius: 10px; }
h2 + p:first-line {
font-variant: small-caps;
font-size: 1.1em; }
h2 + p:first-letter {
float: left;
font-size: 2.5em;
font-weight: bold;
font-family: "Monotype Corsiva", "Apple Chancery", fantasy;
margin: -8px 8px; }
h3 + p:first-line {
font-variant: small-caps;
font-size: 1.1em; }
h3 + p:first-letter {
float: left;
font-size: 2.5em;
font-weight: bold;
font-family: "Monotype Corsiva", "Apple Chancery", fantasy;
margin: -8px 8px; }
h4 + p:first-line {
font-variant: small-caps;
font-size: 1.1em; }
h4 + p:first-letter {
float: left;
font-size: 2.5em;
font-weight: bold;
font-family: "Monotype Corsiva", "Apple Chancery", fantasy;
margin: -8px 8px; }
p {
margin-bottom: 0; }
p + p {
margin-top: 0; }

[moodjbow]

OK, found the answer myself here:
http://blog.calibre-ebook.com/2011/0...re-viewer.html
@MplsGirl - this should apply to your case as well - use css statements with !important; at the end to override epub embedded formatting, something like
p {
margin-bottom: 1.5em !important; }

[_reader]

Not sure how to ask for a response when skipped (re: page 7), but to ask again briefly:

I tried the 2-Columns mode which displays 2-cols, but page-forward doesn't advance (either by the arrow-icons, Page Down/Up, space bar, or mouse wheel). Suggestions?

I'm looking to simulate an open book with two pages to view on my laptop or desktop wide screen. As an example, Ybook reader provides this for .txt books.

[moodjbow]

Originally Posted by dwanthny

Excellent, now make the widget color selectable, in another forum someone was asking for a reader where the border background was black. Then submit the info in an enhancement request to see if it can be added to calibre.

Hey, I am just wondering - we all know that the "paged view" issue will improve look an feel of the reader, but are we not going astray of the design politics? I mean this is a viewer as much as any web browser with text flow using mouse scroll function, in contrast to tab/pad readers where you have to flip page by page with the finger. I mean, if you are really into doing this, great, but then a logical recommendation will be - with all this burden - to implement it as a tab app as well...

PS: I adore this "simple" reader because it was the only free one - and I mean it literally comparing even with adobe and sony crap! - presenting a cyrillic text correctly. The others were simply showing
?????????????

[egosbar]

hey all , when some of my book pages come up the text on the bottom line is showing half the text ( very annoying) can i adjust this somehow using the user style sheet

[egosbar]

i also want to change the backround texture

the image i want is on my computer c/ my pictures/beige009.jpg , can i access and use this using the css

[egosbar]

bump anyone answering in this thread??

[DoctorOhh]

Originally Posted by egosbar

i also want to change the backround texture

the image i want is on my computer c/ my pictures/beige009.jpg , can i access and use this using the css

In post 65 pollito pito outlines how to do this.

[zeusbheld]

I tried custom CSS (copying and pasting styles from here and ePub Zen Garden). When I use Zen Garden's copy of Middlemarch the styles work fine.

When I use almost any other ebook, the styles get overridden. Some settings are preserved, such as colors, but it manages to override pretty much anything I care about.

What I want is very simple, and follows the basic principles of sensible typography:

1: Ragged right text, NOT justified.

2. Adequate leading so there's breathing room between the lines of text. 1.5 times font height to 1.8 times (depends on font).

3. If extra space is used between paragraphs, DO NOT indent the first line.

all of these work nicely on Middlemarch but very little else. How can I find out what is overriding my settings and destroy it with extreme prejudice without having to learn CSS (I just want to read, not learn formatting codes)?

[Maluuu2011]

I want black backround, is it possible in calibre.

[DoctorOhh]

Originally Posted by Maluuu2011

I want black backround, is it possible in calibre.

Three of the first seven posts show you how to set the background color. You just have to adjust the color codes. This blog post also explains how to set various items including the background color. Post 77 actually uses colors close to what you are seeking.

Good Luck.

[AcousticYorick]

Originally Posted by MplsGirl

I LOVE THIS ONE!! SO PRETTY!
But does anyone know how to increase paragraph spacing for all paragraphs? Or does it only work if the original ebook is formatted that way?

The distance between lines (i.e., the "leading") is controlled by the line-height property. To have double-spaced lines, you need this in the stylesheet (in the "body" section):

line-height:2.0;

(To increase the spacing between paragraphs, increase the margin-top value.)

[AcousticYorick]

To get closer to the Kindle-for-PC reading experience (esp. the less-distracting dark screen on either side of the text), I've been using this stylesheet, with the Calibre viewer maximized (on a 1600x900 resolution monitor):

body {color:RGB(0,0,0) !important;
background-color:RGB(253,253,253) !important;
text-align:justify !important;
line-height:1.2 !important;
margin-top:0px !important;
margin-bottom:4px !important;
margin-right:450px !important;
margin-left:450px !important;
text-indent:5em !important;
background-image:url("http://img33.imageshack.us/img33/2545/calibrebackground.png") !important;
background-position:50% !important;}
p,div {margin-bottom:8px !important;margin-top:8px !important;}
blockquote {padding-right:35px !important;margin-bottom:8px !important;}
h1, h2, h3, h4, h5, h6
{color:black !important;
text-align:center !important;
font-style:italic !important;
font-weight:bold !important;}

The calibrebackground.png image is just a 1600 pixel by 5 pixel graphic, with the dark-gray color sampled from the Kindle PC reader. If you're using a different screen resolution, you'd need to play around with the body margin-left and margin-right properties, and probably modify the .png too.