Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Software > Calibre > Library Management

Notices

Closed Thread
 
Thread Tools Search this Thread
Old 03-11-2011, 02:56 PM   #1
Piper_
~~~~~
Piper_ ought to be getting tired of karma fortunes by now.Piper_ ought to be getting tired of karma fortunes by now.Piper_ ought to be getting tired of karma fortunes by now.Piper_ ought to be getting tired of karma fortunes by now.Piper_ ought to be getting tired of karma fortunes by now.Piper_ ought to be getting tired of karma fortunes by now.Piper_ ought to be getting tired of karma fortunes by now.Piper_ ought to be getting tired of karma fortunes by now.Piper_ ought to be getting tired of karma fortunes by now.Piper_ ought to be getting tired of karma fortunes by now.Piper_ ought to be getting tired of karma fortunes by now.
 
Piper_'s Avatar
 
Posts: 762
Karma: 1278391
Join Date: Aug 2010
Location: USA
Device: Kindle 3, Sony 350
Custom Styles for the calibre eBook Viewer

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

Last edited by Piper_; 03-11-2011 at 03:14 PM.
Piper_ is offline  
Old 03-11-2011, 02:58 PM   #2
Piper_
~~~~~
Piper_ ought to be getting tired of karma fortunes by now.Piper_ ought to be getting tired of karma fortunes by now.Piper_ ought to be getting tired of karma fortunes by now.Piper_ ought to be getting tired of karma fortunes by now.Piper_ ought to be getting tired of karma fortunes by now.Piper_ ought to be getting tired of karma fortunes by now.Piper_ ought to be getting tired of karma fortunes by now.Piper_ ought to be getting tired of karma fortunes by now.Piper_ ought to be getting tired of karma fortunes by now.Piper_ ought to be getting tired of karma fortunes by now.Piper_ ought to be getting tired of karma fortunes by now.
 
Piper_'s Avatar
 
Posts: 762
Karma: 1278391
Join Date: Aug 2010
Location: USA
Device: Kindle 3, Sony 350
How to use the custom CSS option

  • 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_ is offline  
 
Enthusiast
Old 03-11-2011, 03:06 PM   #3
Piper_
~~~~~
Piper_ ought to be getting tired of karma fortunes by now.Piper_ ought to be getting tired of karma fortunes by now.Piper_ ought to be getting tired of karma fortunes by now.Piper_ ought to be getting tired of karma fortunes by now.Piper_ ought to be getting tired of karma fortunes by now.Piper_ ought to be getting tired of karma fortunes by now.Piper_ ought to be getting tired of karma fortunes by now.Piper_ ought to be getting tired of karma fortunes by now.Piper_ ought to be getting tired of karma fortunes by now.Piper_ ought to be getting tired of karma fortunes by now.Piper_ ought to be getting tired of karma fortunes by now.
 
Piper_'s Avatar
 
Posts: 762
Karma: 1278391
Join Date: Aug 2010
Location: USA
Device: Kindle 3, Sony 350
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

Last edited by Piper_; 03-11-2011 at 03:42 PM.
Piper_ is offline  
Old 03-11-2011, 03:11 PM   #4
Piper_
~~~~~
Piper_ ought to be getting tired of karma fortunes by now.Piper_ ought to be getting tired of karma fortunes by now.Piper_ ought to be getting tired of karma fortunes by now.Piper_ ought to be getting tired of karma fortunes by now.Piper_ ought to be getting tired of karma fortunes by now.Piper_ ought to be getting tired of karma fortunes by now.Piper_ ought to be getting tired of karma fortunes by now.Piper_ ought to be getting tired of karma fortunes by now.Piper_ ought to be getting tired of karma fortunes by now.Piper_ ought to be getting tired of karma fortunes by now.Piper_ ought to be getting tired of karma fortunes by now.
 
Piper_'s Avatar
 
Posts: 762
Karma: 1278391
Join Date: Aug 2010
Location: USA
Device: Kindle 3, Sony 350
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.
Piper_ is offline  
Closed Thread

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Can I use the ebook viewer without opening Calibre database? iridius Library Management 16 03-01-2013 02:43 AM
[old-topic]ebook-viewer: Open source, crossplatform viewer for EPUB, LIT, MOBI, etc kovidgoyal Calibre 68 05-30-2011 08:46 PM
# user css for viewer.py/ ebook-viewer/ prs-650 tscamera Calibre 0 01-02-2011 06:28 PM
Calibre Ebook Viewer Printing tom95521 Calibre 2 04-17-2010 01:28 PM


All times are GMT -4. The time now is 05:20 AM.


MobileRead.com is a privately owned, operated and funded community.