Customising the Stylesheets

Important Notice. This is not a general website. It is an advanced digital content production resource for publishers. You must use an HTML5/CSS3 standards compliant browser to get the full value of this website. This means you must use: Firefox 4+, Google Chrome 13+, Safari 5.2+, Opera 10+, Internet Explorer 10+.

eScape lets you create any styles for titles, headers, footers and other structures you want. You will need a few basic CSS skills, and you will need to follow a few rules so you don't upset the processor. Other than that the CSS world is yours to enjoy.

You can also share your CSS files with others if you think you have made a stylesheet of significance and beauty.

Locating the CSS Files

By default eScape came with two stylesheets it installed in the program installation location:

c://Program Files/infogridpacific/igp-escape/fxcss/

The stylesheets are:

igp-escape-classic.css

"Classic" is an all serif styled book with center aligned titles. Good for novels and the classic look, which is of course why it is called "classic".

igp-escape-default.css

"Default" is a modern left aligned sans-serif title and header style. Good for more technical books, documents (eScape can be used for more than just books), or just for a change.

You do not have to use the CSS files from this location, in fact it is preferrable to move them to an easier to work location and then you can do almost anything you want.

Moving the CSS Files

I have a directory d://eScape where I do all the work. Inside that I have made a number of production directories to organize myself. It looks like this:

d://eScape

/Covers

/CSS

/CSS Editing

/ePubs

/Inputs

You can use any directory strategy you like. Whatever you decide, you can then use the path tools in eScape Configure to point to the various directories. Here is what my configure interface looks like using the above directory structures;

Now you can copy the two start-up CSS files into this CSS location and next time you use the select CSS option from eScape it will be pointing to this new location and all the stylesheets stored there.

You can do the same with your cover images. Notice that my generated ePubs go directly to the AZARDI library location. You can point yours to any convenient location.

Customizing the CSS

You can have any number of CSS's in this location, they just have to have different file names and match the selectors created by the XHTML exporter. If you are interested in the technicalities of the XHTML, that is explained in the Topic in this manual, The eScape Open Office Writer Template.

eScape CSS Rules

Follow these simple rules when editing your styles:

Never remove or edit the comments. The processor understands and needs them.
Just change the style attributes, never the selectors. IE modify anything inside the braces, or curly brackets { }, never anything outside the curly brackets.
Don't delete any styles. The processor will automatically delete all unused styles groups when making the final package so you don't have to.
Keep copies of the original files so you have somewhere to fall back if you make a terrible mess.
Any questions or assistance required, don't hesitate to post a comment or question here.

1. Make personalized copies of the CSS

Make a copy of either (or both) CSS files in the same directory. Rename them to anything you like. Being an egoist, I just simplify them and add my name. Eg: classic-richard.css. I always stick with lowercase, but you can use mixed case without a problem.

When I am making a CSS for a specific book, I will usually rename it with a fragment of the title, or the authors name. Examples:

dickens-classic.css

christmas_carol.css

The names are yours to decide to help you organize your production activities and remember what you do.

It is probably best to leave the two supplied CSS's intact for reference and fall-back. But that is entirely your decision.

You could do a test at this stage. Assuming you have the new CSS location set up, have put in some new CSS copied files, then create one of your existing books - or one of the samples using your new copies. It should process through without a hitch.

You are now ready to customize your CSS.

2. Customizing your CSS

Open your new copy using a suitable text editor. The Default CSS is shown just below. Note that there is one CSS statement per line, and there are groups marked with comments.
Eg: /* galley */

Never remove these. The processor uses these for Style Sheet reduction (unused CSS statements are automatically removed to make the CSS as small as possible in the output ePub.

The CSS statements are arranged one per line to make it easier for the eScape processor to strip unused styles from the stylesheet when assembling the final ePub. It means a little side-scrolling sometimes to adjust a style attribute at the end, but it also makes it easy to quickly locate a style. Usually, you will only be making a few changes.

The stylesheet is nicely organized into content block types to make it easy to understand. Note that all styles use "em" sizing. There are no fixed sizes. It is recommended that you follow this, but hey! its your stylesheet and your book, do what you want.

Scroll through the stylesheet for a quick look, and then further down we will get into the customization details. (If you print this page, it will go off the edge - sorry about that, but this is an Online tutorial).

/* Copyright 2008-12 Infogrid Pacific Pte. Ltd. All rights reserved */
/* galley */
.galley-rw {font-size: 1em; line-height: 1.1em; text-align: justify; padding-right: 0em;}
.galley-rw h2, .galley-rw h3, .galley-rw h4, .galley-rw h5, .galley-rw h6 {font-family: sans-serif; font-size: 1em; line-height: 1.2em; text-align: left; margin: 0; padding: 0;}
.galley-rw h2 {font-weight: bold; padding: 1.5em 2em 0.75em 0; color: rgb(0,0,128);}
.galley-rw h3 {font-weight: bold; font-style: italic; padding: 1em 2em 0.5em 0; color: rgb(0,0,128);}
.galley-rw h4 {font-weight: bold; padding: 1em 2em 0.25em 0;}
.galley-rw h5 {font-weight: bold; font-style: italic; padding: 1em 2em 0.25em 0;}
.galley-rw h6 {font-weight: normal; font-style: italic; text-align: left; padding: 1em 2em 0.25em 0;}
p {margin: 0;}
p + p {text-indent: 1.3em;}
.alt-rw p {font-family: sans-serif; font-size: 0.9em;}
.decoration-rw {text-align: center; padding: 1em 0 1em 0;}
.leading-line-rw {height: 1em; }
.hanging-rw p, .hanging-rw p + p {text-indent: -1.3em; margin-left: 1.3em;}
p.middle-rw { text-indent:0; text-align: center; }
p.right-rw { text-align: right; }
p.indent-rw { text-indent: 1.3em; }
p.attribution {text-align: right; font-style: italic;}
span.sc-rw { font-variant: small-caps; }
.superscript {font-size: 0.7em; vertical-align: top;}
.subscript {font-size: 0.7em; vertical-align: bottom;}
.dropcap-rw { float: left; font-size: 2.7em; line-height: 0.87em; }
.raisedcap-rw { font-size: 2em; line-height: 1em; }
.bts-rw { font-size: small; }
.btl-rw { font-size: large; }
div.cover {position: relative; text-align: center; text-indent: 0px; clear: both; width: auto; }
div.cover img {display: block; margin-left: auto; margin-right: auto;}
div.cover .title-block-book-rw { padding: 4.5em 0em 2em 0; }
div.cover .title-block-book-rw h1, div.cover .title-block-book-rw .title-sub-rw, div.cover .title-block-book-rw .title-author-rw, div.cover .title-block-book-rw .title-contributor-rw, div.cover .title-block-book-rw .title-other-rw { font-family: sans-serif; font-weight: normal; text-align: left; text-indent: 0; margin: 0; color:rgb(255,255,255); }
div.cover .title-block-book-rw h1 { font-size: 2em; line-height: 1.6em; font-weight: bold; padding: 0 0 2em 0; color:rgb(255,255,255); }
div.cover .title-block-book-rw .title-sub-rw { font-size: 1.25em; line-height: 1.2em; padding: 0 0 3em 0; }
div.cover .title-block-book-rw .title-author-rw, div.cover .title-block-book-rw .title-contributor-rw { font-size: 1.5em; line-height: 1.5em; padding: 0 0 3em 0; color:rgb(255,255,255); }
div.cover .title-block-book-rw .title-other-rw { font-family: sans-serif; font-size: 0.9em; line-height: 1.2em; text-indent: 0; padding: 0 0 0.5em 0; }
div.cover .title-block-book-rw p {text-indent: 0;}
div.cover .imprint-rw { font-family: sans-serif; text-align: center; margin-top: 3em; padding: 1em 0 0.5em 0; border-top: 1px solid rgb(0,0,0); border-bottom: 1px solid rgb(0,0,0); }
div.cover .imprint-rw p { font-size: 0.9em; line-height: 1.2em; text-indent: 0; margin: 0; padding: 0 0 0.5em 0; }
/* caption */
p.caption-rw { font-size: 0.9em; line-height: 1.2em; font-style: italic; text-indent: 0; text-align: left; padding: 0.25em 0 0.25em 0; }
/* title-block-book */
.title-block-book-rw { padding: 4.5em 2em 2em 0; }
.title-block-book-rw h1, .title-block-book-rw .title-sub-rw, .title-block-book-rw .title-author-rw, .title-block-book-rw .title-contributor-rw, .title-block-book-rw .title-other-rw { font-family: sans-serif; font-weight: normal; text-align: left; text-indent: 0; margin: 0; }
.title-block-book-rw h1 { font-size: 2em; line-height: 1.6em; font-weight: bold; padding: 0 0 2em 0; color: rgb(0,0,128); }
.title-block-book-rw .title-sub-rw { font-size: 1.25em; line-height: 1.2em; padding: 0 0 3em 0; }
.title-block-book-rw .title-author-rw, .title-block-book-rw .title-contributor-rw { font-size: 1.5em; line-height: 1.5em; padding: 0 0 3em 0; color: rgb(0,0,128); }
.title-block-book-rw .title-other-rw { font-family: sans-serif; font-size: 0.9em; line-height: 1.2em; text-indent: 0; padding: 0 0 0.5em 0; }
.title-block-book-rw p {text-indent: 0;}
div.imprint-rw { font-family: sans-serif; text-align: center; margin-top: 3em; padding: 1em 0 0.5em 0; border-top: 1px solid rgb(0,0,0); border-bottom: 1px solid rgb(0,0,0); }
.imprint-rw p { font-size: 0.9em; line-height: 1.2em; text-indent: 0; margin: 0; padding: 0 0 0.5em 0; }
/* title-block */
.title-block-rw { margin: 1em 0 1em 0; padding: 2em 0 2em 0; border-top: 1px solid rgb(0,0,0); border-bottom: 1px solid rgb(0,0,0); }
.title-block-rw h1, .title-block-rw .title-sub-rw, .title-block-rw .title-num-rw, .title-block-rw .title-author-rw, .title-block-rw .title-contributor-rw, .title-block-rw .title-other-rw { font-family: sans-serif; font-weight: normal; text-align: left; text-indent: 0; margin: 0; }
.title-block-rw h1 { font-size: 1.5em; line-height: 1.6em; font-weight: bold; padding: 0 0 0.5em 0; color: rgb(0,0,128); }
.title-block-rw .title-sub-rw { font-size: 1.25em; padding: 0 0 1em 0; }
.title-block-rw .title-num-rw { font-size:1.5em; font-weight: bold; font-style: normal; padding: 0 0 0.5em 0; color: rgb(128,128,128); }
.title-block-rw .title-author-rw, div.title-block-rw .title-contributor-rw { font-size: 1.25em; font-weight: normal; font-style: italic; padding: 0 0 0.5em 0; }
.title-block-rw .title-other-rw { font-size: 0.9em; padding: 1em 0 0.5em 0; color: rgb(0,0,128); }
.title-block h1 a { text-decoration: none; font-weight: normal; color: rgb(0,0,128); }
.title-block p.title-num a { text-decoration: none; font-weight: normal; color: rgb(128,128,128); }
.title-block h1 a:hover, .title-block p.title-num a:hover { text-decoration: underline; font-weight: normal; color: rgb(0,0,255); }
/* Copyright */
.copyright-center-rw { text-align: center; padding: 4em 0 2em 0; }
.copyright-rw p, .copyright-center-rw p { font-weight: normal; font-size: 0.9em; text-indent: 0; padding: 0 0 0.5em 0; }
.copyright-rw li { font-size: 0.9em; }
/* Dedication */
.Dedication-rw { margin:4em 2em 1em 2em; }
.Dedication-rw p, .Dedication-rw div { display: block; font-size: 1.1em; line-height: 1.3em; text-align: center; text-indent: 0; }
/* indent */
div.indent-rw { margin-left: 1.5em; }
/* block */
.block-rw { margin-top: 1em; margin-bottom: 1em; padding: 0; }
.block-rw h4 { font-size: 1em; font-weight: bold; padding: 1em 0 0.5em 0.25em; }
.block-rw h5 { font-size: 0.9em; font-weight: bold; padding: 1em 0 0.25em 0; }
.block-rw h6 { font-size: 0.9em; font-style: italic; padding: 1em 0 0.25em 0; }
/* epigraph */
div.epigraph-rw { width: 60%; display: block; font-size: 0.9em; line-height: 1.2em; margin-left: auto; margin-right: auto; }
/* extract */
div.extract-rw { margin-left: 1em; margin-right: 1em; }
/* speech */
div.speech-rw { text-align: left; }
.speech-rw p { text-indent: -2em; margin-left: 2em; }
span.speaker-rw { padding-right: 0.5em; }
/* notebox */
div.notebox-rw { font-size: 0.9em; line-height: 1.2em; padding: 1em; background: rgb(230, 230, 250); }
/* boxed */
div.boxed-rw { padding: 0.5em 1em 0.5em 1em; border: 1px solid rgb(0,0,0); }
/* code */
div.code-rw { background: rgb(255, 255, 204); margin: 1em 0 1em 0; padding: 0.5em; }
pre { font-family: 'DejaVu Sans Mono', monospace; font-size: 0.8em; line-height: 1.2em; margin: 0; padding: 0 1em 0 1em; background: rgb(255, 255, 204); }
pre + p { margin-top: 1em; text-indent: 0; }
p + pre { margin-top: 1em; }
/* poem */
div.poem-rw { display: table; margin-left: auto; margin-right: auto; }
div.poem-rw p, div.poem-rw p + p { text-indent: 0; }
/* references */
div.references-rw { font-size: 0.9em; line-height: 1.3em; margin: 1em 0 1em 0; }
.references-rw p, .references-rw p + p, .list-references-rw p, .list-references-rw p + p { text-align: left; text-indent: -1.3em; margin: 0 0 0 1.3em; padding: 0; }
/* list-notes */
.list-notes-rw p { font-size: 0.9em; line-height: 1.2em; text-indent: -1.3em; margin: 0 0 0.5em 1.3em; padding: 0; }
.list-notes-rw li { text-indent: 0; }
.list-notes-rw h2, .notes-rw h3, .book-end-notes-rw h3, .part-end-notes-rw h3, .chapter-end-notes-rw h3 { font-size: 0.8em; line-height: 1em; font-weight: bold; margin: 1em 0 0.5em 0; }
span.num-note-rw { float: left; width: 1em; padding-right: 0.25em; }
/* list-toc */
ul.list-toc-rw li { list-style-type: none; margin: 0 0 0.5em 1em; }
.ch-num-rw {float: left; width: 1.5em; text-align: right; margin-right: 0.5em; margin-left: -1.5em; }
.citation-rw { display: block; font-style: italic; margin-left: 0.5em;}
/* numbered-paras */
.numbered-paras-rw p { margin-left: 1.3em; text-indent: -1.3em; }
.numbered-paras-rw p.indent-rw { text-indent: 0em; }
/* li */
li { margin-bottom: 0.25em; }
ol ol li { list-style: lower-alpha; }
ol ol ol li { list-style: lower-roman; }
ul ul li { list-style: square; }
ul ul ul li { list-style: circle; }
/* ol */
ol { margin: 1em 0 1em 1.5em; padding: 0; }
ol ol, ol ul { padding-top: 0.25em; }
/* ul */
ul { margin: 1em 0 1em 1em; padding: 0; }
ul ul, ul ol { padding-top: 0.25em; }
/* table */
div.table-rw { font-size: 0.9em; line-height: 1.2em; text-align: left; margin-top: 1em; margin-bottom: 1em; }
div.table-rw h4 { font-size: 1em; margin: 0 0 0.5em 0; }
div.table-rw p { text-indent: 0; padding: 0 0 0.5em 0; }
table { border-collapse: collapse; font-family: sans-serif; font-size: 0.9em; line-height: 1.2em; margin-top: 0.5em; margin-bottom: 0.5em; border-top: 1px solid #00008b; border-bottom: 1px solid #00008b; width: 100%; }
table th { font-weight: bold; font-style: normal; background: #d3d3ff; border-bottom: 1pt solid white; padding: 0.2em 0.2em 0.2em 0.2em; margin: 0; }
table td { vertical-align: top; text-align: left; border-bottom: 1pt solid #d3d3ff; margin: 0; padding: 0.2em 0.2em 0.2em 0.2em; }
table tfoot td { font-size: 0.8em; line-height: 1em; font-style: italic; text-align: left; padding: 0.5em; border-top: 1px solid #00008b; }
/* Document Sections */
/* frontmatter */
.HalfTitle { }
.BookTitlePage { }
.Copyright { }
.Dedication { }
.TableOfContents { }
.Foreword { }
.Preface { }
.Introduction { }
/* body */
.Part { }
.Chapter { padding-bottom: 4em; }
/* backmatter */
.Appendix { }
.Bibliography { }
.EndNotes { }
.InsertedCopyright { }

OK. Your here. Lets make some changes.

galley

The entire document is wrapped in a <div class="galley"> ... </div> element. This is to isolate it from other external style statements when used as a mashup Online (not really an issue here). There is a block of galley styles and this is probably where you are going to do most of your "look and feel" customization changes.

/* galley */
.galley-rw {font-size: 0.9em; line-height: 1.2em; text-align: justify; padding-right: 0em;}
.galley-rw h2, .galley-rw h3, .galley-rw h4, .galley-rw h5, .galley-rw h6 {font-family: sans-serif; font-size: 1em; line-height: 1.2em; text-align: left; margin: 0; padding: 0;}
.galley-rw h2 {font-weight: bold; padding: 1.5em 2em 0.75em 0; color: rgb(0,0,128);}
.galley-rw h3 {font-weight: bold; font-style: italic; padding: 1em 2em 0.5em 0; color: rgb(0,0,128);}
.galley-rw h4 {font-weight: bold; padding: 1em 2em 0.25em 0;}
.galley-rw h5 {font-weight: bold; font-style: italic; padding: 1em 2em 0.25em 0;}
.galley-rw h6 {font-weight: normal; font-style: italic; text-align: left; padding: 1em 2em 0.25em 0;}

.galley-rw

The first statement .galley-rw controls your bodytext styles. The options provided are:

font-size:

line-height:

text-align:

padding-right:

Note there is no font-family statement here. It is designed to use the reader default. If you wanted to make the body text sans-serif (for example) you could add:-

font-family: sans-serif;

If you wanted the font to be larger, change font-size:-

font-size: 1em;

You can change any of these attributes anyway you like (with the CSS rules of course), including removing them.

.galley-rw h2, galley-rw h3, etc

The second statement sets the color, font-family and other global styles for headers if your document uses them.Remember <h1> is reserved for book and chapter titles and never comes into galley headers.

.galley h2, etc.

The next five selectors allow you to add additional customization to each of the header levels using standard CSS font, text, margin and padding properties.

Bodytext

The next block are the main bodytext controllers that set paragraph indents, vertical spacing and other properties. There is an overlap with .galley-rw for font-size and line-height you may have to consider.

p {margin: 0;}
p + p {text-indent: 1.3em;}
.alt-rw p {font-family: sans-serif; font-size: 0.9em;}
.decoration-rw {text-align: center; padding: 1em 0 1em 0;}
.leading-line-rw {height: 1em; }
.hanging-rw p, .hanging-rw p + p {text-indent: -1.3em; margin-left: 1.3em;}
p.middle-rw { text-indent:0; text-align: center; }
p.right-rw { text-align: right; }
p.indent-rw { text-indent: 1.3em; }
p.attribution {text-align: right; font-style: italic;}

The paragraph styles set no vertical spacing. If you want vertical spacing between paragraphs you would change this to something like:

p {margin: 0 0 1em 0;}

Which changes the margin bottom to 1em or whatever size you want.

The p + p selector means any paragraph following a paragraph will be indented. If a paragraph follows a header or block it will not be indented. This follows the best-practices typesetting rule, use only one indicator for the start of a new paragraph. For example if you put a 1em space between the paragraphs, you should probably remove the p + p indent.

The rest of the styles are relatively self explanatory, but I will continue to expand this tutorial section as time permits, or as questions come in.

eScape CSS Rules

Follow these simple rules when editing your styles:

Never remove or edit the comments. The processor understands and needs them.
Just change the style attributes, never the selectors. IE modify anything inside the braces, or curly brackets { }, never anything outside the curly brackets.
Don't delete any styles. The processor will automatically delete all unused styles groups when making the final package so you don't have to.
Keep copies of the original files so you have somewhere to fall back if you make a terrible mess.
Any questions or assistance required, don't hesitate to post a comment or question here.