Custom CSS Stylesheets for Calibre's Viewer - Page 7

jimjo23 · 10-14-2011, 08:18 PM

I am new to both Calibre and CSS but managed to follow the directions from this threadhttp://www.mobileread.mobi/forums/sh...ad.php?t=80790.

I tried many times to alter the default text (i.e. CSS body tag) color of an ebook document (specifically and perhaps ironically a "For Dummies" ebook) and tried to apply the CSS stylesheets that users in this thread posted with no success even after converting the book with Calibre's converter to various formats.

I stripped out a few things which in the end I haven't missed. I noticed that calibre assigns its own moniker to the various custom CSS classes in the master stylesheet (i.e. ".Calibre17") and each has its own attributes. What a PITA this process was to figure out for a newbie...

I removed these attributes and their respective settings from all ".CalibreX" instances: "color: xxxx", "background-color: xxxx", and "display: block". For some reason I removed the last one on a whim. I have no clue what it did. Thanks.

DoctorOhh · 10-14-2011, 08:38 PM

Quote:

Originally Posted by jimjo23

I removed these attributes and their respective settings from all ".CalibreX" instances: "color: xxxx", "background-color: xxxx", and "display: block". For some reason I removed the last one on a whim. I have no clue what it did. Thanks.

Removing the color references is fine. I never found a need to remove "display: block" so I'm not sure what it does.

Hopefully someone with expertise will be able to help you out shortly.

theducks · 10-14-2011, 09:31 PM

My (very simple) interpretation is it is a confining container:
Think of a Shipping Carton (case) of Energy bars as the <body>.
Inside the case are display packs (24 bars) <p>
Inside the Display pack (usually what you see on the candy counter) a wrapped bars <span>
The bars are what you consume < the authors words >
Each block confine its contents:
A normal block stacks the contents wit the adjacent block

An Inline block places the block alongside

I also believe a block contains properties (prevents adjacent blocks from inheritance)

I would leave the "block: display;" in place

Oh!
Block also permits different controls depending on recognized device family:
Display
Print
Aural ...

cerramadre · 10-24-2011, 11:57 AM

Hi,

I'm new to Linux so I haven't a clue of where in the main File System folder programs get stored etc.

Does anyone know exactly where I should put my background image to get it to work with the ebook viewer?

My system is using Linux Ubuntu 11.04 - Natty I believe.

Thanks.

theducks · 10-24-2011, 01:13 PM

Quote:

Originally Posted by cerramadre

Hi,

I'm new to Linux so I haven't a clue of where in the main File System folder programs get stored etc.

Does anyone know exactly where I should put my background image to get it to work with the ebook viewer?

My system is using Linux Ubuntu 11.04 - Natty I believe.

Thanks.

User (override) images are put in the <Calibre Configuration directory>/resources/images folder.
To find the folder: Preferences: Miscellaneous: press the button

create the images path if needed

cerramadre · 10-24-2011, 06:37 PM

Quote:

Originally Posted by theducks

User (override) images are put in the <Calibre Configuration directory>/resources/images folder.
To find the folder: Preferences: Miscellaneous: press the button

create the images path if needed

Thanks.

_reader · 10-27-2011, 09:41 PM

Quote:

Originally Posted by carthoris

i use those:

NORMAL:
------------------

body {color:rgb(0,0,0);
background-color:rgb(200,200,200);
text-indent:2em;
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;}

DARKER:
--------------------

body {color:rgb(0,0,0);
background-color:rgb(192,192,192);
text-indent:2em;
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;}

NIGHT:
-------------------

body {color:rgb(184,184,184) ;
background-color:rgb(0,0,0) ;
text-indent:2em;
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;}

2 COLUMNS:
-------------------

body
{
color:rgb(0,0,0) !important;
background-color:rgb(200,200,200);
text-align:justify;
line-spacing:1.8;
margin-top:1px;
margin-bottom:1px;
margin-right:10px;
margin-left:10px;

-webkit-column-count: 2;
-webkit-column-gap: 1em;
-webkit-column-rule: 1px dotted;

height: 650px;
width:1200px

text-indent: 2em;
}
h1, h2, h3, h4, h5, h6
{
color:black;
text-align:center;
font-style:italic;
font-weight:bold;
}

I tried the 2-Columns mode (above) which displays 2-cols, but page-forward doesn't advance (either by the arrow-icons, Page Down/Up, space bar, or mouse wheel). Suggestions?

I'm looking to simulate an open book with two pages to view on my laptop or desktop wide screen.

foosion · 10-29-2011, 11:20 AM

Why does this result in wide margins at the sides of each page (as expected), but the text flush with the top and bottom of Calibre's viewer? I tried larger numbers for margin-top and -bottom, without success.

Code:

body 
{
margin-right:200px !important;
margin-left:200px !important;
margin-top:50px !important;
margin-bottom:50px !important;
}

DoctorOhh · 10-29-2011, 11:32 AM

Quote:

Originally Posted by foosion

Why does this result in wide margins at the sides of each page (as expected), but the text flush with the top and bottom of Calibre's viewer? I tried larger numbers for margin-top and -bottom, without success.

It would appear that the calibre viewer doesn't do top or bottom margins.

foosion · 10-29-2011, 11:38 AM

Quote:

Originally Posted by dwanthny

It would appear that the calibre viewer doesn't do top or bottom margins.

That seems a rather odd omission

Is there any way to fake it in css?

Height:80% didn't work. I believe adding a header and footer would require editing the underlying book.

DoctorOhh · 10-29-2011, 12:22 PM

Quote:

Originally Posted by foosion

That seems a rather odd omission

Is there any way to fake it in css?

I don't believe there is any way to fake this.

The viewer is a ePub viewer, all formats are essentially converted to a form of ePub prior to viewing. Since ePub is a reflowable format the pages change with the font and screen size. So it basicly scrolls the internal html like a browser. Side margins are simple but top and bottom margins, while possible, are quite a bit harder when you are dealing with a format that has unpredictable page lengths.

foosion · 10-29-2011, 12:36 PM

Quote:

Originally Posted by dwanthny

Side margins are simple but top and bottom margins, while possible, are quite a bit harder when you are dealing with a format that has unpredictable page lengths.

Top and bottom margins should be easy to program.

Instead of writing to the screen starting at y coordinate 0 (relative to the containing window), start writing to the screen at y coordinate margin-top (and stop at bottom of window minus margin-bottom). You wouldn't have to make any changes to the flow of the underlying text.

Left and right margins are more complicated, as the text does have to be re-flowed as they change.

theducks · 10-29-2011, 12:50 PM

Doesn't <body> apply to the entire file and not just the viewport (Calibre)?
Add onto this the Calibre-viewer connects (flattens) the entire book beginning to end (CR3 does the same) and would naturally discard any top and bottom Body Margins in the process.

foosion · 10-29-2011, 01:01 PM

Quote:

Originally Posted by theducks

Doesn't <body> apply to the entire file and not just the viewport (Calibre)?
Add onto this the Calibre-viewer connects (flattens) the entire book beginning to end (CR3 does the same) and would naturally discard any top and bottom Body Margins in the process.

It should be possible to start writing text at X pixels from the top of the window in which the viewer writes text, rather than at 0 pixels as it currently does. If this is not technically "margin-top", it is the functional equivalent.

By "viewport" do you mean the window in which Calibre displays the book?

theducks · 10-29-2011, 04:54 PM

Quote:

Originally Posted by foosion

By "viewport" do you mean the window in which Calibre displays the book?

Yes. you only get to see part of the body through the (viewer) portal

10-24-2011, 11:57 AM	#94
cerramadre Member Posts: 12 Karma: 10 Join Date: Aug 2011 Device: none	Using image as background on Ubuntu 11.04 Hi, I'm new to Linux so I haven't a clue of where in the main File System folder programs get stored etc. Does anyone know exactly where I should put my background image to get it to work with the ebook viewer? My system is using Linux Ubuntu 11.04 - Natty I believe. Thanks.

10-29-2011, 11:20 AM	#98
foosion Evangelist Posts: 468 Karma: 41524 Join Date: Sep 2011 Device: Kobo Libra 2 & Clara BW	Why does this result in wide margins at the sides of each page (as expected), but the text flush with the top and bottom of Calibre's viewer? I tried larger numbers for margin-top and -bottom, without success. Code: body { margin-right:200px !important; margin-left:200px !important; margin-top:50px !important; margin-bottom:50px !important; }

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Custom CSS for output	deckoff	Calibre	1	08-29-2010 12:55 AM
ePub with custom .css on a 505	dicknskip	Sony Reader Dev Corner	3	06-10-2010 12:34 AM
User stylesheets for ePub files	salty-horse	Sony Reader Dev Corner	12	02-23-2010 08:44 AM
ePub conversion: override existing css with a custom one	sbin	Calibre	1	01-09-2010 05:03 AM
Calibre's generated css for epub	brewt	Calibre	7	12-29-2008 10:59 AM

10-14-2011, 08:18 PM	#91
jimjo23 Junior Member Posts: 1 Karma: 10 Join Date: Oct 2011 Device: android	I am new to both Calibre and CSS but managed to follow the directions from this threadhttp://www.mobileread.mobi/forums/sh...ad.php?t=80790. I tried many times to alter the default text (i.e. CSS body tag) color of an ebook document (specifically and perhaps ironically a "For Dummies" ebook) and tried to apply the CSS stylesheets that users in this thread posted with no success even after converting the book with Calibre's converter to various formats. I stripped out a few things which in the end I haven't missed. I noticed that calibre assigns its own moniker to the various custom CSS classes in the master stylesheet (i.e. ".Calibre17") and each has its own attributes. What a PITA this process was to figure out for a newbie... I removed these attributes and their respective settings from all ".CalibreX" instances: "color: xxxx", "background-color: xxxx", and "display: block". For some reason I removed the last one on a whim. I have no clue what it did. Thanks.

10-14-2011, 09:31 PM	#93
theducks Well trained by Cats Posts: 30,693 Karma: 58985420 Join Date: Aug 2009 Location: The Central Coast of California Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A	My (very simple) interpretation is it is a confining container: Think of a Shipping Carton (case) of Energy bars as the <body>. Inside the case are display packs (24 bars) <p> Inside the Display pack (usually what you see on the candy counter) a wrapped bars <span> The bars are what you consume < the authors words > Each block confine its contents: A normal block stacks the contents wit the adjacent block An Inline block places the block alongside I also believe a block contains properties (prevents adjacent blocks from inheritance) I would leave the "block: display;" in place Oh! Block also permits different controls depending on recognized device family: Display Print Aural ...

10-29-2011, 12:50 PM	#103
theducks Well trained by Cats Posts: 30,693 Karma: 58985420 Join Date: Aug 2009 Location: The Central Coast of California Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A	Doesn't <body> apply to the entire file and not just the viewport (Calibre)? Add onto this the Calibre-viewer connects (flattens) the entire book beginning to end (CR3 does the same) and would naturally discard any top and bottom Body Margins in the process.

Advert

Advert