How To Get H1 Chapter Titles To Show Like This?

#1 EuroScribe 10-10-2020, 01:12 PM

EXAMPLE: https://imgur.com/uVySKKY

Hi everyone, I am using Jutoh Plus to create my book and I would like my Chapter Headings to look like the one above. Jutoh Plus allows near complete control over HTML and CSS so I am wondering if I can add a bit of CSS code to H1 section to get them to look like this?

Can anyone help please?

It will be much appreciated.

#2 RbnJrg 10-10-2020, 07:29 PM

Quote EuroScribe

In your .xhtml file write the following:

Code

<h1 class="MyHeading">CHAPTER 1</h1>

and in your .css file write:

Code

.MyHeading { width: 50%; /* or the width you wish */ margin-left: 25%; /* this must be according to the previous width */ margin-right: 25%; margin-bottom: 2em; /* or whatever you like */ color: white; background: lightblue; font-family: sans-serif; font-size: 1.1em; text-align: center;
}

That code should work everywhere.

Regards
Ruben

#3 EuroScribe 10-10-2020, 08:39 PM

Hi Ruben,

It worked brilliantly. I did change the colour and font size a bit but now my epub is really looking perfect.

Many, many thanks.

#4 hobnail 10-10-2020, 09:18 PM

I suspect that the width, margin-left, and margin-right are not what they want; typically what's wanted is for the green box to automatically size itself to the size of the text (with a bit of space/padding/margin on the sides).

I vaguely recall banging my head against this a long time ago and never found a solution.

#5 jackie_w 10-10-2020, 09:58 PM

Quote hobnail

I vaguely recall banging my head against this a long time ago and never found a solution.

If you want the coloured box to match content width you can add a span with padding/colours. Something like this:

Code

<h1 class="heading"><span class="decor">CHAPTER 1</span></h1>
<h1 class="heading"><span class="decor">Chapter One Hundred and Fifty-Two</span></h1>

Code

.heading { font-family: sans-serif; font-size: 1.1em; margin: 3em 0; text-align: center; text-indent:0;}
.decor { background: teal; color: white; padding: 0.5em 1em;
}

#6 Hitch 10-11-2020, 12:12 AM

Quote hobnail

I could swear that you're right and that there's some glitch with that, even with jackie_w's modifications, but...man, it's been too many years since I had my own hands in that sort of code, day-to-day. Something is nagging at my brain.

Hitch

#7 theducks 10-11-2020, 04:58 AM

I never figured out how to make the box automatically fit the text.

You make a box (with or without Borders): Space the contents away from the edge with padding. Colors to taste

AFAIK Outside Margins are the only way to contain a box size

#8 RbnJrg 10-11-2020, 11:50 AM

Quote hobnail

I posted my solution in order that it works everywhere. What you want, it can be achieved with the following code:

1. In your .xhtml file:

Code

<div class="heading"> <h1 class="block">CHAPTER 1</h1>
</div>

2. In your .css file:

Code

.heading { text-align: center;
}
h1 { display: inline; font-size: 1.1em; font-family: sans-serif; margin: 1em auto;
}
.block { display: inline-block; background: teal; color: white; padding: 0.25em 1em;
}

The trick here is to display the <h1> as inline text, so the property "text-align: center" (for the container div) can work. And to get the colored box to automatically size itself to the size of the text (with a bit of space/padding/margin on the sides) is necessary to employ the property "display: inline-block". The issue here is that you need to use margin-left and margin-right as "auto" and that property is not supported by ADE (for epub 2) So, if you want a solution for any reader, you need to use my first approximation.

show attachment »

I attach the respective epub so you can check everything.

Centered Box.epub (2.6 KB, 71 views)

#9 RbnJrg 10-11-2020, 11:54 AM

Quote theducks

AFAIK Outside Margins are the only way to contain a box size

If you want the solution to work everywhere (that is, also in ADE), that's correct. However, if you can use the properties "margin-left: auto" and "margin-right: auto" (not supported by ADE in epub2), then by using properties "display: inline" and "display: inline-block", is possible to contain a box size without employing outside margins. See my previous post.

#10 JSWolf 10-11-2020, 12:18 PM

[QUOTE=RbnJrg;4045768]I posted my solution in order that it works everywhere. What you want, it can be achieved with the following code:

1. In your .xhtml file:

Code

<div class="heading"> <h1 class="block">CHAPTER 1</h1>
</div>

You don't need the excess <div>. Excess code is not a good idea. The style for the h1 class should be chapter.

Code

<h1 class="chapter">CHAPTER 1</h1>

Quote

]2. In your .css file:

Code

.heading { text-align: center;
}
h1 { display: inline; font-size: 1.1em; font-family: sans-serif; margin: 1em auto;
}
.block { display: inline-block; background: teal; color: white; padding: 0.25em 1em;
}

The CSS code should be more like...

Code

.chapter { font-size: large; font-weight: bold; font-family: sans-serif; margin-top: 1em; margin-bottom: 1em;
}

I've managed to cut down a significant portion of code and it does the very same thing. The idea is to keep it simple. The extra code is not simple.

Next » Last » (1/4)

H » F » E-Book Formats» ePub » How To Get H1 Chapter Titles To Show Like This?

Today's Posts | Search this Thread | Login | Register