Custom CSS Stylesheets for Calibre's Viewer

[pollito pito]

if you want to have an image as background for the reader, you can try adding something like this
on your user stylesheet CSS (assuming you are on ms-windows)

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

note the the use / .

[andy8679]

I'm sorry but I am very new to Calibre. I have almost the same question as Darkspruce. I found a background of an old style paper that would make it a lot easier on my eyes to read on my laptop. But everything I try in the user stylesheet just keeps the background white. I saved the image to my computer as a .gif file. Can anyone please give me step-by-step info on how to do this, it would be greatly appreciated.

[Piper_]

Originally Posted by andy8679

I'm sorry but I am very new to Calibre. I have almost the same question as Darkspruce. I found a background of an old style paper that would make it a lot easier on my eyes to read on my laptop. But everything I try in the user stylesheet just keeps the background white. I saved the image to my computer as a .gif file. Can anyone please give me step-by-step info on how to do this, it would be greatly appreciated.

My first thought is a typo in the css, or the location of the file.

Can you copy and paste the full CSS you're using? Probably also good to know the format of the book you're trying to read.

[pollito pito]

.


Could someone please, explain why this thread (it used to be Sticky) is now under Library Management?


As to the question:
Copy your image somewhere, let’s say on:
C:/Program Files/Calibre2/resources/images/old_paper.jpg
Assuming your image is called “old_paper.jpg”
Open an ebook; on the reader preferences paste the following :
body {
background-image:url("file:///C:/Program Files/Calibre2/resources/images/old_paper.png");
}
Close the preferences dialog.
Enjoy

[Piper_]

Polito,
I agree that it would be a good sticky. I'll ask about it.

I moved it to Library Management, because that's where we decided to put posts about calibre's ebook viewer.

We've tinkered with the description a couple of times to make that more clear, but maybe "viewing" still isn't as obvious as it could be. It needs to be, since reading by itself doesn't intuitively fall under management.

[pollito pito]

Originally Posted by Piper_

Polito,
I agree that it would be a good sticky. I'll ask about it.

I moved it to Library Management, because that's where we decided to put posts about calibre's ebook viewer.

We've tinkered with the description a couple of times to make that more clear, but maybe "viewing" still isn't as obvious as it could be. It needs to be, since reading by itself doesn't intuitively fall under management.

Thanks. What would you think of a viewer sub forum?

[Piper_]

Originally Posted by pollito pito

Thanks. What would you think of a viewer sub forum?

Well, it's important to keep the list of subforums as short as we can, so we're trying to make the most out of each one. If there started to be a huge increase in the number of threads about the viewer, it might be considered, but at this point, I expect there are other subtopics that would be ahead in the line.

[darkspruce]

Please can you help me with this.I've never done programming and I found the css links very confusing.
I've tried to change the page as advised by pollito pito
body {
background-image:url("file:///C:/Program Files/Calibre2/resources/images/old_paper.png");
}
I pasted this:
body {
background-image:url("file:///C:/Users /white fang / / Downloads\Downloads\old_paper.png");
}
changed the file name to old_paper to try to keep it the same as the example but nothing changed in the ebook.
Thanks in anticipation.

[darkspruce]

just figured it .
Polito's message should have jpg at the end not png

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

this is good can have fun now!

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

[OldSeaDog]

Question:
If a book already defines the CSS font color, is there a way to override the book’s body definitions?

[butterbescotch]

How do I find this "Click on the User Stylesheet tab"?

I can't see it in the preference option.