Mobileread
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.
Reply 

#2  RbnJrg 10-10-2020, 07:29 PM
Quote EuroScribe
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.

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
Reply 

#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.
Reply 

#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.
Reply 

#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;
}
Reply 

#6  Hitch 10-11-2020, 12:12 AM
Quote hobnail
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.
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
Reply 

#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
Reply 

#8  RbnJrg 10-11-2020, 11:50 AM
Quote hobnail
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.
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.
[epub] Centered Box.epub (2.6 KB, 62 views)
Reply 

#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.
Reply 

#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.
Reply 

  Next »  Last »  (1/4)
Today's Posts | Search this Thread | Login | Register