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!

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

[theducks]

Originally Posted by butterbescotch

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

I can't see it in the preference option.

What OS and Calibre version (just in case this matters) ?

The preference option is IN the viewer, not the regular Calibre preference.
The tab is the 3rd(last) one at the top

[butterbescotch]

Originally Posted by theducks

What OS and Calibre version (just in case this matters) ?

The preference option is IN the viewer, not the regular Calibre preference.
The tab is the 3rd(last) one at the top

Thanks for the reply!. Yay! No more Times New Roman.

[Stitchdog]

Originally Posted by Ralob

My personal CSS style is extremely basic, but it does exactly what I want- proper indentation for all paragraphs, adequate spacing between lines, background color that is easy on the eyes, and centered headings. Very basic but it does its job.

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

I am an old fart that reads as much as he can but the readers background is usually to bright. But thanks to this i can see what i am reading just fine. My wife took my Pandigital and i am left to read on my computer untill i find a replacement. Thanks again very much. To old and to dumb to write a program. like this.

[jamezb3]

I use this one, I find it easy one the eyes.

body {
color: rgb(189,226,252);
background-color:rgb(80,80,80);
text-align:justify;
line-spacing:1.8;
margin-top:10px;
margin-bottom:4px;
margin-right:20px;
margin-left:20px;
text-indent:2em;
}
h1, h2, h3, h4, h5, h6 {
color:black;
text-align:center;
font-style:italic;
font-weight:bold;}