Coding headings in color

Alda · 01-24-2011, 11:11 AM

Hi,

Can anyone give me tips on how to code only the chapter titles (heading 1) in a different color?

I'm a bit of a CSS dud (learning!) so I don't know much. Have been testing out a few things but always wind up with the entire text in the same color.

Thanks in advance!

Alda

Jellby · 01-24-2011, 11:16 AM

In your CSS file add:

h1 { color: red }

or:

h1 { color: #FF0000 }

Alda · 01-24-2011, 11:20 AM

Thanks for the fast reply!

OK, must profess more ignorance: I'm trying to do this in Sigil and have added the code you gave me but it simply shows up as-is in book view. Do I need to put it somewhere in particular? Or is this just not a "CSS stylesheet"?

Jellby · 01-24-2011, 12:42 PM

I think you'll benefit from some introductory tutorial on HTML and CSS. You can start with the W3Schools one.

Alda · 01-24-2011, 12:55 PM

I'm sure I would too - and I'll look into this as soon as I can carve out a few hours.

In the meantime, can anyone help with a) what code I need to make my headings a different color and b) where I would put that code in Sigil?

Thank you!

DaleDe · 01-24-2011, 02:50 PM

You put the code in the section called stylesheets.

Alda · 01-24-2011, 03:05 PM

Thanks - but I'm using Sigil to edit. I don't see anything called stylesheet there - unless I'm missing something?

lhgrappler · 01-24-2011, 08:26 PM

I'm still pretty new to this but I just found them under "Styles" in the left hand pane

Alda · 01-25-2011, 04:11 AM

Ah! Thank you!!

I have so many sections that it was pushed way down so didn't see it.

Now it all makes sense.

wannabee · 01-26-2011, 08:27 PM

Hey Alda, I saw you were using InDesign in your other thread. If you set up all you paragraph styles with sizes, typeface, bullets, indents, colour, space after, space before etc. in InDesign they are automatically put into the CSS template when you export to ePub. I fine tune the CSS in notepad++ along with the OPF. Very little needs to be done after export. Same with the table of contents. It all gets done for you. There are some big differences between CS4 and 5 for exporting to ePub but both do a good job once you know what they are.

Alda · 01-27-2011, 04:43 AM

Thanks wannabe! But I'm using an older version of ID - specifically ID 3. Would it work in that, also?

And incidentally, what's OPF?

wannabee · 01-27-2011, 07:57 AM

Hi Alda,
A really good start is to get a copy of ePub straight to the point recommended to you on the first thread I read. http://www.elizabethcastro.com/epub/
It explains so much more than anyone can do on here. Between that book and the help you get here I landed a job writing ebooks the day after I wondered what they were when I saw an ad for an ebook maker in the paper.
An ePub is just a mini website in a zip file. Instead of an index page that points to everything it has OPF file that points to everything, lists all of it's components and stitches it all together. The key is to learn how that file does that and make sure you add the bits that indesign doesn't. I.e. It doesn't add a publish date in the meta data or set up the cover image so it displays correctly. I'm pretty certain that 3 is similar to 4 when exporting to ePub which works great.
You will also need to read the w3 HTML and css "how too" explanations.
http://www.w3schools.com/css/ http://www.w3schools.com/html/default.asp
Fortunately I had done some HTML back in the 90's when sites were new and exciting. I feel the same way now learning something new. You will need to know what HTML and CSS is even if you don't actually learn it. I've played with Sigil and as good as it is I think the indesign export when done properly is by far the easiest option if you already own the program.
I didn't see your location. I'm in Sydney. I'm not sure of your time zone but I'll keep an ear to the ground for you mate.

01-24-2011, 11:11 AM	#1
Alda Zealot Posts: 104 Karma: 22 Join Date: Jun 2010 Device: none	Coding headings in color Hi, Can anyone give me tips on how to code only the chapter titles (heading 1) in a different color? I'm a bit of a CSS dud (learning!) so I don't know much. Have been testing out a few things but always wind up with the entire text in the same color. Thanks in advance! Alda

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Hard coding of Table of Contents Failing	synosure	Calibre	12	11-08-2010 11:52 AM
Seriously thoughtful Coding Help Requested	poohbear_nc	Lounge	10	08-24-2010 10:42 AM
Different font for headings	bremler	ePub	4	03-11-2010 06:03 AM
Some horrible and outrageous examples of disgraceful coding	Snowman	Lounge	44	12-15-2008 03:18 PM
python coding...	alexxxm	Sony Reader	8	01-31-2008 12:25 PM

01-24-2011, 11:16 AM	#2
Jellby frumious Bandersnatch Posts: 7,516 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	In your CSS file add: h1 { color: red } or: h1 { color: #FF0000 }

01-24-2011, 11:20 AM	#3
Alda Zealot Posts: 104 Karma: 22 Join Date: Jun 2010 Device: none	Thanks for the fast reply! OK, must profess more ignorance: I'm trying to do this in Sigil and have added the code you gave me but it simply shows up as-is in book view. Do I need to put it somewhere in particular? Or is this just not a "CSS stylesheet"?

01-24-2011, 12:42 PM	#4
Jellby frumious Bandersnatch Posts: 7,516 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	I think you'll benefit from some introductory tutorial on HTML and CSS. You can start with the W3Schools one.

01-24-2011, 12:55 PM	#5
Alda Zealot Posts: 104 Karma: 22 Join Date: Jun 2010 Device: none	I'm sure I would too - and I'll look into this as soon as I can carve out a few hours. In the meantime, can anyone help with a) what code I need to make my headings a different color and b) where I would put that code in Sigil? Thank you!

01-24-2011, 02:50 PM	#6
DaleDe Grand Sorcerer Posts: 11,470 Karma: 13095790 Join Date: Aug 2007 Location: Grass Valley, CA Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7	You put the code in the section called stylesheets.

01-24-2011, 03:05 PM	#7
Alda Zealot Posts: 104 Karma: 22 Join Date: Jun 2010 Device: none	Thanks - but I'm using Sigil to edit. I don't see anything called stylesheet there - unless I'm missing something?

01-24-2011, 08:26 PM	#8
lhgrappler Member Posts: 11 Karma: 10 Join Date: May 2010 Device: Sony Pocket Reader	I'm still pretty new to this but I just found them under "Styles" in the left hand pane

01-25-2011, 04:11 AM	#9
Alda Zealot Posts: 104 Karma: 22 Join Date: Jun 2010 Device: none	Ah! Thank you!! I have so many sections that it was pushed way down so didn't see it. Now it all makes sense.

01-26-2011, 08:27 PM	#10
wannabee Media Bloke Posts: 2,381 Karma: 113956855 Join Date: Sep 2010 Location: NSW - Australia Device: iOS	Hey Alda, I saw you were using InDesign in your other thread. If you set up all you paragraph styles with sizes, typeface, bullets, indents, colour, space after, space before etc. in InDesign they are automatically put into the CSS template when you export to ePub. I fine tune the CSS in notepad++ along with the OPF. Very little needs to be done after export. Same with the table of contents. It all gets done for you. There are some big differences between CS4 and 5 for exporting to ePub but both do a good job once you know what they are.

01-27-2011, 04:43 AM	#11
Alda Zealot Posts: 104 Karma: 22 Join Date: Jun 2010 Device: none	Thanks wannabe! But I'm using an older version of ID - specifically ID 3. Would it work in that, also? And incidentally, what's OPF?

Advert

Advert

01-27-2011, 07:57 AM	#12
wannabee Media Bloke Posts: 2,381 Karma: 113956855 Join Date: Sep 2010 Location: NSW - Australia Device: iOS	Hi Alda, A really good start is to get a copy of ePub straight to the point recommended to you on the first thread I read. http://www.elizabethcastro.com/epub/ It explains so much more than anyone can do on here. Between that book and the help you get here I landed a job writing ebooks the day after I wondered what they were when I saw an ad for an ebook maker in the paper. An ePub is just a mini website in a zip file. Instead of an index page that points to everything it has OPF file that points to everything, lists all of it's components and stitches it all together. The key is to learn how that file does that and make sure you add the bits that indesign doesn't. I.e. It doesn't add a publish date in the meta data or set up the cover image so it displays correctly. I'm pretty certain that 3 is similar to 4 when exporting to ePub which works great. You will also need to read the w3 HTML and css "how too" explanations. http://www.w3schools.com/css/ http://www.w3schools.com/html/default.asp Fortunately I had done some HTML back in the 90's when sites were new and exciting. I feel the same way now learning something new. You will need to know what HTML and CSS is even if you don't actually learn it. I've played with Sigil and as good as it is I think the indesign export when done properly is by far the easiest option if you already own the program. I didn't see your location. I'm in Sydney. I'm not sure of your time zone but I'll keep an ear to the ground for you mate.