Custom CSS Stylesheets for Calibre's Viewer

[RobertJSawyer]

I'd like my paragraphs not justified (flush left, ragged right) and I thought this User Stylesheet in the calibre ebook viewer would do that (as well as turn off widow/orphan control), but the paragraphs are still fully justified (flush left, flush right) in the calibre ebook viewer. What CSS should I be using?

Thank you!

body {
text-align: left;
widows: 0;
orphans: 0
}

[RobertJSawyer]

Found an answer. This seems to do the trick:

body {
widows: 0;
orphans: 0;
text-align: left !important;
}
p {text-align: left}

[GERGE]

A recommendation, I have noticed that calibre understands text-rendering option of CSS, you should use it, it is pretty awesome.

What it does is enabling ligatures and kerning. Why they are not already enabled, I don't know.

You could use it like this:

body {
text-rendering: geometricPrecision;
widows: 0;
orphans: 0;
}

p {
line-height:1.633em;
margin-top:0;
margin-bottom:0;
text-align:justify;
}

[truth1ness]

I'm trying to set the maximum height for images in calibre reader. I added the following to the CSS in settings but it didn't do anything. What is the correct way to do this?

.container img {
max-height: 30px;
}

[theducks]

Originally Posted by truth1ness

I'm trying to set the maximum height for images in calibre reader. I added the following to the CSS in settings but it didn't do anything. What is the correct way to do this?

.container img {
max-height: 30px;
}

what is wrong with the simple

or
were you trying to only control an img that is a descendent of a .container class

[truth1ness]

Ah, that worked.

However, for some reason it seems like only max-height works. For example, max-height works but hight, width, and max-width don't seem to work. Using max-height without being able to set

width: auto;

kind of just smushes everything vertically but leaves it stretched out horizontally. I tried adding !important to see if it would override but that didn't seem to help.

[mr.derek]

Hi!

Sorry I'm new, but I couldn't figure this out - is there a way to chang link colours through CSS in Calibre reader? i.e. table of contents links or footnote links

I tried:

a:link {
  color: #ECF0F1;
  background:#2B2B2B;
}

But I still get the blue coloured links. I read somewhere in the start of this thread that it wasn't supported, but has this changed, or is there a workaround?

Thanks so much for your help!

Derek.

[theducks]

Originally Posted by mr.derek

Hi!

Sorry I'm new, but I couldn't figure this out - is there a way to chang link colours through CSS in Calibre reader? i.e. table of contents links or footnote links

I tried:

a:link {
  color: #ECF0F1;
  background:#2B2B2B;
}

But I still get the blue coloured links. I read somewhere in the start of this thread that it wasn't supported, but has this changed, or is there a workaround?

Thanks so much for your help!

Derek.

Conversion has a setting to remove all color calls (results are your readers default. Blue would be typical for links)

Did you want it to be some other color ?
a {color: black; } < gets any state of A

usually works

[mr.derek]

Hi!

Thanks for your quick reply! After reading your post, I did some more testing - it turns out that it was the ebook that I was using as a test case - the links would not change from blue with the a{color:black} CSS entry. However, when I loaded other books, the entry worked fine to change the colour! Awesome! =)

I couldn't figure out why that specific book wouldn't change (I'm not a CSS expert) so I just used the !important tag to force it, and this worked.

a:link {
color: #ECF0F1 !important;
background:#2B2B2B !important;
}

Thanks again for your help!

[Einenlum]

Calibre doesn't seem to care about top-margin (or top-padding) and bottom-margin (or bottom-padding). Am I doing it wrong?

Actually it works with the general options, but not by doing it thanks to a specific stylesheet.

[ostoha]

CSS
------------------------
body {
background:#F9F0C9 url('file:///D:/book_white.m2.bmp') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

В настройках:
--------------------------
Верхнее поле: 25px
Нижнее поле: 40px
Боковое поле: 75px

[epubs]

Styling for full screen view only?

The full screen options are limited and I would like to style the body margins to apply to full screen view only. I can do this while in full screen, but I would like to use User Stylesheet so the changes are applied every time.

Is there a parent selector or someway to apply styles to full screen view?

[Love2readheas]

Hi, I'm obviously new to Calibre and I need some assistance please.

I'd like to install a background image (in place of a color) to appear throughout the pages of my books. Would this take place in "Edit Book"? I'm just guessing here because I honestly have no clue.

Please give me very basic, simple instructions so I don't get confused and have to bug you again (probably will anyway, sorry).

Thanks very much for any help you can supply.

[theducks]

Originally Posted by Love2readheas

Hi, I'm obviously new to Calibre and I need some assistance please.

I'd like to install a background image (in place of a color) to appear throughout the pages of my books. Would this take place in "Edit Book"? I'm just guessing here because I honestly have no clue.

Please give me very basic, simple instructions so I don't get confused and have to bug you again (probably will anyway, sorry).

Thanks very much for any help you can supply.

You could do it that way. But that means touching every book

or, if you only want it on YOUR viewer, add a User Stylesheet to the VIEWERS preferences (nottthe one in the main Calibre)

you want to set up what you want

<body>background-image:  .... </body>

[DoctorOhh]

Originally Posted by Love2readheas

I'd like to install a background image (in place of a color) to appear throughout the pages of my books. Would this take place in "Edit Book"? I'm just guessing here because I honestly have no clue.

Open a book in the viewer. Then click on the viewer's preferences icon. Click on the User Stylesheet tab. I placed the following in this area.

body { background-image:url("file:///c:/bigback.jpg");
background-size:100% 100%;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center
}

Then click OK. Your file and path would have to be substituted for where I have c:/bigback.jpg.

I also attached the image I use in case you are interested.