MobileRead Forums

MobileRead Forums (https://www.mobileread.com/forums/index.php)
-   Sigil (https://www.mobileread.com/forums/forumdisplay.php?f=203)
-   -   Sigil 0.6.0 & CSS problem? (https://www.mobileread.com/forums/showthread.php?t=197339)

michaelbr 11-21-2012 05:35 AM

Sigil 0.6.0 & CSS problem?
 
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 05: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 09:38 PM

Quote:

Originally Posted by meme (Post 2313151)
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.


All times are GMT -4. The time now is 09:22 PM.

Powered by: vBulletin
Copyright ©2000 - 3.8.5, Jelsoft Enterprises Ltd.
MobileRead.com is a privately owned, operated and funded community.