Custom CSS Stylesheets for Calibre's Viewer

[pendeverNM]

I've placed this code in my viewer preferences, and what I see on all Calibre ebooks is smushed-together text, looking like black squiggles - but if copied, the text comes out OK.
I've tinkered with spacing and size, and nothing seems to make any difference.
Can you please help?
thanks,
Pen

[mapline]

Hi
New user and I have a problem using the viewer as it cuts the top and bottom line .
Tried setting top and bottom margin as in post 1.
Makes No difference.
Can you tell me what I am doing wrong.
Thanks
Michael

[atjnjk]

Originally Posted by mapline

Hi
New user and I have a problem using the viewer as it cuts the top and bottom line .
Tried setting top and bottom margin as in post 1.
Makes No difference.
Can you tell me what I am doing wrong.
Thanks
Michael

From v0.8.61, you can click the top right button of the viewer so that no line is cut off. See this for more details.

[guycruls]

I have the calibre reader on two machines - one is vista, the other 7.
preferences on vista give me a handy interface to format 'Colors and backgrounds', but preferences on 7, forces me to create a CSS?
that is just plain dumb.

[DoctorOhh]

Originally Posted by guycruls

I have the calibre reader on two machines - one is vista, the other 7. preferences on vista give me a handy interface to format 'Colors and backgrounds', but preferences on 7, forces me to create a CSS?
that is just plain dumb.

Preferences on both machines should be the same. I've attached my Windows 7 Viewer preferences. There are four tabs across the top, choose General. Then click on Colors and backgrounds. Nothing could be simpler.

[theducks]

Originally Posted by guycruls

I have the calibre reader on two machines - one is vista, the other 7.
preferences on vista give me a handy interface to format 'Colors and backgrounds', but preferences on 7, forces me to create a CSS?
that is just plain dumb.

Are you running the (nearly) same version of Calibre on both machines?

That option has been around a while.

[DoctorOhh]

Originally Posted by theducks

Are you running the (nearly) same version of Calibre on both machines?

Good point, bring current both versions of calibre.

[anoved]

Here is a stylesheet I use to display text in multiple columns. The columns are as tall as the viewer window and you scroll horizontally to see more columns of text. The vertical position of lines of text does not change as you scroll. On a big computer screen, I like reading this way. (I've learned that some people strongly disagree. If that's you, cool - just move along!)



Works only with "flow" mode, not paged mode. I've only tested it with a few relatively simple ebooks. It may interact unpredictably with more complex formatting.

Horizontal scrolling works nicely with my trackpad, but unfortunately vertical scrolling (which jumps between chapters) seems too sensitive for my control, so I use the arrow keys. (Although that's not really specific to this stylesheet.)

html {
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
}

body {
	height: 100%;
	margin: 0;
	padding: 0;

	/* column-width seems to be treated as a suggestion; actual width
	is varied to fit an even number of columns within screen width. */
	-webkit-column-width: 20em;
	-webkit-column-count: auto;
	-webkit-column-gap: 1.5em;

	line-height: 1.5em;
}

/* This is a fudge fix to prevent the children of the body tag from
defining margins that overlap the body height, which causes small
but annoying amounts of vertical scroll. Uses a wildcard because
I don't necessarily know how any particular page is structured. */ 
body > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

I've also posted the code at github.com/anoved/McCalibre, where I may post any future updates.

Note this stylesheet just affects the layout of the text. You can still append additional styles for specific font/color/etc effects.

[mbovenka]

Originally Posted by anoved

Here is a stylesheet I use to display text in multiple columns. The columns are as tall as the viewer window and you scroll horizontally to see more columns of text. The vertical position of lines of text does not change as you scroll. On a big computer screen, I like reading this way. (I've learned that some people strongly disagree. If that's you, cool - just move along!)

Nice trick. I'm firmly in the 'Urgh. No thanks!'-camp, but it's definitely cool

[kovidgoyal]

@anoved: You know that in paged mode you can tell the viewer to display multiple columns on the screen right? Preferences->Text Layout in paged mode

[anoved]

Originally Posted by kovidgoyal

@anoved: You know that in paged mode you can tell the viewer to display multiple columns on the screen right? Preferences->Text Layout in paged mode

Yep, and it's quite nice. The difference with my stylesheet, though, is that the columns always remain in the window, instead of a paging away. A minor distinction.

I appreciate that Calibre is flexible enough to support eccentric preferences like mine!

[cyberxaos]

Here's an "iBook" theme I created for my 13" Macbook Pro (1280 x 800) display:

http://pastebin.com/tUxfe8cL#

Should be able to just cut 'n' paste this -- it has a base64 encoded png of a "book" as the image-background. Works well in full screen mode on my 1280x800 display -- probably won't work on other display sizes. Thanks to the base64 encoding there's a lot of css text, so it may take a minute to load into your "user stylesheet" tab (be prepared for spinning rainbow wheel).

Mac users: if you want to craft your own, use following css along with the background image of your choice (put the image in /Users/<your username>/Library/Preferences/calibre/images):

body {color:rgb(80,58,34);
background-color:rgb(174,174,174);
background-image:url("/Users/<your username>/Library/Preferences/calibre/images/<filename>.png");
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
text-align:justify;
line-spacing:1.8;
margin-top:50px;
margin-bottom:50px;
margin-right:50px;
margin-left:50px;
text-indent:3em;}
h1, h2, h3, h4, h5, h6
{color:rgb(80,58,34);
text-align:center;
font-style:italic;
font-weight:bold;}

[ms_ts_2007]

Originally Posted by 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:

Alright, this is exactly what I was looking for, a way to set a background image to my viewer. Now please, can someone please help me make a stlysheet that will leave every other setting intact, just adding the background image feature ?

Or point me how i can do this via Calibre interface, in case i am blind and I've missed it.

[maisondouf]

Please, how to make margin-bottom and margin-top working ??

[DoctorOhh]

Originally Posted by maisondouf

Please, how to make margin-bottom and margin-top working ??

Toggle the scroll icon to enter Paged mode. Now you will get a top and bottom margin that you can easily control via viewer preferences.