LAYOUT OF YOUR BOOKS

Each book has many chapters. Each chapter includes a title, chapter code, and HTML content.
This HTML content defaults to Bootstrap3.
Depending on the type of book, Editor needs to adjust the CSS accordingly. Editor can also edit the sample layout of a book chapter.

There are tools available to help create content templates

Default values

If the layout item is blank, its default value is
<body>
<div class='container htmb-content'>
   <div class=content>
     <div class='pageheader' id=((chapterid))>((previous))((next))((chaptertitle))</div>
     <div class='htmbcontent'>((chaptercontent))</div>
   </div>
   <div class=bookfooter></div>
</div>
 </body>
And the default CSS is:
<style>
@import url('https://fonts.googleapis.com/css2?family=Rasa&display=swap');
</style>
<style>
html,body{height:100%;color:#000000;background:white}
.htmb-content *{font-family:Rasa} /* Default font for book */
a{text-decoration:none;color:black}
a.bookmenu{color:DarkViolet}/* link on book-menu */
.htmb-content p {text-indent: 4rem;margin-bottom:1.5rem}
.htmb-content{font-size:1.2em;line-height:150%}
.bookfooter{width:100%;background:#fcfcfc}
.pageheader{background:#f1f1f1;border-radius:1rem;font-weight:bold;text-align:center;margin-top:0rem;color:black}
.next-prev-chapter {border-radius:0.3rem;background-color: #f0f0f0; color:black; text-decoration: none; display: inline-block;padding-left:0.5rem;padding-right:0.5rem;width:3rem}
.htmbtooltip + .tooltip > .tooltip-inner {background-color:Indigo;font-size:135%;text-indent:0} /*hover-dictionary*/
h1{font-weight:bold;font-size:3rem;margin-top:1rem;margin-bottom:4rem}
.content{background:#f9f9f9;border-radius:25px;min-height: calc(100vh - 155px);margin-bottom:60px;}
.htmbcontent{padding:8rem 0rem 1rem 8rem;color:black}
/*Mobile*/
@media screen and (max-width: 599px) {
.htmbcontent{padding:20px 0px 0px 5px;font-size:2.0rem;line-height:120%;}
h1{font-weight:bold;font-size:3rem;margin-top:1rem;margin-bottom:2.5rem}
.content{margin-bottom:50px}
.container{padding:0px}
}
/*Ipad & tablet*/
@media screen and (min-width: 900px) {}
/*Large screen*/
@media screen and (min-width: 1200px) {
.content{margin-bottom:80px}
}
</style>

Recommended for editor

Above is the layout and sample CSS. If you are not familiar with this code, you just need to change the font, font size, color in the CSS section, right on the content editor page of each book chapter.
  • For fonts, please refer to Google fonts, choose a name and replace the default font "Rasa"
  • Use color and palette: Color name, color picker, color-pallet.
    • If you are not familiar with CSS, you can completely refer to this link and this link. Or you just need to edit the available templates, it's in { and } as above.

    ALL SUPPORT

  • First time creating a book with HTMB
  • Layout & CSS for books
  • Menu type (How chapters are displayed)
  • Create "multiple content"
  • List the chapters inside
  • Embed the code"((..))" and readers interact with the book page.
  • Sample HTML data for sutra book
  • Contact or support
  • Privacy policy
  • HTMB is free, is free stuff good?