Sigil 0.6.0 & CSS problem?

michaelbr · 11-21-2012, 04:35 AM

I just installed Sigil 0.6.0 and tried to use a custom CSS to create a epub book, to my surprise the CSS files seems has no effect on the doc. This is what I did:
1) moused over Style, then clicked Add Blank Stylesheet, then added the following code

Code:

/* Style Sheet for ePub Books */
/* Set margins at 2% (This gives a white border around the book) */

body {margin-left:2%;
    margin-right:2%;
    margin-top:2%;
    margin-bottom:2%;}

/* Text indent will make a paragraph indent, like putting a tab at the beginning of each new paragraph
The margin settings get rid of the white space between paragraphs, again so it looks more like a book
The text-align line justifies the margins. If you don't want them justified, change it to left, or remove
 that line. You don't have to specify a font, but you can */

p {text-indent: .3em;
    margin-left:0;
    margin-right:0;
    margin-top:0;
    margin-bottom:0;
    text-align: left;
    font-family:"Arial";}

/* Here we make our headings centered
We've also made the headings the same font as the body text */

h1 { text-align: center;
    font-family:"Arial";
	font-size: 1.3em;}
h2 { text-align: center;
    font-family:"Arial";
	font-size: 1.2em;}
h3 { text-align: center;
    font-family:"Arial";
	font-size: 1.1em;}

2) entered text in Book View
3) added

Code:

<link rel="stylesheet" type="text/css" href="../Style/Style0001.css" />

to the <head> section as seen here (the file name is Style0001.css under Styles folder):

Code:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <link href="../Style/Style0001.css" rel="stylesheet" type="text/css" />
</head>

What am I missing? My <h1> does not change, and when I went to Preview View, the h1 showed 2em instead of 1.3em defined in my CSS.

meme · 11-21-2012, 04:45 AM

href="../Style/Style0001.css" should be href="../Styles/Style0001.css"

You can right click on an HTML file and select Link Stylesheets to have the link done for you.

And if it still doesn't work, use Tools -> Validate Stylesheets with W3C to check for errors in your CSS.

michaelbr · 11-21-2012, 08:38 PM

Quote:

Originally Posted by meme

href="../Style/Style0001.css" should be href="../Styles/Style0001.css"

You can right click on an HTML file and select Link Stylesheets to have the link done for you.

And if it still doesn't work, use Tools -> Validate Stylesheets with W3C to check for errors in your CSS.

Thanks meme for your prompt reply, I couldn't believe I missed that typo, I've checked several times for typos, I don't know how I could miss it. I guess one could never be too careful.

ps: I've done already the validation with W3C and it came back with no errors, thanks for the tips for validation and checking.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
html & css to fight the Nook centering problem	Dia435	ePub	2	10-28-2012 07:21 PM
Sigil UI and the CSS	Artha	Sigil	2	11-22-2011 02:22 PM
Sigil 0.3.4 / Problème CSS entre Sigil et iPad	Grivels	Software	10	07-03-2011 09:06 AM
Sigil styles and CSS	View[+]Finder	Sigil	4	05-27-2010 05:39 PM
Sigil and CSS files	crutledge	Sigil	6	05-20-2010 09:02 AM

11-21-2012, 04:45 AM	#2
meme Sigil developer Posts: 1,274 Karma: 1101600 Join Date: Jan 2011 Location: UK Device: Kindle PW, K4 NT, K3, Kobo Touch	href="../Style/Style0001.css" should be href="../Styles/Style0001.css" You can right click on an HTML file and select Link Stylesheets to have the link done for you. And if it still doesn't work, use Tools -> Validate Stylesheets with W3C to check for errors in your CSS.

Advert