Custom CSS Stylesheets for Calibre's Viewer

[Vortex]

Found the tick box to turn off the scrollbar, under Fullscreen Options.

Is it possible to specify the font in the CSS stylesheet so it over rides what's embedded in the books?

[DoctorOhh]

Since the expansion of the viewer preferences many things that previously required style sheet changes can be changed in the preferences.

Originally Posted by Vortex

Is it possible to specify the font in the CSS stylesheet so it over rides what's embedded in the books?

When the viewer is open click on the viewer preferences icon in the toolbar and change the font to anything you want.

[kovidgoyal]

Originally Posted by DoctorOhh

When the viewer is open click on the viewer preferences icon in the toolbar and change the font to anything you want.

This will not override fonts specified in the book. For that you should do an conversion and use filter css to remove the fonts.

[DoctorOhh]

Originally Posted by kovidgoyal

This will not override fonts specified in the book. For that you should do an conversion and use filter css to remove the fonts.

Thanks for the clarification, when I tested I forgot I have already removed any fonts from 98% of my books.

[dob]

I tried copying and pasting this code into the Calibre stylesheet and got a completely white page with no printing on it.
Whatever I try in background-color:rgb(0,0,0); doesn't change the background colour.
Changing the color changes the print color. What is going wrong?
I am a complete greenhorn with regard to this programming.
I am running Windows 7 on a Acer laptop. Please help.

Originally Posted by ekaser

You have an error in there. I was testing out a completely different color scheme (harking back to the "good old" MS-DOS days), when I used WHITE on BLUE background for my console (worked better then, with fixed pitch, large fonts :-). In your code above, you need to add a ':' after the body 'color' name. Without it, the body (text) color is ignored. It still works for what you want, because the default color is black. But it doesn't work if you try to set it to anything else. Not necessarily pleasing to use, but as another example, here's my "white on blue" style:

body {
color: rgb(255,255,255);
background-color:rgb(0,0,255);
text-align:justify;
line-spacing:1.8;
margin-top:0px;
margin-bottom:4px;
margin-right:50px;
margin-left:50px;
text-indent:2em;
}
h1, h2, h3, h4, h5, h6 {
color:white;
text-align:center;
font-style:italic;
font-weight:bold;
}

[ghudod]

Is there any way I can set the margins in terms of percentage of the window? For example, I like to read with the viewer covering about half the screen while I do something else, and my margin settings of 400px reduces the text on every line to a single word! If instead I could set the margin as a percentage, it would be greatly helpful. Here's the code, taken from some other contributor in this thread:

body {color:RGB(0,0,0) !important;
background-color:RGB(228,226,224) !important;
text-align:justify !important;
line-height:1.2 !important;
margin-top:0px !important;
margin-bottom:4px !important;
margin-right:400px !important;
margin-left:350px !important;
text-indent:5em !important;
background-image:url("http://img33.imageshack.us/img33/2545/calibrebackground.png") !important;
background-position:50% !important;}
p,div {margin-bottom:8px !important;margin-top:8px !important;}
blockquote {padding-right:35px !important;margin-bottom:8px !important;}
h1, h2, h3, h4, h5, h6
{color:black !important;
text-align:center !important;
font-style:italic !important;
font-weight:bold !important;}

I'm a noob to this and don't know any CSS. Please help to set the margin-left and margin-right values to percentages if possible!

[Brokkoli]

This is a line from my css, trying to make code look good:

.programlisting {
    font-family: "Anonymous Pro";
}

However, Calibri overrides it with its own stylesheet.css. I can right-click -> inspect element -> Computed Style --> Font-Family
And this is what is shows:

font-family: monospace;
.programlisting - monospace stylesheet.css:204
.programlisting - 'Anonymous Pro' user stylesheet
pre, xmp, plaintext, listing - monospace user agent stylesheet
body - georgia

So it tries to apply my setting but then overrides it with its own stylesheet!!?

Any help appreciated.

[kovidgoyal]

That's a stylesheet in your book, not one generated by calibre. You have to use !important to override the book's styles in your custom stylesheet or use filter css and do a conversion to remove the css from the book.

[AnnieWalker]

Originally Posted by sideburnt

If you're interested in CSS Styling take a quick look at
http://epubzengarden.com/?style=trad.../chapter1.html

Its a very new site but could become fantastic with a bit of contribution.

Hard to navigate around and took me a while to find the css preview page, I have linked to my favorite page style used on this site.

The last style there, "wallpaper", is amazing. Could someone help me applying it to my calibre?

[DoctorOhh]

Originally Posted by AnnieWalker

The last style there, "wallpaper", is amazing. Could someone help me applying it to my calibre?

I can help you with the basics of that style. One caveat, these instruction are for a Windows based computer.

First you have to grab the background image from the web page (http://epubzengarden.com/images/bg1.jpg) and save it to your computer. Right click the link and select Save link as if using Firefox or Save target as if using Internet Explorer. Save this file in a location on your hard drive, it doesn't matter where but you will need to obtain the file path to this image.

1. Now open any book in calibre's viewer and then open preferences. Now go to he User style tab (see attached) and paste the following. Replace the green colored path below with your actual path on your machine to the image.

body { background-image:url("file:///C:/Dropbox/Calibre Portable/Calibre Settings/resources/images/bg1.jpg") !important;
 }

2. Now go to the General tab and click on Colors and backgrounds row then click on the Change button next to text color (see attached) and fill in the following values:

Red: 68
Green: 51
Blue: 0

Click OK Then click OK again. Your book in calibre viewer should have the same background and text color as the example you cited. If it doesn't then review the path you set in step 1 above, ensure all slashes are in the same direction as I indicated and that it does point to the file's exact location on your machine.

3. Now that the background and font color are set open preferences again and go to the Theming tab (see attached). Click the Save button and enter a title for this theme. Click OK then OK again. Now you have saved this theme and if you decide to experiment further you can always go back to this theme via the Load button.

[AnnieWalker]

Incredible. Thanks for making it so easy. I've applied them in 5secs...but it seems that I can't override text alignment setting of the file to justify even with "text-align:justify !important;" line. Do you have a solution for this, too?

I appreciate your help.

[DoctorOhh]

Originally Posted by AnnieWalker

Incredible. Thanks for making it so easy. I've applied them in 5secs...but it seems that I can't override text alignment setting of the file to justify even with "text-align:justify !important;" line. Do you have a solution for this, too?

No tricks for the viewer, maybe someone else can give it a try.

I prefer left justified for my 7 inch tablet, but I can see using full justification on a full monitor. I tried what you tried and it worked on one book of about 12 that I tried it on.

Personally since I prefer left justify I set this when I convert the book to my specs. There is a setting under the conversion options on the Look & Feel tab where you can set your alignment preference during conversion, see attached.

Alternatively instead of converting the book if it is epub I suppose you could:

• Right click on the book.
• Select the Tweak Book Option
• Select Explode Book
• Select stylesheet.css
• Open it up in your favorite text editor (I use Notepad++).
• Find any (non-header, IE. not h1, h2, h3 etc...) instance of left and change it to justify.
• Save the stylesheet.css
• Select Rebuild book

Your book is now changed.

Good Luck.

[AnnieWalker]

Originally Posted by DoctorOhh

There is a setting under the conversion options on the Look & Feel tab where you can set your alignment preference during conversion, see attached.

Alternatively instead of converting the book if it is epub I suppose you could:

Thanks. I'm familiar with both those practices and they do the job but what I meant was if it could be resolved with adding one line in user stylesheet, per many mentions on this forum. Your 1/12 clarifies it for me.

Cheers

[DoctorOhh]

Originally Posted by AnnieWalker

Thanks. I'm familiar with both those practices and they do the job but what I meant was if it could be resolved with adding one line in user stylesheet, per many mentions on this forum. Your 1/12 clarifies it for me.

You're welcome.

Hopefully someone with more knowledge will have insight into how to adjust the viewer's css.

[Gladtobemom]

It was really hard to give up the Mobipocket reader. It was so easy to use and I loved the column formats.

Well. . . .It's now gone from my computer. I finally figured out how to get books to be three columns and cover my whole screen. Use my favorite font (Constantia) and even a soft buff background.

So, I have my Cybook (Opus) which fits in my apron pocket or my bag. I have Calibre to let me keep things organized and read on the PC.

My question is how can I get

3 columns/pages justified left