Newbie: how to edit H1 Header

Phylis Sophical · 10-02-2014, 03:06 PM

Doing my first eBook using Sigil / LibreOffice / Calibre.
Is it possible to edit the H1 / H2 Headers from within Sigil? Or do I have to do that from within my text document?
Being a newbie to this, I'm totally lost when it comes to style sheets/HTML/CSS and the like. So if I could simply edit the Font & size from within Sigil, that would be awesome.

theducks · 10-02-2014, 03:44 PM

Quote:

Originally Posted by Phylis Sophical

Doing my first eBook using Sigil / LibreOffice / Calibre.
Is it possible to edit the H1 / H2 Headers from within Sigil? Or do I have to do that from within my text document?
Being a newbie to this, I'm totally lost when it comes to style sheets/HTML/CSS and the like. So if I could simply edit the Font & size from within Sigil, that would be awesome.

The TOC Generator allows Edits (affects the source. H tags being the usual reason for existing. (you should normally avoid using H tags just for style) )

You can edit EVERY LAST CHARACTER in code view if you so desire

Toxaris · 10-02-2014, 03:45 PM

Sure you can. It depends on how you get your source ePUB (I am afraid a Calibre conversion of a LibreOffice document). If you already have a stylesheet, you should check in the stylesheet if there is an h1 selector. If there is, you can adapt this. If not, you need to add something like:

Code:

h1 {font-size: 1.5em;}

to the stylesheet.
Changing font is more difficult and can give some headaches. It would be better if you have some more experience in HTML/CSS before going there.

theducks · 10-02-2014, 03:55 PM

Edit can mean change Style

By all means, do it with the stylesheet, even create and assign a new class="stuf" if that is what is needed .

Phylis Sophical · 10-04-2014, 03:19 PM

Thanks for all your reply's. I'll work my way through them. btw, I only use Calibre to view the finished book, no editing. Also, I've realized any of the H1, H2 etc. can be used for the TOC. and this gives me more simple options to change the look.

blackest · 10-04-2014, 10:06 PM

Quote:

Originally Posted by Phylis Sophical

Thanks for all your reply's. I'll work my way through them. btw, I only use Calibre to view the finished book, no editing. Also, I've realized any of the H1, H2 etc. can be used for the TOC. and this gives me more simple options to change the look.

not sure if this will work here. but here goes

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

<title></title>
</head>

every html file has a head and a body
stuff in the body between tags is displayed, the header does different things this head is very simple it has a title section which is empty (the book title should go there) and says to use a style sheet.
the Styles link is more interesting this header says to use a style sheet in Styles folder called styles.css you can create it by right clicking the styles folder in the left panel of sigil and naming it as you want. if you called it fred.css then the link in the header would read ,./Styles/fred.css

You can write styles within the html code but its not a good idea because if you want to change how things look you are forced to go through everything looking for where you styled something and changing the values, horrible tedious and error prone.

here is a little bit of style sheet

blockquote { margin: 0em 0em 0em 1.25em }
p { margin: 0em }
.bold { font-weight: bold }
.italic { font-style: italic }

if you look at p for example it sets the margin for a paragraph to 0em if i changed that to 1 em then every paragraph would have a margin of 1em
you can set up lots of attributes in a stylesheet for an element

you can call a class anything you like, how about joe
.joe{
font-weight: bold;
font-style: italic;
}

the layout is a little different but its an attribute followed by a colon followed by a value followed by a semicolon all the attributes are enclosed by { and }

now i can have a paragragh of class="joe" and it will be both bold and italic

I don't know if this editor will eat the html and style stuff that I wrote here but a geat example of styling different elements is the three men in a boat epub on this site.

epub is xml and its pretty much html just like a web page and libreoffice can save a doc as html too so you can import it into an epub very easily. if you google "introduction to html and css" you should find lots of examples of how you can style html documents
and an epub is just like a zipped up set of webpages.

I hope this wasn't too confusing and nothing got ate

Phylis Sophical · 10-14-2014, 12:45 PM

Thanks, Blackest. I think I am slowly starting to get this. By creating a style sheet in Sigil, I can insert that where I want to change something throughout the epub, rather than editing the line in each place I want the change. Am I close?

theducks · 10-14-2014, 01:01 PM

blackest
Sigil will do the heavy lifting for you, there is little reason to do manual edits outside the body

create/import your stylesheet

select the target (x)HTML files in the list: Right-click: Link stylesheets: tick your choice(s)

Note this step will ALSO remove any previous Linked sheet references ( the actual sheet is not removed). If a file needs a different combination of sheets: select JUST those and set the links

mrmikel · 10-14-2014, 06:16 PM

Quote:

Originally Posted by Phylis Sophical

Thanks, Blackest. I think I am slowly starting to get this. By creating a style sheet in Sigil, I can insert that where I want to change something throughout the epub, rather than editing the line in each place I want the change. Am I close?

That is the giant advantage of a stylesheet. You create your styles how you want them to be once in the stylesheet, then call the name of the style wherever you want it in the text. Find you hate it, change it once in the stylesheet and it is fixed everywhere in the document.

You can even add things to existing tags like paragraph to make sure they all indent or don't indent, for instance. This takes a little thought if you have some you don't want and you do. It is a pain to have to put a different class in every paragraph to defeat something you really only wanted in a few.

blackest · 10-16-2014, 06:53 PM

Quote:

Originally Posted by Phylis Sophical

Thanks, Blackest. I think I am slowly starting to get this. By creating a style sheet in Sigil, I can insert that where I want to change something throughout the epub, rather than editing the line in each place I want the change. Am I close?

I'd say pretty much spot on. xml and css seperate the content from the style and it can be as simple or complex as you like really. XML and HTML are very similar, so much so you can copy a html page on the web into a xml page part of an epub very easily.

you can style locally or via a series of, or a single style sheet. Style sheets were made to support different mediums and devices. You could produce a page with a style sheet for a laptop screen or a different one for a mobile phone or maybe to print a page.

http://www.csszengarden.com/216/ and http://www.csszengarden.com/218/ are the same pages but with different css styling there is a whole bunch of different css styles on that site. while I wouldn't suggest using anything as complicated as those examples for an ebook it really does show off some of the power of css.

The best thing because you use css for similar elements it ensures the book has a consistant style. Layout wise anyway

theducks · 10-16-2014, 08:07 PM

The Zen Garden is perfect example of the power of a stylesheet

It does not hurt to explore what can be done (those folk are Wizards), but don't take the plunge trying to understand all that was done, but realize this is why you want to start using stylesheets ASAP.

At a later time, you can revisit your book and say: "My chapter numbering is boooor-ing

, lets jazz it up some.
A few changes to the CSS and we have a whole new look for the Chapter Number AND you did not touch the actual page of content.

exaltedwombat · 10-22-2014, 07:25 PM

Quote:

Originally Posted by Phylis Sophical

Thanks for all your reply's. I'll work my way through them. btw, I only use Calibre to view the finished book, no editing. Also, I've realized any of the H1, H2 etc. can be used for the TOC. and this gives me more simple options to change the look.

Calibre, though a useful librarian (and lately editor) is an irritating eBook READER.

Tanjamuse · 11-11-2014, 01:48 AM

I have the following in my stylesheet.css file, but I can't see that it makes any difference in the heading. Have I done something wrong?

Quote:

html, body {margin: 0; padding: 0; border-width: 0; text-align: justify; font-family: serif;}
@page {margin: 5pt;}
p {
margin-left: 0;
margin-right: 0;
margin-top: 0;
margin-bottom: 15;
font-size: 0.9em;
text-align: left;
text-indent: 0em;
h1 {font-size: 1.5em}
h2 {font-size: 1em}

}

Toxaris · 11-11-2014, 03:32 AM

Quote:

Originally Posted by Tanjamuse

I have the following in my stylesheet.css file, but I can't see that it makes any difference in the heading. Have I done something wrong?

Yes...

You have placed the code for the headers inside the paragraph selector.

Code:

html, body {margin: 0; padding: 0; border-width: 0; text-align: justify; font-family: serif;}
@page {margin: 5pt;}
p {
margin-left: 0;
margin-right: 0;
margin-top: 0;
margin-bottom: 15;
font-size: 0.9em;
text-align: left;
text-indent: 0em;
}
h1 {font-size: 1.5em}
h2 {font-size: 1em}

Tanjamuse · 11-11-2014, 03:39 AM

Thank you so much, that did the trick.

10-02-2014, 03:06 PM	#1
Phylis Sophical Member Posts: 15 Karma: 10 Join Date: Jul 2012 Device: kobo	Newbie: how to edit H1 Header Doing my first eBook using Sigil / LibreOffice / Calibre. Is it possible to edit the H1 / H2 Headers from within Sigil? Or do I have to do that from within my text document? Being a newbie to this, I'm totally lost when it comes to style sheets/HTML/CSS and the like. So if I could simply edit the Font & size from within Sigil, that would be awesome.

10-02-2014, 03:45 PM	#3
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	Sure you can. It depends on how you get your source ePUB (I am afraid a Calibre conversion of a LibreOffice document). If you already have a stylesheet, you should check in the stylesheet if there is an h1 selector. If there is, you can adapt this. If not, you need to add something like: Code: h1 {font-size: 1.5em;} to the stylesheet. Changing font is more difficult and can give some headaches. It would be better if you have some more experience in HTML/CSS before going there.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Newbie - Edit a style to center all	blackxacto	Sigil	7	10-30-2013 07:04 AM
Release : New Tool to Edit ePubs TOC, Edit with Sigil and keep you TOC	Nigol	ePub	105	10-29-2012 11:40 AM
Bulk metada edit error trying to edit tags	Purple Lady	Calibre	8	02-17-2011 06:09 PM
Newbie - How to Edit	AdeptJR	Calibre	8	10-20-2010 12:31 PM
No Title Header in 0.4.91?	nellow	Calibre	14	12-15-2008 04:35 PM

10-02-2014, 03:55 PM	#4
theducks Well trained by Cats Posts: 30,909 Karma: 60358908 Join Date: Aug 2009 Location: The Central Coast of California Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A	Edit can mean change Style By all means, do it with the stylesheet, even create and assign a new class="stuf" if that is what is needed .

10-04-2014, 03:19 PM	#5
Phylis Sophical Member Posts: 15 Karma: 10 Join Date: Jul 2012 Device: kobo	Thanks for all your reply's. I'll work my way through them. btw, I only use Calibre to view the finished book, no editing. Also, I've realized any of the H1, H2 etc. can be used for the TOC. and this gives me more simple options to change the look.

10-14-2014, 12:45 PM	#7
Phylis Sophical Member Posts: 15 Karma: 10 Join Date: Jul 2012 Device: kobo	Thanks, Blackest. I think I am slowly starting to get this. By creating a style sheet in Sigil, I can insert that where I want to change something throughout the epub, rather than editing the line in each place I want the change. Am I close?

10-14-2014, 01:01 PM	#8
theducks Well trained by Cats Posts: 30,909 Karma: 60358908 Join Date: Aug 2009 Location: The Central Coast of California Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A	blackest Sigil will do the heavy lifting for you, there is little reason to do manual edits outside the body create/import your stylesheet select the target (x)HTML files in the list: Right-click: Link stylesheets: tick your choice(s) Note this step will ALSO remove any previous Linked sheet references ( the actual sheet is not removed). If a file needs a different combination of sheets: select JUST those and set the links

10-16-2014, 08:07 PM	#11
theducks Well trained by Cats Posts: 30,909 Karma: 60358908 Join Date: Aug 2009 Location: The Central Coast of California Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A	The Zen Garden is perfect example of the power of a stylesheet It does not hurt to explore what can be done (those folk are Wizards), but don't take the plunge trying to understand all that was done, but realize this is why you want to start using stylesheets ASAP. At a later time, you can revisit your book and say: "My chapter numbering is boooor-ing , lets jazz it up some. A few changes to the CSS and we have a whole new look for the Chapter Number AND you did not touch the actual page of content.

11-11-2014, 03:39 AM	#15
Tanjamuse Wizard Posts: 1,327 Karma: 5306 Join Date: Jan 2014 Device: none	Thank you so much, that did the trick.

Advert

Advert