07-20-2009, 01:24 PM | #1 |
Connoisseur
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.
|
07-21-2009, 01:03 AM | #2 |
Connoisseur
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. |
Advert | |
|
07-31-2009, 06:29 PM | #3 |
Opinion Artiste
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; |
07-31-2009, 10:55 PM | #4 |
Enthusiast
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???
|
07-31-2009, 11:05 PM | #5 |
Opinion Artiste
Posts: 301
Karma: 61464
Join Date: Mar 2009
Location: Albany, OR
Device: Nexus 5, Nexus 7, Kindle Touch, Kindle Fire
|
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.
|
Advert | |
|
08-04-2009, 07:51 AM | #6 |
Connoisseur
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. |
08-05-2009, 11:00 AM | #7 | |
Opinion Artiste
Posts: 301
Karma: 61464
Join Date: Mar 2009
Location: Albany, OR
Device: Nexus 5, Nexus 7, Kindle Touch, Kindle Fire
|
Quote:
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; } |
|
08-05-2009, 07:46 PM | #8 |
Connoisseur
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. |
08-06-2009, 04:00 AM | #9 |
book creator
Posts: 9,656
Karma: 3856660
Join Date: Oct 2008
Location: Luxembourg
Device: Kindle Scribe
|
|
08-06-2009, 01:18 PM | #10 |
Connoisseur
Posts: 53
Karma: 10
Join Date: Feb 2008
Device: iPad Pro, Kobo Libra 2, PW4
|
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.
|
01-13-2010, 04:30 AM | #11 |
Connoisseur
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 |
01-13-2010, 04:59 AM | #12 |
frumious Bandersnatch
Posts: 7,534
Karma: 19000001
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; } |
01-13-2010, 02:48 PM | #13 |
Member
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
|
01-13-2010, 06:47 PM | #14 |
Junior Member
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? |
01-13-2010, 07:04 PM | #15 | |
.
Posts: 3,408
Karma: 5647231
Join Date: Oct 2008
Device: never enough
|
Quote:
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! |
|
Thread Tools | Search this Thread |
|
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 |