Custom CSS Stylesheets for Calibre's Viewer

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

[Vortex]

Yeah, with the style sheet. This is what I have:

body {
background-image:url("file:///C:/Program Files (x86)/Calibre2/resources/images/Back.jpg");
}

I tried your suggestion in various combinations with the above but all just made the background picture disappear.

[Sabardeyn]

Vortex,
Take a look at Message #147 by Cyberxaos. Based on that message, it appears that these are two separate commands that should be entered on different lines in the CSS. Hope this helps!


PS: I find the use of the Book's Spine quite an interesting affect.

[Vortex]

Thanks Sabardeyn, That's it. Now looks like this, (is there any way to turn off the slidey thing on the right?)

Sabardeyn; PS: I find the use of the Book's Spine quite an interesting affect.

You mean in this picture? Yes, it works well on a reasonable size screen. It was originally a lot narrower which made the buttons difficult to click on an old touch screen, so I played with the ubook software code until I figured out how to make it wider. I'm really pleased with how it came out just wish I could get Calibre to output to it automatically, I tried the 'open with' plugin but it outputs .HTMLZ which ubook cant open without renaming the file to .ZIP - maybe there's a plugin that'll do that...

[Sabardeyn]

Sorry, I'm not aware of a way to turn off the slider on the right. It may be possible, but if it is, the next avalible calibre guru will have to chime in.