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
Community guidelines
Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.
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 |
|---|---|---|---|---|
| 4 | 202 | 2 months ago | ||
| 3 | 98 | 2 months ago | ||
| 11 | 461 | 3 months ago | ||
| 0 | 52 | 3 months ago | ||
| 5 | 132 | 3 months ago |