External CSS file questions

michaelbr · 01-15-2011, 01:57 AM

Greetings:
I'm new to Sigil, so if there's additional info required/missing, please let me know. I'm trying to use external CSS file, I've created a very simple external CSS called michael.css and saved it in the same folder as HTML file, this is what I did:

1: Load the HTML file into an external editor.
2: Place the following code into the HTML file (between <head> tag):

Code:

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

3: Load the HTML file to Sigil.
4: Open the Styles Section and the michael.css has been loaded.

The problem is when I tried to save the HTML file into ePub, Sigil inserted the following code into ePub file,

Code:

<style type="text/css">
p.sgc-6 {font-style: italic; font-weight: bold}
  b.sgc-5 {font-style: italic}
  p.sgc-4 {font-style: italic}
  span.sgc-3 {font-size: 16pt;}
  p.sgc-2 {font-weight: bold}
  span.sgc-1 {font-size: 24pt;}
</style>

even though I've had an external CSS file. Is this correct? How can I tell Sigil not to insert the CSS code and use the external CSS files instead? I even inserted this code into my CSS, but still Sigil inserted the style again!!!

Code:

p.sgc-6 {font-style: italic; font-weight: bold}
  b.sgc-5 {font-style: italic}
  p.sgc-4 {font-style: italic}
  span.sgc-3 {font-size: 1.5em;}
  p.sgc-2 {font-weight: bold}
  span.sgc-1 {font-size: 2em;}

I'm using Sigil 0.3.2 for Win, and OS is Win XP

Thanks for your comment/suggestions
Michael

theducks · 01-15-2011, 11:06 AM

Quote:

Originally Posted by michaelbr

2: Place the following code into the HTML file (between <head> tag):

Code:

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

4: Open the Styles Section and the michael.css has been loaded.

I'm using Sigil 0.3.2 for Win, and OS is Win XP

Thanks for your comment/suggestions
Michael

Number 2 statement does not agree with number 4

Code:

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

is the correct path for statement 4 to be valid (Case sensitive: note the S )

DMSmillie · 01-15-2011, 12:31 PM

@ theducks : #2 is what is in the original HTML file, before loading it into Sigil, and is correct if the original CSS file is in the same directory as the original HTML file. I would imagine that after loading it into Sigil, Sigil will have changed the CSS path to "../Styles/michael.css", to correspond with the new directory structure set up by Sigil.

@ michaelbr : I believe Sigil is creating those styles to replace formatting that has been applied within the HTML code rather than through the use of CSS (e.g. occasional use of <i> and <b> tags). The only way to stop this happening, as far as I know, is to ensure that all formatting is already handled via the CSS styles. However the styles created by Sigil are not replacing the existing styles in your CSS file, and don't prevent those from being used - they are simply in addition to those styles.

Valloric · 01-15-2011, 12:51 PM

Quote:

Originally Posted by DMSmillie

@ michaelbr : I believe Sigil is creating those styles to replace formatting that has been applied within the HTML code rather than through the use of CSS (e.g. occasional use of <i> and <b> tags). The only way to stop this happening, as far as I know, is to ensure that all formatting is already handled via the CSS styles.

...or just turn off Tidy in the toolbar.

DMSmillie · 01-15-2011, 04:41 PM

Quote:

Originally Posted by Valloric

...or just turn off Tidy in the toolbar.

Aha! Thanks Valloric. I learn something new every day.

michaelbr · 01-16-2011, 11:49 PM

Thanks for all your replies, we learn little bit everyday.

Jabby · 01-17-2011, 10:53 PM

Quote:

Originally Posted by Valloric

...or just turn off Tidy in the toolbar.

How do you know if its on or off? I click it, and click it and I still have the same icon.

Regards - John

theducks · 01-17-2011, 11:43 PM

Quote:

Originally Posted by Jabby

How do you know if its on or off? I click it, and click it and I still have the same icon.

Regards - John

In windows, the icon edges change shading and IIRC the balloon help changes wording.

Jabby · 01-18-2011, 08:42 AM

Quote:

Originally Posted by theducks

In windows, the icon edges change shading and IIRC the balloon help changes wording.

Hi Ducks-

I guess these old eyes tend to entropy like the rest of me. I see it now. But I don't know which is which. When Sigil is opened, is it on or off? If it is on when opened, I'll have to change my ways. I navigate to the file, right click and "open with" as opposed to opening the file within Sigil. I find it much easier to navigate with windows explorer.

Regards - John

theducks · 01-18-2011, 10:27 AM

Quote:

Originally Posted by Jabby

Hi Ducks-

I guess these old eyes tend to entropy like the rest of me. I see it now. But I don't know which is which. When Sigil is opened, is it on or off? If it is on when opened, I'll have to change my ways. I navigate to the file, right click and "open with" as opposed to opening the file within Sigil. I find it much easier to navigate with windows explorer.

Regards - John

I believe it stays the way you last left it (normal exit of Sigil),
In is on (edges darker)

Ahmad Samir · 01-27-2011, 08:08 AM

The status is preserved since the last Sigil session.

You can also look in the Tools menu, the enabled/disabled status is indicated by a tick mark next to "Cleaning with HTML Tidy".

01-15-2011, 01:57 AM	#1
michaelbr Connoisseur Posts: 77 Karma: 10 Join Date: Aug 2010 Location: Murcia/Spain Device: Android 12	External CSS file questions Greetings: I'm new to Sigil, so if there's additional info required/missing, please let me know. I'm trying to use external CSS file, I've created a very simple external CSS called michael.css and saved it in the same folder as HTML file, this is what I did: 1: Load the HTML file into an external editor. 2: Place the following code into the HTML file (between <head> tag): Code: <link rel="stylesheet" type="text/css" href="michael.css" /> 3: Load the HTML file to Sigil. 4: Open the Styles Section and the michael.css has been loaded. The problem is when I tried to save the HTML file into ePub, Sigil inserted the following code into ePub file, Code: <style type="text/css"> p.sgc-6 {font-style: italic; font-weight: bold} b.sgc-5 {font-style: italic} p.sgc-4 {font-style: italic} span.sgc-3 {font-size: 16pt;} p.sgc-2 {font-weight: bold} span.sgc-1 {font-size: 24pt;} </style> even though I've had an external CSS file. Is this correct? How can I tell Sigil not to insert the CSS code and use the external CSS files instead? I even inserted this code into my CSS, but still Sigil inserted the style again!!! Code: p.sgc-6 {font-style: italic; font-weight: bold} b.sgc-5 {font-style: italic} p.sgc-4 {font-style: italic} span.sgc-3 {font-size: 1.5em;} p.sgc-2 {font-weight: bold} span.sgc-1 {font-size: 2em;} I'm using Sigil 0.3.2 for Win, and OS is Win XP Thanks for your comment/suggestions Michael

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Opus Fonts directory for Calibre -> External CSS	fiery	Bookeen	12	02-20-2011 10:05 PM
a few extra css questions	marbs	Recipes	12	11-20-2010 10:15 AM
CSS Questions	JTAL604622	Calibre	0	11-18-2010 06:33 PM
EPUBReader doesn't find the CSS file?	paulpeer	EPUBReader	8	03-23-2010 02:45 PM
Questions about external memory	siulayhumga	Sony Reader	4	06-17-2009 12:44 PM

01-15-2011, 12:31 PM	#3
DMSmillie Enquiring Mind Posts: 562 Karma: 42350 Join Date: Aug 2010 Location: London, UK Device: Kindle 3 (WiFi)	@ theducks : #2 is what is in the original HTML file, before loading it into Sigil, and is correct if the original CSS file is in the same directory as the original HTML file. I would imagine that after loading it into Sigil, Sigil will have changed the CSS path to "../Styles/michael.css", to correspond with the new directory structure set up by Sigil. @ michaelbr : I believe Sigil is creating those styles to replace formatting that has been applied within the HTML code rather than through the use of CSS (e.g. occasional use of <i> and <b> tags). The only way to stop this happening, as far as I know, is to ensure that all formatting is already handled via the CSS styles. However the styles created by Sigil are not replacing the existing styles in your CSS file, and don't prevent those from being used - they are simply in addition to those styles.

01-16-2011, 11:49 PM	#6
michaelbr Connoisseur Posts: 77 Karma: 10 Join Date: Aug 2010 Location: Murcia/Spain Device: Android 12	Thanks for all your replies, we learn little bit everyday.

01-27-2011, 08:08 AM	#11
Ahmad Samir Zealot Posts: 114 Karma: 5246 Join Date: Jul 2010 Device: none	The status is preserved since the last Sigil session. You can also look in the Tools menu, the enabled/disabled status is indicated by a tick mark next to "Cleaning with HTML Tidy".

Advert

Advert