Jump to content


Setting and managing styles


  • You cannot reply to this topic
26 replies to this topic

#21 Steve

    Administrator

  • Root Admin
  • PipPipPip
  • 2,705 posts

Posted 04 February 2011 - 04:25 PM

Hi shellbhawaii,

View Postshellbhawaii, on 01 February 2011 - 08:51 PM, said:

OK, I'm back, but don't cringe!!

I am now an expert at that CSS stuff to make my Section Text appear just right!

But, now it's the Section Separator that is a bugaboo.
As for space between various elements, be that between Chapter and subhead, or between scenes, I presumed I could insert a "Section Separator."
But, whether I create my own, or use one that seems to magically appear in my style menu sometimes, it doesn't translate in Kindle.

I see these breaks of space when I read various Kindle books, so I know they can happen, but what do I do to achieve this?

Any advice is welcome.

In advance of receiving the answer, I wanted to pose two directions I've thought of, but am not sure how to execute:

1. Add some CSS code for a new style into my main css. But, first, what would the code be? And, second, if I do that (as you'd suggested at one point for my first line indent), where/how do I assign that style where I want it? The headings are available to assign when creating the book and assigning styles. How does the new style get applied?

2. If the only option is a manual entry at each point I want the scene break (<br/><br/>), do I go into the individual chapter html files and insert it? And, if so, do I need to do anything special to have these revised html files "speak" to the opf file that I use to generate my new mobi file? Or does the css file already have the "link" in it, as long as my html files stay in the same directory as before?

I"m trying to "talk the talk," but am having difficulty walking the walk!

Thanks.

Your first approach is the best one. The "margin-bottom" CSS property controls the space at the bottom of a block of markup (e.g. a paragraph).

Storyist provides hooks for customization by marking up the exported text with class names for the text style in your manuscript. So, for example, if you had some text with the style named "Quote", the exporter would mark up the HTML like this

<p class="quote">...</p>

so you can add a style to your CSS file like this:

.quote {
...
}

(Notice the dot before the style name.)

Now that you've taken the plunge, there is actually quite a bit of customization you can do (provided you're willing to test it on the various Kindle versions).

If you want to do a bunch of this (or work on websites), I recommend a tool called CSSEdit. It will

* Let you change CSS properties using more familiar controls (so you don't have to remember the CSS property names).
* Preview your CSS changes with your actual book.

-Steve

#22 shellbhawaii

    Member

  • Members
  • PipPip
  • 15 posts
  • Gender:Female
  • Location:Atlanta, GA

Posted 04 February 2011 - 06:05 PM

Steve, thanks for the reply.
Now, you are just trying to suck me into the CSS world... I'll think about that software. Certainly I need help to move forward.
It's quite intimidating.

Two last things, before I can FINALLY send this book off to its author.

1. Confirmation that I cannot do ANYTHING to increase the font size of my subheads. This is where I used Heading 2 style, and inserted custom CSS to italicize and keep it flush left. But, I cannot increase the font to what I would call "medium". It is either small or huge. I've tried font-size:+3..... +4.... etc., I've tried Font-size:13....14.....15. I've tried leaving font size out of the CSS. I have no idea what controls it. Can you tell me where, if anywhere, you can control this?

2. TOC: I was all but finished, when I noticed the LAST entry in my TOC is "Text"... It doesn't show in my Storyist list, and when in Kindle, I click on it and it takes me to an image I had inserted earlier in the book. It's actually a book cover that I inserted in promo area for the author's next book. It shows fine where I put it, but why does it re-appear, and why is it called "text" in the TOC?

Thanks!!

#23 shellbhawaii

    Member

  • Members
  • PipPip
  • 15 posts
  • Gender:Female
  • Location:Atlanta, GA

Posted 28 September 2011 - 09:53 PM

View Postshellbhawaii, on 04 February 2011 - 06:05 PM, said:

Steve, thanks for the reply.
Now, you are just trying to suck me into the CSS world... I'll think about that software. Certainly I need help to move forward.
It's quite intimidating.

Two last things, before I can FINALLY send this book off to its author.

1. Confirmation that I cannot do ANYTHING to increase the font size of my subheads. This is where I used Heading 2 style, and inserted custom CSS to italicize and keep it flush left. But, I cannot increase the font to what I would call "medium". It is either small or huge. I've tried font-size:+3..... +4.... etc., I've tried Font-size:13....14.....15. I've tried leaving font size out of the CSS. I have no idea what controls it. Can you tell me where, if anywhere, you can control this?

2. TOC: I was all but finished, when I noticed the LAST entry in my TOC is "Text"... It doesn't show in my Storyist list, and when in Kindle, I click on it and it takes me to an image I had inserted earlier in the book. It's actually a book cover that I inserted in promo area for the author's next book. It shows fine where I put it, but why does it re-appear, and why is it called "text" in the TOC?

Thanks!!

Steve... I'm back...

Naturally all software evolves and what worked 6 months ago likely doesn't work the same way now...
I am currently working on another book for the same author who got me started with formatting in the first place... I should kill her now! :)

Anyway, I was trying to refresh my memory with some of the things you'd shared with me back in February, but I noticed my above post was never answered.
My import to Storyist and my export to Kindle worked fine, except for the size of the font for chapter and subchapter. They are quite large...

My question is: Where does Kindle assign font size? Where do I want to "establish" it? In my Storyist style? In the CSS? I don't know what trumps what as to where this should be set.
Any guidance would be appreciated.

Shelley

#24 Steve

    Administrator

  • Root Admin
  • PipPipPip
  • 2,705 posts

Posted 28 September 2011 - 10:06 PM

Hi Shelly,

View Postshellbhawaii, on 28 September 2011 - 09:53 PM, said:

Steve... I'm back...

My question is: Where does Kindle assign font size? Where do I want to "establish" it? In my Storyist style? In the CSS? I don't know what trumps what as to where this should be set.
Any guidance would be appreciated.

You can customize the Kindle heading size by editing the intermediate CSS files and then running kindlegen. To do this:

1) When you export to Kindle, check the "save intermediate files" option.
2) Locate the main.css files. You'll find CSS definitions for h1, h2, and h3 there. This would be the appropriate place to customize the font size.
3) Run kindlegen on the opf file (kindlegen toc.opf) to generate the Kindle file from your edited content.

-Steve

#25 shellbhawaii

    Member

  • Members
  • PipPip
  • 15 posts
  • Gender:Female
  • Location:Atlanta, GA

Posted 28 September 2011 - 10:24 PM

View PostSteve, on 28 September 2011 - 10:06 PM, said:

Hi Shelly,



You can customize the Kindle heading size by editing the intermediate CSS files and then running kindlegen. To do this:

1) When you export to Kindle, check the "save intermediate files" option.
2) Locate the main.css files. You'll find CSS definitions for h1, h2, and h3 there. This would be the appropriate place to customize the font size.
3) Run kindlegen on the opf file (kindlegen toc.opf) to generate the Kindle file from your edited content.

-Steve

Steve, thanks for the speedy response.
You had shared that process with me in the past, and I do that every time, but the font size doesn't seem to change when I change it in the CSS.
I think you once told me there are max sizes, but since what is appearing on the Kindle is so large... I'm confuzzled as to what to do.

The CSS you had given me is below. The intent was primarily to allow me to have an h2 that was italicized and flush left (a style I apply in Storyist, named Location). We set a font size of 13 there, but that doesn't appear correctly either. I've tried setting a font size in h1 (for Chapter, also created in Storyist, not using the default Chapter Title style) as well, but it has no impact. Please know I am doing the KindleGen step and I get a new, converted file, but the Chapter and Location...


h1 {
margin-top: 20px;
margin-bottom: 24px;
text-align: left;
}

h2 {
font-style:italic;
font-size:13;
margin-top: 18px;
margin-bottom: 10px;
text-align: left;
}

h3 {
margin-top: 10px;
margin-bottom: 10px;
text-align: left;
}

/* Table of Contents */

p.toc-heading {
font-size: 2em;
text-align: center;
margin-bottom:12px;
}

p.toc-1 {
text-indent:0;
text-align: left;
}

p.toc-2 {
text-indent:0;
text-align: left;
margin-left: 1 em;
}


ALSO, one quick question: I have deleted all default styles and am using the option to create a new style based on selection.
When selecting text to apply these styles, I see the triangle to the right of the style is red. Why is it red? What is that telling me?

Thoughts? Insights?
Thanks!
Shelley

#26 Steve

    Administrator

  • Root Admin
  • PipPipPip
  • 2,705 posts

Posted 28 September 2011 - 10:36 PM

Hi Shelly,

Just tried the following here with the default Novel template and got a smaller, italicized Chapter title.

h1 {
margin-top: 20px;
margin-bottom: 12px;
text-align: left;
font-style:italic;
font-size:13pt;
}

I verified it in the Kindle Previewer. Note the font size is "13pt" not just "13".

If this isn't working for you, the next step would be to check that the markup (xhtml) actually has the tags you are trying to style.

If the disclosure triangle next to the style is red, it means that the formatting has changed from the formatting defined in the style. If you switch to the Text Attributes tab, the status will show you what is different. The text will read something like "Section Text + italic"

-Steve

#27 shellbhawaii

    Member

  • Members
  • PipPip
  • 15 posts
  • Gender:Female
  • Location:Atlanta, GA

Posted 28 September 2011 - 10:38 PM

Thanks, Steve.
I will try what you sent and get back to you if I still struggle.

As for the red triangle, I thought that was what it would mean. But, it was perplexing to me for reasons I won't go into at this point.
I'll close out this exchange, study my file a bit more, then get back to you.

Again, thanks.
Shelley





1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users