Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Software > Calibre > Viewer

Notices

Reply
 
Thread Tools Search this Thread
Old 07-20-2009, 01:24 PM   #1
Ralob
Connoisseur
Ralob began at the beginning.
 
Posts: 53
Karma: 10
Join Date: Feb 2008
Device: iPad Pro, Kobo Libra 2, PW4
Custom CSS Stylesheets for Calibre's Viewer

This thread is for people to post their CSS custom stylesheets for the Calibre eBook Viewer. I know that not everyone is familiar with CSS, so I hope that if anyone needs assistance in making their eBooks display properly, they will find something useful in here.
Ralob is offline   Reply With Quote
Old 07-21-2009, 01:03 AM   #2
Ralob
Connoisseur
Ralob began at the beginning.
 
Posts: 53
Karma: 10
Join Date: Feb 2008
Device: iPad Pro, Kobo Libra 2, PW4
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;}

Last edited by Ralob; 08-05-2009 at 07:50 PM.
Ralob is offline   Reply With Quote
Advert
Old 07-31-2009, 06:29 PM   #3
ekaser
Opinion Artiste
ekaser has a propeller beanie that spins backward.ekaser has a propeller beanie that spins backward.ekaser has a propeller beanie that spins backward.ekaser has a propeller beanie that spins backward.ekaser has a propeller beanie that spins backward.ekaser has a propeller beanie that spins backward.ekaser has a propeller beanie that spins backward.ekaser has a propeller beanie that spins backward.ekaser has a propeller beanie that spins backward.ekaser has a propeller beanie that spins backward.ekaser has a propeller beanie that spins backward.
 
ekaser's Avatar
 
Posts: 301
Karma: 61464
Join Date: Mar 2009
Location: Albany, OR
Device: Nexus 5, Nexus 7, Kindle Touch, Kindle Fire
Thanks for sharing, Ralob! I like pretty much your whole setup, except I like a lighter, slightly off-gray background, and slightly less indent:

background-color:rgb(228,226,224);
text-indent:2em;
ekaser is offline   Reply With Quote
Old 07-31-2009, 10:55 PM   #4
lcbannon
Enthusiast
lcbannon began at the beginning.
 
Posts: 31
Karma: 10
Join Date: Jul 2009
Device: Sony PRS 505
Do I put this in the extra css box for code in the Look and Feel area???
lcbannon is offline   Reply With Quote
Old 07-31-2009, 11:05 PM   #5
ekaser
Opinion Artiste
ekaser has a propeller beanie that spins backward.ekaser has a propeller beanie that spins backward.ekaser has a propeller beanie that spins backward.ekaser has a propeller beanie that spins backward.ekaser has a propeller beanie that spins backward.ekaser has a propeller beanie that spins backward.ekaser has a propeller beanie that spins backward.ekaser has a propeller beanie that spins backward.ekaser has a propeller beanie that spins backward.ekaser has a propeller beanie that spins backward.ekaser has a propeller beanie that spins backward.
 
ekaser's Avatar
 
Posts: 301
Karma: 61464
Join Date: Mar 2009
Location: Albany, OR
Device: Nexus 5, Nexus 7, Kindle Touch, Kindle Fire
Quote:
Originally Posted by lcbannon View Post
Do I put this in the extra css box for code in the Look and Feel area???
In the Ebook Viewer application, click on the Hammer icon (Preferences), then put the code in the "User stylesheet" edit box and click OK. Have an ebook open in the viewer for the full effect, before and after.
ekaser is offline   Reply With Quote
Advert
Old 08-04-2009, 07:51 AM   #6
sideburnt
Connoisseur
sideburnt began at the beginning.
 
Posts: 83
Karma: 46
Join Date: May 2009
Device: Sony prs-505
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.
sideburnt is offline   Reply With Quote
Old 08-05-2009, 11:00 AM   #7
ekaser
Opinion Artiste
ekaser has a propeller beanie that spins backward.ekaser has a propeller beanie that spins backward.ekaser has a propeller beanie that spins backward.ekaser has a propeller beanie that spins backward.ekaser has a propeller beanie that spins backward.ekaser has a propeller beanie that spins backward.ekaser has a propeller beanie that spins backward.ekaser has a propeller beanie that spins backward.ekaser has a propeller beanie that spins backward.ekaser has a propeller beanie that spins backward.ekaser has a propeller beanie that spins backward.
 
ekaser's Avatar
 
Posts: 301
Karma: 61464
Join Date: Mar 2009
Location: Albany, OR
Device: Nexus 5, Nexus 7, Kindle Touch, Kindle Fire
Quote:
Originally Posted by Ralob View Post
My personal CSS style is extremely basic...

body {color rgb(0,0,0);
background-color:rgb(174,174,174);
You have an error in there. I was testing out a completely different color scheme (harking back to the "good old" MS-DOS days), when I used WHITE on BLUE background for my console (worked better then, with fixed pitch, large fonts :-). In your code above, you need to add a ':' after the body 'color' name. Without it, the body (text) color is ignored. It still works for what you want, because the default color is black. But it doesn't work if you try to set it to anything else. Not necessarily pleasing to use, but as another example, here's my "white on blue" style:

body {
color: rgb(255,255,255);
background-color:rgb(0,0,255);
text-align:justify;
line-spacing:1.8;
margin-top:0px;
margin-bottom:4px;
margin-right:50px;
margin-left:50px;
text-indent:2em;
}
h1, h2, h3, h4, h5, h6 {
color:white;
text-align:center;
font-style:italic;
font-weight:bold;
}
ekaser is offline   Reply With Quote
Old 08-05-2009, 07:46 PM   #8
Ralob
Connoisseur
Ralob began at the beginning.
 
Posts: 53
Karma: 10
Join Date: Feb 2008
Device: iPad Pro, Kobo Libra 2, PW4
Oops! Thanks

Fixed.

Last edited by Ralob; 08-05-2009 at 07:51 PM.
Ralob is offline   Reply With Quote
Old 08-06-2009, 04:00 AM   #9
mtravellerh
book creator
mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.mtravellerh ought to be getting tired of karma fortunes by now.
 
mtravellerh's Avatar
 
Posts: 9,635
Karma: 3856660
Join Date: Oct 2008
Location: Luxembourg
Device: PB360°
Quote:
Originally Posted by Ralob View Post
Oops! Thanks

Fixed.
A propos margins: Please be advised that, if you use your CSS in ePubs for the ADEPT engine, the default page numbers will flow in the text body.
mtravellerh is offline   Reply With Quote
Old 08-06-2009, 01:18 PM   #10
Ralob
Connoisseur
Ralob began at the beginning.
 
Posts: 53
Karma: 10
Join Date: Feb 2008
Device: iPad Pro, Kobo Libra 2, PW4
Quote:
Originally Posted by mtravellerh View Post
A propos margins: Please be advised that, if you use your CSS in ePubs for the ADEPT engine, the default page numbers will flow in the text body.
Thanks for the info. I haven't used ePub yet as my reader doesn't support it ATM. But, I will keep this in mind for when I start using them.
Ralob is offline   Reply With Quote
Old 01-13-2010, 04:30 AM   #11
rakulos
Connoisseur
rakulos began at the beginning.
 
Posts: 57
Karma: 36
Join Date: Aug 2009
Device: ipad, K3, acer aspire switch 10
Hi,
Anyone having issues in getting the CSS to apply in the epub viewer? I'm using 0.6.31 and reading a variety of epubs from feedbooks, I've applied the CSS examples in this thread and clicked ok but the display never changes.

Sorry if I'm missing something blatantly obvious
rakulos is offline   Reply With Quote
Old 01-13-2010, 04:59 AM   #12
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Maybe the book you are reading already defines CSS styles that override your definitions? Try adding "!important", for example:

Code:
body { color: red !important; }
Jellby is offline   Reply With Quote
Old 01-13-2010, 02:48 PM   #13
JirkaS
Member
JirkaS began at the beginning.
 
Posts: 18
Karma: 10
Join Date: Nov 2009
Location: Prague, Czech Republic, Europe
Device: iPhone, Sony PRS 505
Another good site for learning CSS and testing your trials is http://www.w3schools.com/Css/default.asp
JirkaS is offline   Reply With Quote
Old 01-13-2010, 06:47 PM   #14
heidismiles
Junior Member
heidismiles began at the beginning.
 
Posts: 2
Karma: 10
Join Date: Jan 2010
Device: iPhone
Hi all, this may be a stupid question but I'm having trouble getting different fonts to show up in one book? Is this even possible?

I have several Stephen King files that I'm trying to convert from HTML. King often writes about writers, and when he does, there are usually several sections of a book in "typewriter" text.

I tried doing it this way:
<p style="font: 9.0px 'Courier New'">CHAPTER 1</p>

The font shows up in Calibre, but not on Stanza on my iPhone.
Any suggestions?
heidismiles is offline   Reply With Quote
Old 01-13-2010, 07:04 PM   #15
kjk
.
kjk ought to be getting tired of karma fortunes by now.kjk ought to be getting tired of karma fortunes by now.kjk ought to be getting tired of karma fortunes by now.kjk ought to be getting tired of karma fortunes by now.kjk ought to be getting tired of karma fortunes by now.kjk ought to be getting tired of karma fortunes by now.kjk ought to be getting tired of karma fortunes by now.kjk ought to be getting tired of karma fortunes by now.kjk ought to be getting tired of karma fortunes by now.kjk ought to be getting tired of karma fortunes by now.kjk ought to be getting tired of karma fortunes by now.
 
Posts: 3,408
Karma: 5647231
Join Date: Oct 2008
Device: never enough
Quote:
Originally Posted by heidismiles View Post
Hi all, this may be a stupid question but I'm having trouble getting different fonts to show up in one book? Is this even possible?

I have several Stephen King files that I'm trying to convert from HTML. King often writes about writers, and when he does, there are usually several sections of a book in "typewriter" text.

I tried doing it this way:
<p style="font: 9.0px 'Courier New'">CHAPTER 1</p>

The font shows up in Calibre, but not on Stanza on my iPhone.
Any suggestions?
That is a Stanza thing-it tends to override fonts with its settings.
I managed to use the <tt> tag to get Stanza to show typewriter style text...but I did that thru direct editing in Sigil-might work with your conversion though!
kjk is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

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


All times are GMT -4. The time now is 03:42 AM.


MobileRead.com is a privately owned, operated and funded community.