Custom CSS Stylesheets for Calibre's Viewer

[theducks]

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:

The background must be embedded in your book if you wish it to work on any other device. In Sigil, the source would be (in the) "../Images /old_paper.jpg"

[DoctorOhh]

Originally Posted by theducks

The background must be embedded in your book if you wish it to work on any other device. In Sigil, the source would be (in the) "../Images /old_paper.jpg"

Good info, but off topic. This thread is all about calibre's viewer css not getting the css to work in a book.

[theducks]

Originally Posted by dwanthny

Good info, but off topic. This thread is all about calibre's viewer css not getting the css to work in a book.

My oops!

[werewolfery]

Hi there another vewbie to the whole css stuff. so I managed to get a nice set of stuff for both day and night reading using my little 11inch notebook, is there any way to make something that could switch between my day and night settings rather than me copying and pasting the codes every 12 hours or so...

thanks

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