Custom CSS Stylesheets for Calibre's Viewer

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

[Sabardeyn]

Ms_ts_2007,

I believe just the following should do what you want:

body {
background:#F9F0C9 url('file:///C:/Program Files (x86)/Calibre2/resources/images/old_paper.jpg');
}

If the book you load includes it's own background color (the #F.. portion) and image (the url portion) it might override the info above. Adding " !important" (including space but without quotes) after the closing parenthesis and before the semi-colon might correct this issue. (I've never used an image. It will definitely override the color.)


CSS, kind of like missing ebook metadata, doesn't complain if various bits and pieces are not present. CSS just assumes that the defaults apply and only the mentioned bits are being changed.

The body section affects the page itself; the p is for defining paragraphs, the h1-p6 are various heading definitions. The selection... is beyond my knowledge.

[theducks]

Originally Posted by Sabardeyn

Ms_ts_2007,

I believe just the following should do what you want:

body {
background:#F9F0C9 url('file:///C:/Program Files (x86)/Calibre2/resources/images/old_paper.jpg');
}

That path is to the Calibre install folder (which varies by OS) (as do the direction of the \'s )

It would be better to place a COPY of that file into the resources\images of the configuration folder

BTW 'old_paper.jpg' does not exist in my (default, calibre) install

[Sabardeyn]

Thanks for the clarification, I'm sure it will be of help to users of other OSes.

The info posted was from Cyberxaos' post originally. I just excised the applicable example and did the "CSS to English" translation.

The original post has a link that includes the image, I think. Never used pastebin so I'm not sure how they've implemented things - it appears to be a hex dump of an image file.

[maisondouf]

Originally Posted by DoctorOhh

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.

Ok, but in eBook viewer's prefrences, I don't find any option for that...

even so thanks for your answer.

EDIT: I would be better to apply 'user stylesheet' to a div cantaining all the page instead of body.
The scenario for displaying text would be the same, but we can apply a margin before displaying this div in the body.
But perhaps, it's not possible...

[maisondouf]

Youpi, I found a better solution...
Uninstall Ubuntu version (0.8.38) ande install last stable (0.9.13).
Now margin options are available.

[DoctorOhh]

Originally Posted by maisondouf

Youpi, I found a better solution...
Uninstall Ubuntu version (0.8.38) ande install last stable (0.9.13).
Now margin options are available.

Glad you figured it out. Not a better solution, the same solution. The reason you couldn't find the option is that it didn't exist until 0.8.61.

From What's New:

Release: 0.8.61 [20 Jul, 2012]

New Features

• E-book viewer: Add a paged mode that splits up the text into pages, like in a paper book instead of presenting it as a single column. To activate click the button with the yellow scroll icon in the top right corner.
  
  In paged mode, the ebook viewer no longer cuts off the last line of text at the bottom of the screen, and it respects CSS page-break directives. You can also set page margins and control the number of pages displayed on screen by clicking the Preferences button in the viewer and going to 'Text layout in paged mode'.

[KeithJ108]

Hi,

I created a user CSS template from some of the examples here but it seems that the background color is ignored by the Calibre eBook viewer. I can change the color in the eBook viewer preferences window but not through the CSS style-sheet.

Is this a bug or is there something wrong with my code?
Calibre version 0.9.14 on Windows 8 64-bit.

h1, h2, h3, h4, h5, h6 {
	font-weight: bolder;
	text-transform: capitalize;
	color: rgb(0, 0, 0);
	text-align:center;

}
body {
	color: rgb(0, 0, 0);
	background-color: rgb(254, 243, 213);
	text-align: justify;
	line-spacing: 1.8;
	margin-top: 0px;
	margin-bottom: 4px;
	margin-right: 50px;
	margin-left: 50px;
	text-indent: 3em;
}

[kovidgoyal]

You need to use !important to ensure you override whatever color is set in the books code.

[orrajabi]

Dear all,
I am a new user and don't know much about CSS.
I am using Persian language. It is from right to left. How can I tell Calibre through CSS to change the text-direction to "right-to-left"?

Thanks in advance.

[Vortex]

I'm trying to use this background image how do I stop it from being tiled so it fits the Calibre reader? I'm attempting to create something similar to what I have set up in ubook.
Thanks.

[theducks]

Originally Posted by Vortex

I'm trying to use this background image how do I stop it from being tiled so it fits the Calibre reader? I'm attempting to create something similar to what I have set up in ubook.
Thanks.

I only know how to do it editing the stylesheet

background-repeat: no-repeat;