Baker Theme - Weird Textbox Banner on Web Page

#1

We are using 4 textboxes (blue, green, red and black) at the end of the post when we discuss a court case.

When viewed in the editor, the textboxes look normal.

When viewed in an exported PDF file, the textboxes look normal.

But if you save the post, and then “View chapter”, the banner part of the textbox only goes halfway across the box.

Here is a sample:

https://okcogs.pressbooks.com/chapter/edmondson-v-commissioner-1981/

Any ideas or suggestions?

Thank you.

#2

Hi @reecejr,

You’ve added custom CSS that changes the appearance of this element. The textboxes are inheriting this CSS:

section.chapter header {
      margin-left: 0em;
      margin-right: 0em;
      width: 50%; }

If you remove that width rule, or overwrite it with a rule targeting .textbox header and setting the width to 100% or auto, things should be back to ‘normal’.

#3

This is the only custom CSS I have:

.textbox p, .bcc-box p {
    text-indent: 0em; }

.blockquote, .front-matter blockquote, .part blockquote, .chapter blockquote, .back-matter         blockquote, body#tinymce.wp-editor blockquote {
    font-size: 1em;
}

.fn-blockquote, .fn_blockquote {
   font-size: 1em; }

I changed the text-indent to 0 because the first line of each paragraph was always indented.

I don’t see how any of my custom CSS changed the width of the textbox header.

#4

The custom CSS to which you refer is in the “Theme Ebook Styles (Baker)” for “Web”.

#5

Thanks Reece. You’re quite right – this sounds like a problem with a legacy theme (i.e. Baker). I’ll file a bug report and we’ll fix in a future deploy. In the meantime, you can add this rule to your web custom styles:

section.chapter .textbox header {
width: 100%;
}
#6

Very interesting. It is not in the Ebook or PDF code.

Thank you for you help.

#7

Thank you for your help. It is fixed.

#8

You’re welcome. I think what happened here is that the Baker theme originally had some CSS in the webbook that made section header text 50% width (that’s what gives the chapter titles their half-page effect in webbooks). It’s an older theme, and when we added the ability to make additional textboxes (which also have little header elements in them), we didn’t catch that the CSS rule for the webbook set their width to 50%. It’s easy enough for us to fix, and a patch will come out on in our next release. If you encounter other bugs in the future, please consider reporting them here: https://pressbooks.com/report-a-bug/