PB 5.4.1, McLuhan 2.4.1
The header styles do not appear to have a gradual change in size as was expected by academics for H1-H3:
However, the Open Textbook theme has the expected gradual font size in the headings hierarchy (H1-H3):
1 Like
Addendum - WordPress Theme - Twenty Seventeen Headings Style:
We built McLuhan based on specifications from the client which only included font sizes for headings (<h1>) and sub-headings (<h2>). We’re open to revisiting this in a future release.
a <p> bigger than a <h2>, makes complicate to understand the hierarchy of the content.
The academic heading sizes may align partially with the Open Textbook theme, and completely with the Twenty Seventeen theme. What parts of the CSS do I need to change, to avoid academic authors manually coding a solution?
As an aside: You keep mentioning “academic” but as Ned mentioned, we buil McLuhan based on specifications from the client. The client was ecampusontario. Basically, all academics in the province of Ontario.
Is there a recognized academic standard we’re not aware of?
Regards,
I believe visual aides (i.e., cues) to content separation will bring greater meaning to the consumer (e.g., learner); therefore logically an outline of headings of gradual size relative to level in the hierarchy will enrich textural communications.
As a volunteer helping academics in migration of analog content to a digital environment, I support their request for an expected gradation in heading size. Unlike a word processor, an author cannot select a heading in the PB editor and expect a different font size, as the theme controls the presentation rather than the editor (PB theme template vs word processor basic configurable template).
Hence, I need to know which parts of the McLuhan CSS I need to change to fix the issue, or return to the Open Textbook Theme.
Thanks.
Maybe this Tweet from @SteelWagstaff can help you?
It leads to this code snippet.
https://gist.github.com/SteelWagstaff/a1effb15fc0421911a1e8f1b21fa7862
More info on how you can use that code snippet here:
https://guide.pressbooks.com/chapter/customizing-your-exports-with-custom-styles/
If you really want to go down the road of fixing McLuhan then you should create a child theme. Your theme would inherit McLuhan then you would make your changes there.That’s a lot more work than pasting code into the custom styles editor. In fact, minus the extra features, this is exactly how the Open Textbook theme works:
Examples child themes you can look at for dev purposes.
- https://github.com/pressbooks/pressbooks-clarke
- https://github.com/pressbooks/pressbooks-fitzgerald
- https://github.com/pressbooks/pressbooks-austenclassic
- https://github.com/pressbooks/pressbooks-donham
Regards,
2 Likes
Hey Steve, the heading elements can be selected and made subject to CSS overrides by using the following pattern: .part h2, .chapter h2, .back-matter h2. Replace H2 with whichever heading element you want to target [H1 through H6 are defined in the parent theme]. The .part, .chapter and .front-matter .back-matter selectors help you identify the heading element in the various post types created by Pressbooks.
1 Like
Thank you for the CSS
Status: PB 5.4.2 McLuhan 2.4.1
heading.css - added h1 2.25rem (otherwise h1 would be smaller than rest of headings)
However, the editor displays:
The resulting web view:
In Pressbooks 5.4/McLuhan 2.4 we changed the markup for new educational textboxes so that they don’t use an <h3> for the textbox title. So new textboxes that you add should not have this issue. To resolve it for existing textboxes, maybe try…
- .part h3, .chapter h3, .back-matter h3, body#tinymce.wp-editor h3 {
+ .part > h3, .chapter > h3, .back-matter > h3, body#tinymce.wp-editor > h3 {
font-size: 1.75rem;
}
Thanks for the CSS, perhaps find and replace is another option in conversion of textboxes to McLuhan?
Pressbook’s search and replace is only for things found in the_content
Inline CSS in the_content is strongly discouraged.
But yeah if that’s where your CSS is… then searching and replacing, with regular expressions, can be powerful.
I don’t think this applies here.
Steve–the new markup appear to be structured like this: <div class="textbox textbox--key-takeaways"<header class="textbox__header"><p class="textbox__title">Key Takeaways</p></header><div class="textbox__content"> (that’s an example for the Key Takeaways textbook, some of the classes will be different for different textbox types.
What’s the html markup for one of your old textboxes inserted pre PB 5.4/McLuhan 2.4 (with the <h3> elements in them)? If you include that here, I might be able to help you think up a search/replace command that could find and replace them with the current markup for educational textboxes …
1 Like
thanks - already completed - I applied your heading CSS fix and works fine. With regards to boxes, there were only a few boxes so I modified HTML by searching within webpages, rather than global find/replace. Ah the evolution of standardized boxes in themes.
1 Like
FYI @sswettenham, not sure if you caught this but we fixed the heading styles in McLuhan and Jacobs in versions 2.6 and 1.2 respectively: