web analytics

How to make an ebook CSS shortcut

ebook-reader-code5-SC.jpg

How to make an ebook – shortcut codes

Hello and I do hope you have enjoyed the 5 part series How to make an ebook. I certainly have enjoyed making it.

In part 5, I promised some short cuts in the CSS code. I’m going to show you one short. (Just one!) This short cut will prove invaluable as it will save you a lot of time and effort when adding your code. I don’t want to bog you down with too much code, as this is probably the first time you have really used code on anything computer related.

With this short cut save you time and effort, but also will add less code to your manuscript. In the end, you will have a much cleaner code based manuscript.

Why am I giving you the short cut now? I believe that to fully appreciate and understand how the short cut works, you first needed to know the long drawn out way of coding. Line by line. In essence, a proven way that worked.

Now you will have a new way that is just as good and easy, and importantly, works!

Let’s get coding.

I am presuming now that you have example-code-v5.html and it’s open in your HTML editor of choice. If you want, you can download example-code-v6.html It has the new code added.

For this short cut example, I am going to use Coffeecup. Why? Because you should be competent enough to use any light weight HTML editor that you open, recognise the CSS code that’s been added to your manuscript and be able to add this short cut to it. Also, as I show this on the video, Coffeecup has the live preview, so what changes I make on the code, you will see on the preview window at the same time.

If you want me to show you using KompoZer, then I’ll be happy to, but for now, I will use Coffeecup.

Look at the code below – Remember it?

p.indent
{
text-indent: 1.25em;
line-height:130%;
margin-bottom: 0.2em;
}

This is part of the list of CSS p.classes you created. We are going to change the p.indent class. I want you to delete p and replace with div (Div again?)

Is should look like this:

div.indent
{
text-indent: 1.25em;
line-height:130%;
margin-bottom: 0.2em;
}

Nothing else, just that.

When you do that all your indents will disappear. (Are you MAD!) I hear you say. All that coding screwed up! That’s why you have only done five short chapters.

Then, everywhere you have placed <p class=”indent”> Delete it and only keep <p></p>.  Nothing else. At the moment you will have no indents.

This short code change is pretty powerful when used on a large scale project. Let me explain what we are doing.

By using another <div> tag, it allows us to encompass a whole section of text until we close it with </div>. Can you see what it will do. By enclosing everything with one line of code, all new lines are then indented. ( Hang on, where do we put the code? ) Excellent question!

We put <div.indent> at the beginning of the chapter section.

Example:

<!– CH 2 SIGHTINGS –> – ( Chapter Section )
<div class=”indent”> - ( New Div Class )
<p>The age of magic and mysticism was believable at one time. Humans and Faeries were friends, and England was in a time when folklore, myths and legends were born from great acts of chivalry. Knights were abundant and the King was respected by both his subordinates and the animals of the land.</p>

<p>At that time, certain myths were true such as faeries, and they had been around longer than anyone could remember. Humans and myths lived together side by side in harmony. As both groups lived off the land, both helped each other.</p>

<p>The faeries protected the domestic animals and the harvest, and humans were very careful as to what was cut down from the woodlands. For England, it was a very prosperous period in time, until something started to stir.</p>

</div> – ( End with Closed Div Tag )

<p class=”pagebreak”> – ( Page Break )

<!– END 0F CH 2 SIGHTINGS –> - ( End of Section )

We have deleted all <p class=”indent”> and just kept <p>.

Again, by opening with <div> anything before </div> is acted upon. It gives any enclosed text a style that you want, in this case, an indent on every paragraph.

We used this same principle when we changed the poem text to italics.  <div style=”font-style: italic;”>

That’s it.

You will see a difference in how much less code you will need and how much cleaner it looks.

This has been a very short tutorial. I wish you all the best.

Enjoy.

 

 Download HD version of the video ( right click, save as… )

Return from Ebook CSS short cut to Let’s Get E-published Home Page

 

Article by Ian S. Rutter

 

Ian S. Rutter is an indie publisher of a children’s book called ‘The Faeries of Birchover Wood’ He is writing the sequel, a short story and a horror novel. For fun he spends time with his three children and his wife. He loves reading, drawing, walking and daydreaming.

Connect with me on Google+

 

Digg button brought to you by diggZ-Et (WordPress Plugin)

Be Sociable, Share!
Please share this article.
You can leave a response, or trackback from your own site.
  • http://www.dianemaerobinson.com/ Diane M. Robinson

    Hi Ian. This is an incredible tutorial. I’m doing my homework.
    Diane Robinson

    • http://www.iansrutter.co.uk/blog Ian S. Rutter

      Thanks for the comment.
      If you need any help, just email me. I’m here to help.

  • http://akrummenacker.wordpress.com/ Allan Krummenacker

    Hello Ian,

    I just wanted to let you know that I nominated you for the “INSPIRING BLOG AWARD”

    http://akrummenacker.wordpress.com/2012/06/12/ive-just-received-the-inspiring-blogging-award/

    The rules are as follows:

    1-Thank the person who nominated you with a link to their blog
    2-Post 7 things about yourself
    3-Nominate 15 other bloggers for this award
    4-Inform those people that you’ve nominated them, just as I am with you

    And above all, have fun. I’ve chosen you because I’ve been following your blog and felt it to be very inspirational and a huge help to authors trying to go the e-book route. Keep it up and take care.

    Allan Krummenacker

    • http://www.iansrutter.co.uk/blog Ian S. Rutter

      Hello
      Thank you so much for this. I’ve been out of it lately. Have been privately tutoring some authors which has taken a lot of my time.
      It can be a mine field but the results show that once one has grasped the skill it’s makes a great deal of difference.
      Have been looking at Smashwords and they aim to have in place by the end of this year a system that you can upload ePub files directly. Why not sooner I don’t know but that will be great when it happens.
      I really don’t like the system they have now with uploading a doc file.
      Happy blogging, thanks for your link. Keep intouch.
      Next I am working on Calibre ebook management software.
      How to use it to turn the hard work of adding HTML to your manuscript and produce an great ePub or MOBI ebook.

      Once again, thank you so much.
      Ian

  • yo

    Hi
    I’m a student, I don’t write books or anything, but your ebook tutorials were super helpful cos I can now create summaries for my kindle in mobi instead of in pdf form. Just wanna thank you cos this was super helpful.

    • http://www.iansrutter.co.uk/blog Ian S. Rutter

      Hello Yo
      It’s my pleasure. Thank you for commenting. I’m very happy that it has helped. I have sadly neglected this blog as I have been helping so many people and writing the sequel to my own book. I should be getting back to it soon.
      Again, I am very happy it has helped. You have proved a point that the tutorials are not just for books but, and in your case, summaries of study notes.
      Excellent usage.
      Have fun!

Powered by WordPress | Download Free WordPress Themes | Thanks to Themes Gallery, Premium Free WordPress Themes and Free Premium WordPress Themes
%d bloggers like this: