Custom CSS Stylesheets for Calibre's Viewer

[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.

[bate23bate23]

is it possible to make columns for full screen mode. i would like to have columns because reading long lines can be a hassle and reading in a smaller window is distracting because of everything else on the screen. i'm no computer expert but i did try googliing how to make columns in for css but they all involved tags and classes being added to html page. i just wanted to have the 2 equal columns with content flowing from the first to the second column. is that even possible without using specific tags and classes? if not i think it should be a feature added to calibre's options.

[kovidgoyal]

Click preferences in the viewer, set the max view width to whatever you want and make it full screen

[bate23bate23]

Originally Posted by kovidgoyal

Click preferences in the viewer, set the max view width to whatever you want and make it full screen

when i do that there is unnecessary empty space. if there were columns it would be much more efficient. though it will have to do for now.
thanks for the fast reply!
hopefully we will see this feature added to calibre in the near future.

[zimreader]

Originally Posted by 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; }

Thanks for this! I used your code, changed the colors (kind of like old WP for DOS I think, yellow on blue), and found the following rather pleasing to my eyes:

body {
color: rgb(215,215,0);
background-color:rgb(0,0,205);
line-spacing:1.8;
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: 1.5em !important; } p + p {
margin-top: 0; }

[nirazo]

Where and how to put these codes in mine calibre? i din't place to keep it. Plz help me out.


Regards,
Nirazo

[theducks]

Originally Posted by nirazo

Where and how to put these codes in mine calibre? i din't place to keep it. Plz help me out.


Regards,
Nirazo

Use the Gears (preferences) in the Viewer program, The 3rd tab is all for you

[wpcreader]

I don't know anything about how to adjust a CSS script so please forgive me. I am trying to use:


body
{
color:rgb(0,0,0) !important;
background-color:rgb(200,200,200);
text-align:justify;
line-spacing:1.8;
margin-top:1px;
margin-bottom:1px;
margin-right:10px;
margin-left:10px;

-webkit-column-count: 2;
-webkit-column-gap: 1em;
-webkit-column-rule: 1px dotted;

height: 650px;
width:1200px

text-indent: 2em;
}
h1, h2, h3, h4, h5, h6
{
color:black;
text-align:center;
font-style:italic;
font-weight:bold;
}

to have a two column viewing to read, like an actual open book. It was originally posted by carthoris.

When I input this, it opens as two columns and looks great. When I turn a page, in any way, the book advances hundreds of pages @ a time. Please advize on how to make this work correctly. Thanks, Phil.

I have discovered all pages are viewable, I have to scroll left to right on the bottom scroll bar. Is there code to [my guess] create a page break after every other column.

Thanks.

[pendeverNM]

I'm a newby, and after reading this thread, have employed the offered CSS text to control the viewer ... but no matter what I do with it, or my choices for font or its sizes, the display looks like each line has been sat on. (When I tried to copy a sample here, it reproduced as normal, which is not what's on my computer viewing screen).


My style sheet is:

body {color:rgb(0,0,0);
background-color:rgb(228,226,224);
text-align:justify;
line-spacing:2;!important;
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:left;
font-style:italic;
font-weight:bold;}

[rgponce]

My style sheet:

body {
color: #393939;
background:#F9F0C9 url('file:///C:/Program Files (x86)/Calibre2/resources/images/old_paper.jpg');
text-align:justify;
line-spacing:1.8;
margin-right:8em !important;
margin-left:8em !important;
}
p {
text-indent:2.5em !important;
padding-bottom:0.5em;
font-family: "Book Antiqua", Palatino, serif !important;
}
h1, h2, h3, h4, h5, h6, .p6 {
color: #330000 !important;
border-bottom: 2px solid #330000 !important;
text-align:right !important;
font-style:italic !important;
font-weight:bold !important;
font-size: 1.3em !important;
}
::selection {
background: #FADC5C;
}

image used as background:

[vicissitudes]

really helpful to me! you bailed me out.

[vicissitudes]

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

really thanks!