CSS Question

jackibar · 02-28-2012, 12:10 AM

I'm brand new to trying to use Sigil and it looks like it will be a wonderful tool for creating my Kindle books! I'd previously been creating the html manually and using MobiPocket Creator on my PC laptop to get it into Kindle format. But I'd much prefer being able to use my Mac from start to finish.

Question - I can't seem to figure out how to make the book I'm working on USE the css file. I have added a style.css file to the CSS area, but what do I need to do to get the book to "recognize" this file and incorporate it? In the Book view, it doesn't seem to be applying the styles.

Thanks so much for any help!

DiapDealer · 02-28-2012, 12:21 AM

In the head section of each html file that you want to use the css file:

Code:

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

Of course, make sure that the filename is the same as whatever your style sheet is named.

Toxaris · 02-28-2012, 03:23 AM

I can imagine that it is confusing that you actually have to reference to the file to use it. I always though it would be handy to have an option to do it automatically.

huebi · 02-28-2012, 06:39 AM

What if you have more then one CSS, should they all be automatically in? And what happened if they are declaring different rules for the same element? First come, first serve? Cascading (in which order)?

Toxaris · 02-28-2012, 08:33 AM

And that is probably the reason why the option is not there, I know. However, I still think it would be handy.

jackibar · 02-28-2012, 09:54 AM

Thanks for the help - I do wish there was a way to click on the file name in the left column (books browser) and say to "link" this file to your book section! Anyway, I'm trying to get the code right but it still isn't working. It's probably my "path" - I always get confused where to use the ../ and when not to. I have my Sigil book file saved in a folder called "Sigil Files" and my css file is style.css. I've tried this code:

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

And I've tried removing the "../" at the front but neither are working! What do I need to change?

DiapDealer · 02-28-2012, 10:05 AM

If you've added the style sheet to the ePub using Sigil, then it HAS to be in the "Styles" folder. That's where Sigil puts any file you add that has the .css extension. So make sure it's in the "Styles" folder (when in Sigil)... and if it's named "style.css", then the link code will be:

Code:

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

The folder you have the ePub saved in on your hard-drive isn't relevant. Only the paths within the ePub are relevant.

dwig · 02-28-2012, 10:07 AM

Quote:

Originally Posted by jackibar

...I've tried this code:

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

And I've tried removing the "../" at the front but neither are working! What do I need to change?

Re-read post #2!

When you changed the file name you also removed the "folder" name (the "Styles" section heading in the tree view column is, in effect, a folder). Your link text should be:

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

Note that this path is case sensitive. Also, this link entry needs to appear in each and every (x)HTML file that you want the stylesheet to affect.

theducks · 02-28-2012, 10:12 AM

Quote:

Originally Posted by Toxaris

I can imagine that it is confusing that you actually have to reference to the file to use it. I always though it would be handy to have an option to do it automatically.

It is easier to delete extra lines than type them in correctly

BTW multiple linked stylesheets are legal

But why not have a right-clik option on a Styles: 'Insert into current HTML page'

jackibar · 02-28-2012, 10:17 AM

Thanks so much - Okay, Sigil didn't create a Styles folder when I saved the file, and I didn't realize I needed to do so manually! Thanks for explaining that the left window is the folder "heirarchy" - that will be helpful!

DiapDealer · 02-28-2012, 10:45 AM

I fear you're still a bit confused. The Styles folder exists within the ePub. There's no need to manually create one (in fact you can't create a folder in Sigil's hierachy, that I know of). And again... folders outside of the ePub are irrelevant (after the initial (x)html import).

theducks · 02-28-2012, 10:52 AM

Quote:

Originally Posted by jackibar

Thanks so much - Okay, Sigil didn't create a Styles folder when I saved the file, and I didn't realize I needed to do so manually! Thanks for explaining that the left window is the folder "heirarchy" - that will be helpful!

Sigil will re-arrange files into folders (un-flatten some) upon first import, and will create or Add existing into the appropriate folder

Folders: Text, Styles, Images, Fonts, Misc

No other Nesting permitted

dwig · 02-28-2012, 11:44 AM

Quote:

Originally Posted by theducks

...
But why not have a right-clik option on a Styles: 'Insert into current HTML page'

That would be good, but it would be better to have two items:

Insert into current HTML page
Insert into all HTML pages

Like S&R, have a choice between a single targeted HTML and a global action.

Also have the insertion be intelligent. Have the insertion placed after all other <link...> entries. That way you can insert multiple stylesheets in a particular order by first inserting one and then the other.

huebi · 02-28-2012, 02:45 PM

Quote:

Originally Posted by theducks

But why not have a right-clik option on a Styles: 'Insert into current HTML page'

Much better would be DWIT button

Do what i think

jackibar · 02-28-2012, 02:58 PM

Ok - I guess since I didn't see a "Styles" folder in the Finder, I figured Sigil didn't create one so I made one myself... I think I'm understanding now that Sigil does create these folders, but they are contained in the ePub file and not actual "folders" you can see when looking in the Finder... - ?

02-28-2012, 12:10 AM	#1
jackibar Enthusiast Posts: 38 Karma: 12 Join Date: May 2010 Device: iPhone apps	CSS Question I'm brand new to trying to use Sigil and it looks like it will be a wonderful tool for creating my Kindle books! I'd previously been creating the html manually and using MobiPocket Creator on my PC laptop to get it into Kindle format. But I'd much prefer being able to use my Mac from start to finish. Question - I can't seem to figure out how to make the book I'm working on USE the css file. I have added a style.css file to the CSS area, but what do I need to do to get the book to "recognize" this file and incorporate it? In the Book view, it doesn't seem to be applying the styles. Thanks so much for any help!

02-28-2012, 10:05 AM	#7
DiapDealer Grand Sorcerer Posts: 28,045 Karma: 199464182 Join Date: Jan 2010 Device: Nexus 7, Kindle Fire HD	If you've added the style sheet to the ePub using Sigil, then it HAS to be in the "Styles" folder. That's where Sigil puts any file you add that has the .css extension. So make sure it's in the "Styles" folder (when in Sigil)... and if it's named "style.css", then the link code will be: Code: <link href="../Styles/style.css" rel="stylesheet" type="text/css" /> The folder you have the ePub saved in on your hard-drive isn't relevant. Only the paths within the ePub are relevant. Last edited by DiapDealer; 02-28-2012 at 10:08 AM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
CSS question	crutledge	Workshop	17	12-17-2011 08:52 AM
Simple Question for the CSS experts out there...	Japes	Calibre	2	06-24-2011 12:12 AM
CSS Question	AppleTard	Calibre	1	06-12-2011 01:07 AM
Question for the CSS experts	crutledge	Sigil	8	06-10-2011 05:13 PM
A question about CSS: widows and orphans	Jellby	ePub	5	08-31-2009 04:54 PM

02-28-2012, 12:21 AM	#2
DiapDealer Grand Sorcerer Posts: 28,045 Karma: 199464182 Join Date: Jan 2010 Device: Nexus 7, Kindle Fire HD	In the head section of each html file that you want to use the css file: Code: <link href="../Styles/stylesheet.css" rel="stylesheet" type="text/css" /> Of course, make sure that the filename is the same as whatever your style sheet is named. Last edited by DiapDealer; 02-28-2012 at 10:00 AM.

02-28-2012, 03:23 AM	#3
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	I can imagine that it is confusing that you actually have to reference to the file to use it. I always though it would be handy to have an option to do it automatically.

02-28-2012, 06:39 AM	#4
huebi Zealot Posts: 121 Karma: 5070 Join Date: Dec 2010 Device: none	What if you have more then one CSS, should they all be automatically in? And what happened if they are declaring different rules for the same element? First come, first serve? Cascading (in which order)?

02-28-2012, 08:33 AM	#5
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	And that is probably the reason why the option is not there, I know. However, I still think it would be handy.

02-28-2012, 09:54 AM	#6
jackibar Enthusiast Posts: 38 Karma: 12 Join Date: May 2010 Device: iPhone apps	Thanks for the help - I do wish there was a way to click on the file name in the left column (books browser) and say to "link" this file to your book section! Anyway, I'm trying to get the code right but it still isn't working. It's probably my "path" - I always get confused where to use the ../ and when not to. I have my Sigil book file saved in a folder called "Sigil Files" and my css file is style.css. I've tried this code: <link href="../style.css" rel="stylesheet" type="text/css" /> And I've tried removing the "../" at the front but neither are working! What do I need to change?

02-28-2012, 10:17 AM	#10
jackibar Enthusiast Posts: 38 Karma: 12 Join Date: May 2010 Device: iPhone apps	Thanks so much - Okay, Sigil didn't create a Styles folder when I saved the file, and I didn't realize I needed to do so manually! Thanks for explaining that the left window is the folder "heirarchy" - that will be helpful!

02-28-2012, 10:45 AM	#11
DiapDealer Grand Sorcerer Posts: 28,045 Karma: 199464182 Join Date: Jan 2010 Device: Nexus 7, Kindle Fire HD	I fear you're still a bit confused. The Styles folder exists within the ePub. There's no need to manually create one (in fact you can't create a folder in Sigil's hierachy, that I know of). And again... folders outside of the ePub are irrelevant (after the initial (x)html import).

02-28-2012, 02:58 PM	#15
jackibar Enthusiast Posts: 38 Karma: 12 Join Date: May 2010 Device: iPhone apps	Ok - I guess since I didn't see a "Styles" folder in the Finder, I figured Sigil didn't create one so I made one myself... I think I'm understanding now that Sigil does create these folders, but they are contained in the ePub file and not actual "folders" you can see when looking in the Finder... - ?

Advert

Advert