Sigil and CSS files

crutledge · 05-18-2010, 07:21 PM

When a raw PG file is loaded into Sigil the CSS file comes with it. Sigil apparently converts some to sgc-#. Initially is no file in the Styles Section.

The Sigil <head> contains the following:

Code:

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

If I wish to change some definitions, I can load an external style sheet by going to the Styles Section and loading a CSS file via Add new item.

Now my queations:

How do I make the external CSS file come into effect?

How are conflicts between definitions in the PG Style Sheet and the external Style Sheet to be resolved? e.g. body, p, and h2 definition.

Perhaps someone knowledgable could post a short tutorial until the final manual comes out.

Catire · 05-19-2010, 11:12 AM

Quote:

Originally Posted by crutledge

When a raw PG file is loaded into Sigil the CSS file comes with it. Sigil apparently converts some to sgc-#. Initially is no file in the Styles Section.

The Sigil <head> contains the following:

Code:

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

If I wish to change some definitions, I can load an external style sheet by going to the Styles Section and loading a CSS file via Add new item.

Now my queations:

How do I make the external CSS file come into effect?

How are conflicts between definitions in the PG Style Sheet and the external Style Sheet to be resolved? e.g. body, p, and h2 definition.

Perhaps someone knowledgable could post a short tutorial until the final manual comes out.

1- You should write the name of your css file in the stylesheet link

for example:

Code:

 <link rel="stylesheet" type="text/css" href="../Styles/thenameofyourcssfile.css" />

2 - I honestly don´t know but you should never have any conflicting css, if there are duplicate definitions for body p, h2 or whatever you should erase the one you don´t want. If you want different looks for different instances of the same element that´s what classes are for.

crutledge · 05-19-2010, 06:23 PM

Here is what I have tried:

1: Load PG html file into Sigil.

2: As soon as the file is loaded, Open Styles and add the following css file

Code:

/* make all hyperlinks black */
a {
color: #000000;
}

/* leave room for page numbers etc in ade */
body{
	margin-left: 15px; margin-right: 15px;
}

/* just a little spacing between paragraphs with nice indent */
p {
	margin: 0; padding-bottom: 5px; text-indent: 1.5px;
}

/* make it look more book-like */
h1, h2, h3, h4, h5, h6 {
	 margin: 0; padding-bottom: 5px; text-align: center;
 }

/* remove paragraph indent */
.noindent{
	margin: 0; padding-bottom: 5px; text-indent: 0;
}

3. Go to codeview top and add the following line in <meta>

Code:

  <link rel="stylesheet" type="text/css" href="../Styles/"main.css" />

sgf-# have been created.

4. Remove style sheet entries from Sigil.

5. Go back to textview. NO EFFECT

6: Go back to codeview
All sgf-# have disappeared from the code.
The style sheet entry reverts to

Code:

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

There is no effect on the presentation in textview and I can see nothing wrong in the style sheet.

Valloric · 05-19-2010, 06:43 PM

Quote:

Originally Posted by crutledge

3. Go to codeview top and add the following line in <meta>

Code:

  <link rel="stylesheet" type="text/css" href="../Styles/"main.css" />

There's an extra quote character in the filepath.

crutledge · 05-19-2010, 11:21 PM

1: Load the HTML file into an external editor.
2: Extract the style sheet from the HTML and save as main.css in the same folder as the HTML file.
3: Place the following code into the HTML file:

Code:

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

4: Test in IE
5: Modify main.css as desired and re-test.
6: Load the HTML file to Sigil.
7: Open codeview and go to the top and find the following code;

Code:

  <link rel="stylesheet" type="text/css" href=../Styles/"main.css" />

8: Open the Styles Section and find main.css has been loaded.

From this point on, everything is tea and cookies,

This may violate the spirit of Sigil but until someone comes up with a better procedure, I'm happy. This solves my problem with PG files. BTW, ADE has no problems with it.

Valloric · 05-20-2010, 06:08 AM

crutledge, the path to the CSS file is still wrong. You're current procedure relies on Tidy to fix it for you.

First you had this:

Code:

href="../Styles/"main.css"

then this:

Code:

href=../Styles/"main.css"

but the correct way is like this:

Code:

href="../Styles/main.css"

Notice all the quotes and their positions.

crutledge · 05-20-2010, 09:02 AM

My error in the posting. Sigil has it correct.
Many thanks

05-18-2010, 07:21 PM	#1
crutledge eBook FANatic Posts: 18,301 Karma: 16071131 Join Date: Apr 2008 Location: Alabama, USA Device: HP ipac RX5915 Wife's Kindle	Sigil and CSS files When a raw PG file is loaded into Sigil the CSS file comes with it. Sigil apparently converts some to sgc-#. Initially is no file in the Styles Section. The Sigil <head> contains the following: Code: <link rel="stylesheet" type="text/css" href="../Styles/" /> If I wish to change some definitions, I can load an external style sheet by going to the Styles Section and loading a CSS file via Add new item. Now my queations: How do I make the external CSS file come into effect? How are conflicts between definitions in the PG Style Sheet and the external Style Sheet to be resolved? e.g. body, p, and h2 definition. Perhaps someone knowledgable could post a short tutorial until the final manual comes out.

05-19-2010, 06:23 PM	#3
crutledge eBook FANatic Posts: 18,301 Karma: 16071131 Join Date: Apr 2008 Location: Alabama, USA Device: HP ipac RX5915 Wife's Kindle	Here is what I have tried: 1: Load PG html file into Sigil. 2: As soon as the file is loaded, Open Styles and add the following css file Code: /* make all hyperlinks black / a { color: #000000; } / leave room for page numbers etc in ade / body{ margin-left: 15px; margin-right: 15px; } / just a little spacing between paragraphs with nice indent / p { margin: 0; padding-bottom: 5px; text-indent: 1.5px; } / make it look more book-like / h1, h2, h3, h4, h5, h6 { margin: 0; padding-bottom: 5px; text-align: center; } / remove paragraph indent / .noindent{ margin: 0; padding-bottom: 5px; text-indent: 0; } 3. Go to codeview top and add the following line in <meta> Code: <link rel="stylesheet" type="text/css" href="../Styles/"main.css" /> sgf-# have been created. 4. Remove style sheet entries from Sigil. 5. Go back to textview. NO EFFECT* 6: Go back to codeview All sgf-# have disappeared from the code. The style sheet entry reverts to Code: <link rel="stylesheet" type="text/css" href="../Styles/" /> There is no effect on the presentation in textview and I can see nothing wrong in the style sheet.

05-19-2010, 11:21 PM	#5
crutledge eBook FANatic Posts: 18,301 Karma: 16071131 Join Date: Apr 2008 Location: Alabama, USA Device: HP ipac RX5915 Wife's Kindle	This procedure works!!! 1: Load the HTML file into an external editor. 2: Extract the style sheet from the HTML and save as main.css in the same folder as the HTML file. 3: Place the following code into the HTML file: Code: <link rel="stylesheet" type="text/css" href="main.css" /> 4: Test in IE 5: Modify main.css as desired and re-test. 6: Load the HTML file to Sigil. 7: Open codeview and go to the top and find the following code; Code: <link rel="stylesheet" type="text/css" href=../Styles/"main.css" /> 8: Open the Styles Section and find main.css has been loaded. From this point on, everything is tea and cookies, This may violate the spirit of Sigil but until someone comes up with a better procedure, I'm happy. This solves my problem with PG files. BTW, ADE has no problems with it.

05-20-2010, 06:08 AM	#6
Valloric Created Sigil, FlightCrew Posts: 1,982 Karma: 350515 Join Date: Feb 2008 Device: Kobo Clara HD	crutledge, the path to the CSS file is still wrong. You're current procedure relies on Tidy to fix it for you. First you had this: Code: href="../Styles/"main.css" then this: Code: href=../Styles/"main.css" but the correct way is like this: Code: href="../Styles/main.css" Notice all the quotes and their positions.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Creating omnibus files with Sigil	crutledge	Sigil	6	09-23-2010 06:52 PM
Multiple CSS Files	jjm6383	Sigil	2	06-28-2010 05:44 PM
Cover problems with Sigil files (again)	crutledge	Calibre	3	06-16-2010 12:06 PM
Sigil styles and CSS	View[+]Finder	Sigil	4	05-27-2010 05:39 PM
Help! Newbie having problems converting HTML/CSS files	jackie_w	Calibre	6	09-14-2009 04:53 PM

05-20-2010, 09:02 AM	#7
crutledge eBook FANatic Posts: 18,301 Karma: 16071131 Join Date: Apr 2008 Location: Alabama, USA Device: HP ipac RX5915 Wife's Kindle	My error in the posting. Sigil has it correct. Many thanks

Advert

Advert