Custom CSS Stylesheets for Calibre's Viewer

[Syllius]

Originally Posted by theducks

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

Ducks, thanks so much for your response! I apologize for wording that question so poorly. I'm actually looking for the the javascript code to display the total book count via the content server html pages. When I access the mobile version, it will show the total book count on the top and bottom of the book list with the context "Books # of #". I'd like to be able to include that number on the main topbar of the cover grid viewer. Thanks again for any information!

[kovidgoyal]

There is no facility for adding JS code to the content server interface. You can of course edit the JS calibre itself uses to do whatever you want, and replace it in the file index-generated.html, but this is very fragile and likely to break.

[Syllius]

Originally Posted by kovidgoyal

There is no facility for adding JS code to the content server interface. You can of course edit the JS calibre itself uses to do whatever you want, and replace it in the file index-generated.html, but this is very fragile and likely to break.

Good day, and thank you again for the reply! I actually have been editing the index-generated.html. I can't seem to find what JS function is being used to call the total book count from the current library. The information appears on the mobile version, but not in the desktop browser version. If there's any way you can provide me with it, I'd be so grateful.

I'm still trying to reverse engineer the way the HTML is being constructed. I would like to provide an interface much like the one that is utilized in Plex, with the main libraries on the left, sorting and filtering features on a top bar and content in the main frame. If there are any tools that would help with repositioning the dynamic content, this would also be very useful to me. Thank you so much again for your amazing work!

[sawka]

Hello All,

Is there a way to change background color of that white frame from the attached picture?

I don't know what is the proper name of that element, but it seems that in HTML it's called the "aside tag".

Here's that element's code taken from the ebook editor:

<aside data-type="sidebar" epub:type="sidebar"><div id="idm46043484622440" class="sidebar">
<h5>Official Versus Unofficial</h5>
<p>Don’t be put off by integrations such as client libraries being<a id="GBS.0019.02"></a> unofficial or
third party. With hundreds of applications and systems that you may wish to
integrate with, it is not possible for the Prometheus project team to have the time and expertise to create and maintain them all. Thus the vast majority of
integrations in the ecosystem are third party. In order to keep things
reasonably consistent and working as you would expect, guidelines are available<a id="GBS.0019.03"></a>
on how to write integrations.</p>
</div></aside>

I tried to change it using a user stylesheet, but something as simple as:

aside { background-color: yellow; }

just doesn't work...

[davidfor]

Originally Posted by sawka

Hello All,

Is there a way to change background color of that white frame from the attached picture?

I don't know what is the proper name of that element, but it seems that in HTML it's called the "aside tag".

Here's that element's code taken from the ebook editor:



I tried to change it using a user stylesheet, but something as simple as:



just doesn't work...

I think the aside tag is only supported by epub3. I don't know what an epub 2 would do with it. But, you are probably changing the wrong class. The aside wraps around a div. The div has the class "sidebar". That is probably what is setting the white background.

[kovidgoyal]

.sidebar { background-color: yellow !important }

[sawka]

Yes, @davidfor, you were right about that sidebar class. My CSS level is even below a noob...

And thank you @kovidgoyal for delivering a working solution! But first of all that you for creating that outstanding piece of software!

[darklenre]

Hello guys, is there a way to implement syntax highlighting via themes, i mean things like quotes or dialogues.

ex.: And Case said - I believe you. -

Can we make the text between hyphens another color/style?

[gweminence]

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;}

Thanks, using this verbatim.

[DoctorOhh]

Viewer 4.20

With the viewer changed to version 4+ my css for the viewer and the background changed. I now use the below CSS and the attached background (also attached final result). In landscape mode, 2 pages per screen for reading on my computer.

I use the sections in the viewer preferences to set margins, colors, fonts etc. Since I do set a margin in preferences, I set my color scheme to #dbcba7 and set my background image fade to about 10-30%.

P {
margin-left: 1.25em !important;
margin-right: 1.15em !important;
}
body {
margin-top: 0.15em !important;
}

If the book I pull up to read has all the paragraphs spaced using div tags vice p tags then I would simply change the code to

div {
margin-left: 1.25em !important;
margin-right: 1.15em !important;
}
body {
margin-top: 0.15em !important;
}

Per request I included images of the following viewer preference screens to clarify what I did:

Page Layout
Colors
Styles
Headers and Footers
Scrolling Behavior (option to show scroll bar, which I don't use)

On the font page I also set the minimum font size to 20px. This combined with the top and bottom margins seem to set the size of the information in the Headers and Footers. If there isn't enough room (top & bottom margins) in the header and footers you may not see the information you choose to see in those areas.

Common Shortcut Keys
F11 key toggle full screen mode just like it does in any browser.
Ctrl T toggle the Table of contents
Ctrl + increase font size
Ctrl - Decrease font size

[michailbachtin]

Thanks for your post. Question:
Is there any way to remove spaces between paragraphs (which Calibre news downloads always have)?

Originally Posted by DoctorOhh

Viewer 4.10

With the viewer changed to version 4+ my css for the viewer and the background changed. I now use the below CSS and the attached background. In landscape mode, 2 pages per screen for reading on my computer.

The body css is to move the text slightly off the top of the page so the fonts don't touch the top. Moving much further will start to move text off the bottom of the screen. If you don't use a background image then leave the body out of your css and use the sections in the viewer preferences to set margins, colors, fonts etc.

P {
margin-left: 1.25em !important;
margin-right: 1.15em !important;
}
body {
margin-top: 0.15em !important;
}

If the book I pull up to read has all the paragraphs spaced using div tags vice p tags then I would simply change the code to

div {
margin-left: 1.25em !important;
margin-right: 1.15em !important;
}
body {
margin-top: 0.15em !important;
}

[rockster]

@DoctorOhh Thanks, for the guide! Is there a way to get page flipping effect or this is not possible with css?

[DoctorOhh]

Originally Posted by rockster

@DoctorOhh Thanks, for the guide! Is there a way to get page flipping effect?

No there isn't.

[carmenchu]

Hello! Is there some way to make the viewer show tt, pre and code larger, without increasing the font-size of normal text?
I have tried adding
tt {font-size: 120% important!;}
but... no soap!
The css of the epub already has
tt {font-size: 120%;}
which has worked in sigil, but not in the viewer...
Thanks!

[Fahi]

Hi, I found this image to use as a background. I don't know CSS but I tried to figure out how it works and how to make the text fit into this background searching on the forum and on the internet in vain.
When i try to add body margin on top for example, i lose a part of the text at the bottom. The only thing that worked is margin left and right on paragraphs but i have no idea how to proceed with the top and bottom part.
If someone could help me on this, it would save me