SOLVED: Theme styles also applyed to header and footer

Bugs
1

Ey there,
when i create and apply a theme style to a page, the same theme is also applyed to header and footer (that are different templates) and also to template (inserted with the template element). It is intended? It looks like a bug, please check here
https://chaosleague.org/miskatonic-university-guida/

Thanks!

2

Hey anyone could help with this? Thanks

3

Hi Andrea,
Thanks so much for your report!

You have styled your headings using the Theme Styles exclusively - which is the right approach if you want them to be the same everywhere all across the site.

However, if you create new Theme Styles for a single page and change the fonts for the body and headings, they will naturally apply in the header and footer as well.

Example default Theme Style:

 body {font-family: "Poppins"; font-size: 26px; font-weight: 400}
 h1 {font-family: "Poppins"; color: var(--bricks-color-vnpfag); font-weight: 800; font-size: 81px}
 h2 {font-family: "Poppins"; color: var(--bricks-color-vnpfag); font-weight: 700; font-size: 85px; line-height: 1.1}
 h3 {font-family: "Poppins"; color: var(--bricks-color-hpplyr)}
 h4 {font-family: "Poppins"; color: var(--bricks-color-xgrybt); font-weight: 400; text-transform: uppercase}

Example Single Page Theme Style:

 body {font-family: "Crimson Text"; color: var(--bricks-color-nzrbpg); font-size: 2em; line-height: 1.3em; font-weight: 400}
 h1 {font-size: 4.6em; line-height: 1.2em; color: var(--bricks-color-nzrbpg); font-family: "The Crow Regular"; font-weight: 600; text-shadow: 1px 1px 6px var(--bricks-color-nzrbpg)}
 h2 {font-family: "Crimson Text"; font-weight: 600; font-size: 2.2em; line-height: 1.2}
 h3 {font-family: "Crimson Text"; color: var(--bricks-color-nzrbpg); font-weight: 600; font-size: 1.5em; font-style: italic; line-height: 1.2em}
 h4 {text-transform: uppercase; font-size: 1.4em; font-family: "Crimson Text"; font-weight: 700; line-height: 1.2em; letter-spacing: 2px}

As you can see, the selectors (body, h1, h2, h3, …) are identical.

To get around this, you should style your elements in the header and footer more explicitly - either by styling directly on the ID of the respective element or by using a class.

Best regards,
timmse

1 Like