Quark: How to change display height of Hero image

Support Themes & Styling
1

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)

2

@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’:

hero_classes: text-light title-h1h2 overlay-dark-gradient hero-large parallax
3

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.

4

@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’
    // 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-top and padding-bottom to your liking.
5

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 ?

6

custom.css is the last css file loaded by Quark or its child themes and will hence override all earlier loaded stylesheets.