Custom CSS Stylesheets for Calibre's Viewer

[xd1986k]

Hello.
Would it be possible to set images to ignore margins set for text? Setting margins to zero and negative margin does not seem to help.

[lqiyun]

Hi, does anyone know how to generate a background that looks like this, especially for two-page views? (see the image attached below, or click the link for the image)


https://entuedu-my.sharepoint.com/pe...age_design.jpg

I'm referring to specially the middle portion of the page, where one can use this gradient effect to divide the page into two, for a more "bookish" feel. (where I marked it out with a red arrow)
Is there any way to do this, or perhaps to create a simple line down the middle as a simpler alternative?


Thanks!

[BetterRed]

Moderator Notice
That image link requires me to login to Microsoft.

Please upload the image to this site via the Manage Attachments feature; in Advanced mode, scroll down and you'll see a button, or click the paper-click icon in the top tollbar

BR

[MikeMJ]

The Calibre viewer that comes with Calibre 3.34 (Windows 64-bit) displays footnotes in a separate window, in a tiny font. I am reading a book where the footnotes are formatted as

<p class="tx">

.

I've tried using the following CSS in the User Stylesheet of the Viewer:

p .tx {
 font-size: medium !important;
}

but this doesn't seem to have any effect.

Can anyone help me figure out what I'm doing wrong?

[kovidgoyal]

user stylesheets aren't applied to the popup window, IIRC. And its font size comes from the font sizes in the viewer preferences, + any font sizes actually specified in the footnote markup

[Pacific9]

I've been trying to insert a page break after each paragraph, in such a way that I have to flip to a new page every single paragraph. The reason for this is that I will be summarizing thousands of paragraphs and I figure it would be easier to keep track if I broke them apart into individual pages.
I'm a css noob and I've had some success with "page-break-after" but I haven't figured out a way to properly implement this using the viewer's stylesheet. Any help would be appreciated.

[kovidgoyal]

p, div { page-break-after: always !important }

[speedyg]

First of all, thanks much for Calibre. It's marvelous.

I'm trying to use the viewer function for the first time and my book (epub) is showing as double spaced. I've added the following to User Stylesheet:

body {
color: rgb(230,213,77) !important;
background-color:rgb(64,43,30) !important;
line-height: 1 !important;
text-align:justify;
margin-top:0px;
margin-bottom:4px;
margin-right:50px;
margin-left:50px;
text-indent:3em;
}

Everything except line-height seems to work fine. I've also tried defining line-spacing.
Nothing I do changes the line height or spacing. When I use the same code on w3schools.com CSS TryIt page it displays exactly as I'd expect.

Am I doing something wrong?

Thanks.

[DNSB]

Originally Posted by speedyg

First of all, thanks much for Calibre. It's marvelous.

I'm trying to use the viewer function for the first time and my book (epub) is showing as double spaced. I've added the following to User Stylesheet:

body {
color: rgb(230,213,77) !important;
background-color:rgb(64,43,30) !important;
line-height: 1 !important;
text-align:justify;
margin-top:0px;
margin-bottom:4px;
margin-right:50px;
margin-left:50px;
text-indent:3em;
}

Everything except line-height seems to work fine. I've also tried defining line-spacing.
Nothing I do changes the line height or spacing. When I use the same code on w3schools.com CSS TryIt page it displays exactly as I'd expect.

Am I doing something wrong?

Thanks.

Given that a unitless line-height operates as a multiplier on the element's font size and you don't have a font size declaration visible, that might be an issue. You could try adding a font-size: 1em; declaration and see if that has any effect when you change the line-height though that 1em font size is relative to the parent element font-size declaration and if no parent element declaration, defaults to the renderer's default. It is better to use unitless line-heights in conjunction with font-size since using em and % for line heights can give interesting inheritance effects (for certain values of interesting...).

Another possibility is if there are any line height declaration on lower level elements. Take a close look at the classes used with <p> tags (or <div> tags for those ebook creators who insist on using <div> instead of <p> for paragraphs.)

You might also want to dump the absolute units for your margins and replace them with ems or other relative units. For instance, the right and left 50px margins on my old Kobo Touch would use 100 pixels of the 600 pixel screen width while on a KA1 with a 1404 pixel wide screen or Kobo Forma with a 1440 pixel wide screen, that 100 pixels is a lot smaller percentage of the screen width. Setting the left and right margins to 8.33% would give the same width on any of the three displays with the pixels ranging from 50 to 120.

[speedyg]

Originally Posted by DNSB

Another possibility is if there are any line height declaration on lower level elements. Take a close look at the classes used with <p> tags (or <div> tags for those ebook creators who insist on using <div> instead of <p> for paragraphs.)

Thanks for the response. That was the problem. One of the referenced Style sheets in the epub file has this:

p.Normal {
-epub-hyphens:none;
color:#000000;
font-family:"Times New Roman", serif;
font-size:1em;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:2;
...

Changing the line-height setting there changes the viewer display. My understanding was that changing setting in the "body" section of the User Stylesheet would override all these settings, but that's obviously not the case.

Is there a way of creating a setting in the User Stylesheet that will always take precedence, or am I stuck with editing each book when these kinds of issues turn up?

[theducks]

You have it backwards.
The styles cascade thru the (code indented) layers unless overridden by the layer

Body is the base

a Div or blockquote might establish a special grouping

then your P

So if you set Body, the rest inherit that unless you make a new declaration.
Usually, that is the only place I set line-height: (I also use the standard 1.2)
There are a few places I do use a different line-height

<h3 class="chapter> Chap title <br />Chap sub title</h3>

a bigger LH number spaces the lines apart

[mosesgreatgrandf]

firstly, thank you for your gift to humanity. the code that you have gifted to us is very useful and elegant and has served us well and will continue to spread knowledge and wisdom across the globe. As well as provide a moral code that is invaluable too us all.
Secondly guys you probably don't realise this but you are taking your first footsteps into the wonderful (ly frustrating but rewarding) world of programming,
Congratulations, stick with it and contribute to the free software movement that you are now reaping the rewards of.

[michailbachtin]

Downloaded Calibre news content always has a space between paragraphs.

Is there CSS Stylesheet line for Calibre's Viewer that removes the space between paragraphs?

I know that I can reformat each Epub using the "Convert" options, but that's a lot of work for every news source.

I'd be grateful for a CSS line that removes the space between paragraphs.

Cheers,

B.

[Syllius]

Hey, thank you so much for an amazing program. I have been very much enjoying editing the user interface with style sheets and would like to add some more personally preferred functionality with CSS if it's possible. I was able to add the book titles using the content: attr(title) and I was wondering what other data could be manipulated in this manner. I would very much like to put a total count for search results or individual libraries currently being accessed, but I am not sure what the data set would be that I am looking to access. Is there a repository somewhere that anyone could direct me? I would so greatly appreciate this. Thank you again and many blessings to you and yours.

With Respect and Humility,
Dan

[theducks]

Originally Posted by Syllius

Hey, thank you so much for an amazing program. I have been very much enjoying editing the user interface with style sheets and would like to add some more personally preferred functionality with CSS if it's possible. I was able to add the book titles using the content: attr(title) and I was wondering what other data could be manipulated in this manner. I would very much like to put a total count for search results or individual libraries currently being accessed, but I am not sure what the data set would be that I am looking to access. Is there a repository somewhere that anyone could direct me? I would so greatly appreciate this. Thank you again and many blessings to you and yours.

With Respect and Humility,
Dan

Dan
The Results/counts are on the 'status line' (Bottom Left).
3 values shown: All entries in Library, Total found or in current VL, and number selected <<always pay attention to this when doing bulk operations or can happen