How can I change the height of the Hero image in theme Quark.
This topic is a split-off of topic How to have the same hero image on all pages (Quark blog theme)
last edited 02/05/21 by pamtbaau
Themes & Styling
Solved by pamtbaau View solution
@matteo, See '/user/themes/quark/scss/theme/_framework.scss': hero-large, hero-medium, hero-small, etc.
And its use ('hero-large') in frontmatter of 'item.md':
TXT
hero_classes: text-light title-h1h2 overlay-dark-gradient hero-large parallax
Thank you, but that does not solve my issue. It tracked it down to the
padding-top: 6rem;
padding-bottom: 7rem;
associated to class hero in theme.min.css
I do not manage to take them out, so I must sill have a misunderstanding on how this css is generated, and from where these informations are taken.
@matteo,
If you don't want to build/compile SCSS, but instead override the generated css file css-compiled/theme.min.css, you can do the following:
- In an inherited theme
- Create file '/user/themes/<my-theme>/css/custom.css':
-
Add the following to 'custom.css'
CSS// Use .hero-medium, or .hero-small, or ... depending on class set // for `hero_classes` in the frontmatter of the page. .hero.hero-large { min-height: 500px; } .hero { padding-top: 6rem; padding-bottom: 7rem; } - Change the values for
min-height,padding-topandpadding-bottomto your liking.
Thank you, this is exactly what I wanted to do. This custom.css file will always override the definitions from the theme I inherited from ?
custom.css is the last css file loaded by Quark or its child themes and will hence override all earlier loaded stylesheets.
last edited 02/06/21 by pamtbaau
Log in to reply.
Suggested topics
| Topic | Participants | Replies | Views | Activity |
|---|---|---|---|---|
| 3 | 251 | 2 weeks ago | ||
| 5 | 319 | 3 weeks ago | ||
| 1 | 310 | 4 weeks ago | ||
| 1 | 348 | 1 month ago | ||
| 4 | 474 | 2 months ago |