Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 10-10-2020, 12:12 PM   #1
EuroScribe
Junior Member
EuroScribe began at the beginning.
 
Posts: 3
Karma: 10
Join Date: Oct 2020
Device: Kobo
How To Get H1 Chapter Titles To Show Like This?

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.
EuroScribe is offline   Reply With Quote
Old 10-10-2020, 06:29 PM   #2
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,176
Karma: 4062049
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by EuroScribe View Post
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
RbnJrg is offline   Reply With Quote
Advert
Old 10-10-2020, 07:39 PM   #3
EuroScribe
Junior Member
EuroScribe began at the beginning.
 
Posts: 3
Karma: 10
Join Date: Oct 2020
Device: Kobo
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.
EuroScribe is offline   Reply With Quote
Old 10-10-2020, 08:18 PM   #4
hobnail
Running with scissors
hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.
 
Posts: 803
Karma: 5235364
Join Date: Nov 2019
Device: none
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.

Last edited by hobnail; 10-10-2020 at 08:22 PM.
hobnail is offline   Reply With Quote
Old 10-10-2020, 08:58 PM   #5
jackie_w
Grand Sorcerer
jackie_w ought to be getting tired of karma fortunes by now.jackie_w ought to be getting tired of karma fortunes by now.jackie_w ought to be getting tired of karma fortunes by now.jackie_w ought to be getting tired of karma fortunes by now.jackie_w ought to be getting tired of karma fortunes by now.jackie_w ought to be getting tired of karma fortunes by now.jackie_w ought to be getting tired of karma fortunes by now.jackie_w ought to be getting tired of karma fortunes by now.jackie_w ought to be getting tired of karma fortunes by now.jackie_w ought to be getting tired of karma fortunes by now.jackie_w ought to be getting tired of karma fortunes by now.
 
Posts: 5,584
Karma: 13867344
Join Date: Sep 2009
Location: UK
Device: Kobo: H2O, GloHD, KA1, ClaraHD, Forma
Quote:
Originally Posted by hobnail View Post
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;
}
jackie_w is offline   Reply With Quote
Advert
Old 10-10-2020, 11:12 PM   #6
Hitch
Bookmaker & Cat Slave
Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.
 
Hitch's Avatar
 
Posts: 8,707
Karma: 94771937
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
Quote:
Originally Posted by hobnail View Post
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
Hitch is offline   Reply With Quote
Old 10-11-2020, 03:58 AM   #7
theducks
Well trained by Cats
theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.
 
theducks's Avatar
 
Posts: 25,659
Karma: 35353615
Join Date: Aug 2009
Location: The Central Coast of California
Device: K4NT(Fixed,New Bat.), Galaxy Tab A, Kobo Aura2
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
theducks is offline   Reply With Quote
Old 10-11-2020, 10:50 AM   #8
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,176
Karma: 4062049
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by hobnail View Post
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.

Click image for larger version

Name:	Image1.png
Views:	58
Size:	144.6 KB
ID:	182619

I attach the respective epub so you can check everything.
Attached Files
File Type: epub Centered Box.epub (2.6 KB, 51 views)

Last edited by RbnJrg; 10-11-2020 at 10:56 AM.
RbnJrg is offline   Reply With Quote
Old 10-11-2020, 10:54 AM   #9
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,176
Karma: 4062049
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by theducks View Post
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.

Last edited by RbnJrg; 10-11-2020 at 10:58 AM.
RbnJrg is offline   Reply With Quote
Old 10-11-2020, 11:18 AM   #10
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 59,904
Karma: 56644595
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2O, PRS-650, PRS-T1, nook STR, iPad 4, iPhone SE 2020, PW3
[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.
JSWolf is offline   Reply With Quote
Old 10-11-2020, 12:49 PM   #11
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,176
Karma: 4062049
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by JSWolf View Post
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.
Well, I'm afraid of your code doesn't work. You can't get a center heading with a background colored and ajusted to the heading with your code. In order that <h1> is centered, with a background ajusted to the text, is by means of the property "display: inline". And ¿how do you center that <h1> tag? Please, explain us how to center an inline block.

You wrote what you wrote because you didn't understand my code. Moreover, you didn't read what the OP asked.
RbnJrg is offline   Reply With Quote
Old 10-11-2020, 09:10 PM   #12
theducks
Well trained by Cats
theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.
 
theducks's Avatar
 
Posts: 25,659
Karma: 35353615
Join Date: Aug 2009
Location: The Central Coast of California
Device: K4NT(Fixed,New Bat.), Galaxy Tab A, Kobo Aura2
Quote:
Originally Posted by RbnJrg View Post
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.
Thanks for confirming (that I was not totally out of it ) . I only use EPUB2 (some habit, some older devices.)
theducks is offline   Reply With Quote
Old 10-11-2020, 09:55 PM   #13
Hitch
Bookmaker & Cat Slave
Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.
 
Hitch's Avatar
 
Posts: 8,707
Karma: 94771937
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
Quote:
Originally Posted by theducks View Post
Thanks for confirming (that I was not totally out of it ) . I only use EPUB2 (some habit, some older devices.)
Ditto.

Hitch
Hitch is offline   Reply With Quote
Old 10-12-2020, 07:42 AM   #14
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 59,904
Karma: 56644595
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2O, PRS-650, PRS-T1, nook STR, iPad 4, iPhone SE 2020, PW3
Quote:
Originally Posted by EuroScribe View Post
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.
Are you trying to do this for eBooks for sale?
JSWolf is offline   Reply With Quote
Old 10-12-2020, 06:34 PM   #15
EuroScribe
Junior Member
EuroScribe began at the beginning.
 
Posts: 3
Karma: 10
Join Date: Oct 2020
Device: Kobo
Quote:
Originally Posted by JSWolf View Post
Are you trying to do this for eBooks for sale?
Yes, is there any potential problem with it?
EuroScribe is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Chapter #s or Chapter Titles? bmcox Writers' Corner 33 02-01-2013 07:03 AM
Show total pages of a chapter Silvia_lollipop Kindle Fire 9 01-23-2013 04:13 PM
Ebook chapter titles: with or without chapter number? amoroso Writers' Corner 16 06-14-2011 06:35 AM
PRS-350 Breaks after Chapter Titles Rand Brittain Sony Reader 2 10-25-2010 12:53 PM


All times are GMT -4. The time now is 07:43 PM.


MobileRead.com is a privately owned, operated and funded community.