Custom CSS Stylesheets for Calibre's Viewer

[theducks]

Originally Posted by butterbescotch

How do I find this "Click on the User Stylesheet tab"?

I can't see it in the preference option.

What OS and Calibre version (just in case this matters) ?

The preference option is IN the viewer, not the regular Calibre preference.
The tab is the 3rd(last) one at the top

[butterbescotch]

Originally Posted by theducks

What OS and Calibre version (just in case this matters) ?

The preference option is IN the viewer, not the regular Calibre preference.
The tab is the 3rd(last) one at the top

Thanks for the reply!. Yay! No more Times New Roman.

[Stitchdog]

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

I am an old fart that reads as much as he can but the readers background is usually to bright. But thanks to this i can see what i am reading just fine. My wife took my Pandigital and i am left to read on my computer untill i find a replacement. Thanks again very much. To old and to dumb to write a program. like this.

[jamezb3]

I use this one, I find it easy one the eyes.

body {
color: rgb(189,226,252);
background-color:rgb(80,80,80);
text-align:justify;
line-spacing:1.8;
margin-top:10px;
margin-bottom:4px;
margin-right:20px;
margin-left:20px;
text-indent:2em;
}
h1, h2, h3, h4, h5, h6 {
color:black;
text-align:center;
font-style:italic;
font-weight:bold;}

[Sabardeyn]

Calibre's viewer is quite capable, but as many have pointed out, staring at a computer monitor for any length of time begins to strain the eyes.

I've modified the css from Ekaser's post, to create a dark charcoal gray background with barely gray text. Resulting in distinct, but not too extreme, contrast to avoid a "glare" effect.

The margins are very wide (350px) to create a column of justified text within the center of the screen (intended for 20"+ monitors, otherwise margins will need editing downward). Note that the viewer is used full window. (Not full screen - which removes the option to see the taskbar & system tray.)

I've manually increased font size in the viewer, not in the CSS. That is the only un-accounted for change in the viewer snapshot. (I imagine font size can be set via CSS, but sometimes I vary the size.)

body {
color: rgb(235,235,235);
background-color:rgb(20,20,20);
text-align:justify;
line-spacing:1.8;
margin-top:0px;
margin-bottom:4px;
margin-right:350px !important;
margin-left:350px !important;
text-indent:2em;
}
h1, h2, h3, h4, h5, h6 {
color: rgb(235,235,235);
text-align:center;
font-style:italic;
font-weight:bold;
}

This results in a a fairly dark, monochrome color palette which prevents desktop elements from distracting you while reading - while leaving them available if you quickly need to access them.

If you would like darker text, change the topmost "color: rgb(235,235,235);" line to a lower number. Keeping all three sets of numbers the same will result in a true gray.

[wildchild1954]

Is there any way to see what these CSS style sheets look like? I have absolutely no idea what they are or how to put them in Calibre even. I do know that I'm trying to convert .rtf files into ePUb files and I want chapter spacing so each one starts on a new page and I want the paragraphs indented and not spaced one line apart.

I have a Pandigital Novel 7" White and all of my files are in PDF format - which worked great in the reader provided with the 2010 FW that came originally on my unit. When I updated to the 03/02 FW none of the PDF files will display correctly in the reader and I have to use the OfficeSuite app to display them correctly and that loses all of the things you need in a reader - remembering last page read, table of content, tap to turn page, etc. . . .

Can anyone help me with this?

[DoctorOhh]

Originally Posted by wildchild1954

I have a Pandigital Novel 7" White and all of my files are in PDF format - which worked great in the reader provided with the 2010 FW that came originally on my unit. When I updated to the 03/02 FW none of the PDF files will display correctly in the reader and I have to use the OfficeSuite app to display them correctly and that loses all of the things you need in a reader - remembering last page read, table of content, tap to turn page, etc. . .

This thread is discussing CSS style sheets for calibre's internal viewer not for a device. You might want to seek out a forum dedicated to the Pandigital Novel reader.

Good Luck.

[wildchild1954]

I wasn't asking about the device. I was simply explaining why I was trying to use Calibre to convert PDF files to ePub. I thought if my converted files displayed in Calilbre's viewer correctly they would on the Pandigital. But I don't need Calibre I found a better program.

[shadesofevil]

This is what I use. I find that white on black is too much contrast, so I opt instead for a grey on grey(dark). Font used is Cambria.

http://imageshack.us/photo/my-images...829at011.png/#

body {
background: rgb(230,230,230);
background-size:100% 100%;

margin-left:1.2em !important;
margin-right:1.2em !important;
margin-top:1.4em;
margin-bottom:1.4em;

color:rgb(60,60,60);
}

::selection {
background: rgb(190,190,190);
}

p{
text-indet:3em;
padding-top:5px;
}

/*this won't work but its here hoping it may at some point*/
A:link{
text-decoration:none;
color:beige;
}

[teknix]

I prefer a tan (a wheat color, really) background with grey text. Here is the code:

body {
background-color: #EFEBD6;
padding: 20px 30px 20px 30px;
color: #555555;
}

It looks like this:

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

[josephinediane]

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

im having promblems separating pages in view of clibre

[nolookpass432]

body {
color: rgb(0,0,0);
background-color:rgb(51,102,153);
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:black;
text-align:center;
font-style:italic;
font-weight:bold;
}

Simple, good contrast, and easy to look at for a while.

[philetus]

CSS newbee here. I installed Calibre 30 min. ago to convert epub to pdf, but I kind of like epub in Calibre viewer.

Would you post the CSS code you use to make your viewer look the way it does?
I tried narrowing it with the tool in "configure" and tried http://www.w3schools.com/Css/default.asp
but nothing changed.
Seeing the correct code would go a long way in helping me understand how to do it.

Thanks

[Winnfred]

Please excuse my clumsiness. I am not familiar with this process but I am interested in this subject and I'm giving it a try. My computing skills are sad I love to read and I think the Calibre program is a wonderful piece of programming. It needs to be a little more user friendly and with some modifications it could become the OS for every reader on the market. Imagine a reader that could instantly read every format and be intuitively structured to each users preferences. It is not far off now. Just add some needed features in flexibility and make it the prime OS in a stand alone reader.
Now just to prove how lame I am, I started playing with the css style sheet. It seems that everytime I make a change it causes the content to loose sync when turning pages. Specifically every new page repeats about 5 lines from the previous page. How do I avoid that. DON'T YELL AT ME FOR BEING LAME. Be kind and your karma will grow in a good way. Many thanks. And if you do not answer and shine a light on my little question and you do yell at me, May a camel barf in your panty hose. Winnfred