Custom Styles for the calibre eBook Viewer

[Piper_]

calibre provides several configuration options to customize the way books appear and behave when read within the calibre ebook viewer. One of the options is to use our own style sheet [CSS], to further customize the appearance, from background and text colors to indents and margins.

This sticky will serve as a repository for examples and tips for creating and using your own style sheets.

If you have questions, samples, or other ideas to share, please post them in the discussion thread.


Jump to posts:
How to use the custom CSS option

Misc tips and troubleshooting

Sample CSS - Begin Here

[Piper_]

• Open any ebook in calibre's viewer.
• Click on the Options icon in the left
• Click on the User Stylesheet tab
• Type or paste the CSS you wish to use. (Note that occasionally, you will need to close then re-open the book to see the effects.)

Font size, type, and other settings can be selected under the General tab of this options dialog.

[Piper_]

Misc Tips and Troubleshooting
__________________

Remember that using this feature will only affect how ebooks appear in calibre's viewer. It will not change the CSS within your ebook. Keep this in mind if you use the calibre viewer to test the results of tweaks you make to your ebook file.

__________________

For a simple tutorial about CSS styles and how to create them,
check out the CSS Tutorial

__________________

For handy color codes - Hex, RGB, Names:
Color Picker: http://www.w3schools.com/tags/ref_colorpicker.asp
Basic colors: http://www.w3schools.com/css/css_colors.asp
Named colors: http://www.w3schools.com/css/css_colorsfull.asp

Run Quick Tests: http://www.w3schools.com/Css/tryit.a...trycss_default

__________________

Pseudo selectors, e.g., a:link, p:first-line, etc. are not supported
-Kovid

__________________

If the book you are reading already defines CSS styles that override your definitions, try adding "!important".

For example:
body {
color: red !important;
}
-Jellby

[Piper_]

Background and text colors

The CSS below results in a beige background with a dark brown font.

body {
background:#FFF9E3;
color:#5E3E0D;
}

Replace the letters shown in dark red with the color values of your choice.

You can also use rgb values or color names, but the choices for names are limited.

__________________

Margins

Add to the body selector:

body {
background:#FFF9E3;
color:#5E3E0D;
margin-right:75px;
margin-left:75px;
}

Again, replace the values with your choice.

__________________
Other Common Options

body {
background:#FFF9E3;
color:#5E3E0D;
margin-right:75px;
margin-left:75px;
text-align:justify;
line-height:1.25em;
background-image:url("file:///C:/Program Files/Calibre2/resources/images/background.jpg")
}

Note: To use a background image, you must first place one in the folder you're pointing to.