Custom CSS Stylesheets for Calibre's Viewer

[JSWolf]

Originally Posted by rockster

I forget about that. Thanks.

That could be why the CSS code isn't working.

Your welcome.

[ThomasSeeker]

Hey guys,

I searched the web without success for a list of all the css-element identifiers. Can someone help me please?

The most urgent one is the one for the background-colour of the highlighted text-sections (currently a really aggressive piss-yellow ... ;-))

Please help!

[theducks]

https://www.w3schools.com/cssref/default.asp

Just remember that all you see there does not apply (at all) to EPUB.
It may look fine in Calibre or Sigil preview, but the acid test is the REAL device

[ThomasSeeker]

Thank you theducks, for trying to help!

But in the list behind your link I did not find a working selector for highlighted text.

Somewhere else I found "::selection".

This is what I chose instead of the default piss-yellow:

::selection { color: white; background: #45b1e9;}

So beautiful! I'm happy now!

:-)

[ThomasSeeker]

PS: Here is the list of the CSS Selectors:

https://www.w3schools.com/cssref/css_selectors.asp

[JSWolf]

Originally Posted by ThomasSeeker

PS: Here is the list of the CSS Selectors:

https://www.w3schools.com/cssref/css_selectors.asp

But which ones are available for ePub? Not all of them are.

[ThomasSeeker]

Good question, JSWolf! ... I'd like to know too!

[JSWolf]

Originally Posted by ThomasSeeker

Good question, JSWolf! ... I'd like to know too!

Once you figure out what's supported, you have to then figure out what's ePub 2 and what's ePub 3. And just because it's supposed to be supported, it may not be in some programs. So if you can do without them, do so and use a work around that does work.

For example, p::first-letter can be done away with by using a <span> to do the same thing.

[echej]

Could anyone share a css that is similar to the one as in Calibre-web or in Apple Books?

[sanon]

Hello everyone,

I've installed a new font, "Barlow Semi Condensed", and updated my css as follows:

p {
line-height: 1.6;
background-color: #4d4d4d;
font-family: "Barlow Semi Condensed" !important;
text-align: left !important;
}

Doesn't seem to be working though... The font has changed into something but it's not BSC. What am I doing incorrectly? Thanks.

EDIT: Solution for anyone interested:
Windows, for whatever reason, has installed 4 out of 18 "Barlow Semi Condensed" fontfaces under "Barlow". These are "regular", "italic", "bold" and "bold italic". So, "font-family: Barlow !important;" is the solution.

Any idea why Windows does this and how to fix it?

[Comfy.n]

Today I needed to add spacing between paragraphs, but couldn't find a rule that would stick, then after several unsuccessful attempts I found this:

https://stackoverflow.com/questions/...34345#25234345

Now I'm using:

p + p {margin-top: 0.4em !important;}

[Abhi]

Scrapped from Android eBook reader

@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative&family=Libre+Baskerv ille&display=swap');

strong {color: #00B095;font-weight: 900;font-size: 105%;}

em, i {color: #FF9E00;font-weight: 900;font-size: 105%;}

span {display: inline;}

body {font-family: 'Libre Baskerville', serif;background-color: #988E7A;color: #191919;padding: 10px;word-wrap: break-word;}

img {max-width: 100%;}

h1, h2, h3, h4, h5, h6 {font-family: 'Cinzel Decorative',cursive;text-align: center;color: #FFF;font-weight: 400}

hr {border: 2px solid; border-radius: 2px;}

[aldobelus]

Originally Posted by sideburnt

If you're interested in CSS Styling take a quick look at
http://epubzengarden.com/?style=trad.../chapter1.html

Its a very new site but could become fantastic with a bit of contribution.

Hard to navigate around and took me a while to find the css preview page, I have linked to my favorite page style used on this site.

At this site there's nothing to be interested. It's a different text, nothing to do with CSS.

[pdurrant]

Originally Posted by aldobelus

At this site there's nothing to be interested. It's a different text, nothing to do with CSS.

That's because you're reading and commenting on a 14-year old post.

You might be able to find old versions at the internet archive, although they might not be functional. Here's the About page from 2009:

https://web.archive.org/web/20090825...den.com/about/

[onyxmage]

Here's a css styling for people who prefers a 1-page view for the paginated mode in the calibre viewer:

body.calibre-viewer-paginated *,
body.calibre-viewer-scrolling *{
margin: auto !important;
}

body.calibre-viewer-paginated p,
body.calibre-viewer-scrolling p{
max-width: 70ch !important;
padding: 0 1em 1em 1em !important;
}

This handles the left and right margins of the view better than the settings, and adjusts well to resize. The caveat is it causes some stuttering on dynamic resize.