q-class "backmatter"

[mmpadilla15]

For my plates with extended, I'm leaving in the {{< q-class "backmatter" >}} code and for others that don't have extended text, I'm removing it because otherwise there's a weird gap between the section with the tombstone info and the Exhibitions list.

But I noticed that when I remove that code, it changes the font styling. This is with the code:

And this is without:

How can I ensure the styling stays the same throughout?

[Erin-Cecele]

Hi @mmpadilla15, if you like the styling, then we recommend leaving the {{< q-class "backmatter" >}} shortcode. There should be a way to eliminate the extra space by overriding the CSS with custom styles. That is a similar process to what you did when you removed the title box from the front cover. It is also what you will need to do to resolve the issue you bring up in discussion #483. Have you worked with Inspect Element much? Is there a deployed version somewhere that we could take a look at?

[mmpadilla15]

Hi @Erin-Cecele! Apologies - I've been out on PTO and am just getting caught up.

Of the two stylings, I prefer the one with the "Backmatter," but honestly, as long as they are all consistent, I can go either way.

This is what it looks like if I leave the "backmatter" code in but there isn't any extended text (this is on my hard drive and not in the deployed version):

You can see that EXHIBITIONS is pushed up right to the top of the white box and it looks weird. But as I said, removing the code changes the styling. As some Plates will have extended text and others won't, I just want them to be consistent.

To answer your other questions, I have not worked with Inspect Element nor am I very well versed in CSS so I try not to touch it unless I have to. So any advice you can offer on this and #483 I'd be happy to take!

[geealbers]

@mmpadilla15 I did some testing on our end. If you add this css to your custom.css file, I believe you'll get the results you're looking for:

.quire-page__content .container .content .backmatter h2:first-child {
  margin-top: 0;
  padding-top: 20px;
}

To explain a little bit, in Quire's default styling a margin is being applied to the top of all h2 (second-level) headings. Normally you don't see the gap it creates because the background would be just white. But because you have it at the very top of your content area, the gap is showing the beige background instead.

The CSS here removes that margin just from the first h2 element. To still maintain some spacing though, I added some padding. Margin is the space around the outside border of an element; padding is the space between the border and the content within: https://hackr.io/blog/margin-vs-padding.

Let us know if this works!

[mmpadilla15]

Thanks @geealbers ! Can I add the code anywhere in the CSS or does it need to be in a specific place?

[geealbers]

Good question. In this case it can go anywhere in the custom.css file.

But for reference ...

In CSS the order of rules does matter in that rules at the bottom of the list will override those before it. So in this example .backmatter will end up with a yellow background color.

.backmatter {
  background-color: orange;
} 
.backmatter {
  background-color: yellow;
} 

The other important rule in CSS is that more specific rules will override more general ones. So in this example, the first selector is much more specific, and so .backmatter will end up with an orange background color, as the less specific rule at the bottom will be ignored.

.quire-page__content .container .content .backmatter {
  background-color: orange;
} 
.backmatter {
  background-color: yellow;
} 

[mmpadilla15]

@geealbers Good to know as my knowledge of CSS is pretty weak. Thanks!

[mmpadilla15]

@geealbers It works! Thank you!