Custom CSS Stylesheets for Calibre's Viewer

[WebDesignEbooks]

Save me a lot of work!

[marcot]

If you intend to apply styles to the navbar, don't make the same mistake I did. I tried to apply styles to the class ".calibrenavbar," which results in zilcho. If you are using an "extra-css" stylesheet from the command line ("ebook-convert" command), Calibre applies the styles to the HTML during an intermediate stage of processing, which can be viewed by using the --debug-pipeline option. Using that option would reveal that the navbar class relevant to styling is ".calibre_navbar."

[WebDesignEbooks]

Originally Posted by marcot

If you intend to apply styles to the navbar, don't make the same mistake I did. I tried to apply styles to the class ".calibrenavbar," which results in zilcho. If you are using an "extra-css" stylesheet from the command line ("ebook-convert" command), Calibre applies the styles to the HTML during an intermediate stage of processing, which can be viewed by using the --debug-pipeline option. Using that option would reveal that the navbar class relevant to styling is ".calibre_navbar."

Thanks for the info. I wasn't planning anything too fancy for the navigation.

Ya got me thinking though, if I have a regular external CSS file and a print CSS file in the same template, which one is Calibre going to use?

[towhit523]

Originally Posted by WebDesignEbooks

What happens when the original HTML file uses an external stylesheet?

All I have found so (did read some posts and the tutorial on compiling your ebook) are is references to the built in CSS screen and using internal stylesheet.

This is my first day here, sorry if I asked this in the wrong thread.

Can someone show me an example of how to specify my external stylesheet in the Extra CSS box? Do I provide the file directory path, for example c:\...\...\mystyle.css? Do I need to copy my stylesheet to a particular location? I have searched the forums and the User Guide for an example but I can't find one. I have been unable to get Calibre to apply my stylesheet.

Thanks in advance.

[kovidgoyal]

copy paste the contents of the stylesheet into the extra css box.

[akadaedalus]

Originally Posted by kovidgoyal

extra css is not used by the recipe system. You have to use the extra_css field in the recipe itself for that.

Is there a good reason for this restriction? It seems if I am setting extra_css in the common properties, I am accepting that it would be applied to everything, and can accept the consequences.

I'm looking at how the colors blue and gray look really, really faint on the prs-500. I'd like to just make everything black, but don't really want to go into each recipe and add redundant extra_css lines.

[kovidgoyal]

Originally Posted by akadaedalus

Is there a good reason for this restriction? It seems if I am setting extra_css in the common properties, I am accepting that it would be applied to everything, and can accept the consequences.

I'm looking at how the colors blue and gray look really, really faint on the prs-500. I'd like to just make everything black, but don't really want to go into each recipe and add redundant extra_css lines.

No reason, it's just not something I ever felt the need to implement.

[WeibRabe]

kovidgoyal,

does colibre understand such a css:

pre{whte-space:pre-wrap;}

? After converting chm files, my Kindle doesn't show some lines in pre blocks (if they are too long), part of lines are not visible and I'd like to wrap them when they don't fit to screen..

I've tried different variants with white-space as normal (the result is awful), with mentioning width, but nothing helped me.

[kovidgoyal]

the kindle doesn't support css. You have to put this in <pre> tgs, though I don't recall if the kindle even supports that.

[ocgforme]

I could *definitely*, desperately use some help with this CSS.

I'm a *totally* novice user of calibre, and I have visual processing issues which demand a certain amount of white space between the text and the frame.

HOWEVER, no matter what fiddling I do to the text alignment, the maximum width, or the margins (measured in pixels only?)--- NONE of those changes show up in the default help "book".

Being able to apply a proper CSS to *everything* I open for myself will allow me to read more (less time spent converting a file to exactly the same file type, but with my necessary margins, et alia).

I need about 1/8-1/4" on all sides of the frame as white space. I definitely, absolutely, prefer left-justified formatting,

[nothing girl]

Hi guys sorry for the noob question but I was hoping I could get some help changing the background and font color. I let my BF take my ipod (as well as all my ebooks, lol) for a few weeks out of the country and so I need to do all my reading on calibre for now and I hate white backgrounds with black letters. I did use the CSS from the first page of this thread and it worked but the colors aren't much different and my attempt to change it failed. Can someone tell me how, or what to replace to get a slightly off black background with a cyan or pale violet font?

I believe this is what I am trying to get, 090909 (background) and 844fdf (font)
but it doesn't seem to be working for me. I am sure its just a mistake with how I am replacing the text, but I have no clue exactly how it should be typed.

[Perkin]

open any book in calibre's viewer, insert in preferences->user stylesheet

body {background:#090909;color:#844fdf;}

[darkspruce]

this is a brilliant thread and helpful website.I've tried all the suggestions and they all worked immediately.I really like being able to swap between backgrounds.
I've got a Samsung P2.You can read texts on it(but only a few lines to a page) and with the latest firmware they've come up with some intersting looking backgrounds or"paper-like looks.One is a sort of light brown sort of sepia look which gives the impression of an antique book.It looks good but most of all it's really easy on the eyes.Is there an easy way to do this?
Thanks

[darkspruce]

I've played around with different colours but is there any way you can introduce textures.I've seen an antiquey sort of beige/brown sandy colour which I find is very easy on the eyes and I'd like to try it.
This is a fab website!

[kovidgoyal]

You'd have to use an image as the background. Just google css background image