Resize hero height

Support Themes & Styling
1

Hi guys,

I tried to search here, googling and essentially is 2 days that I’m playing with it and beating the head against the wall…

I created I theme inheriting from Quark, following the guide. It works and I was able to customize some of the templates. Just an example:

bozzo@MacBook-Pro:herd-grav> diff user/themes/quark/templates/partials/hero.html.twig user/themes/my-quark/templates/partials/hero.html.twig 
5a6,7
>     {% if page.header.hero_noarrow %}
>     {% else %}
6a9
>     {% endif %}

to remove the fa-angle-down arrow in the hero if hero_noarrow: true is set in the yaml part of a page.

I was also able to change some defaults using user/themes/my-quark/css/custom.css but not all of them.

In particular I wanted to change the height of the hero image “hacking” the “hero-tiny” option. I added, to custom.css:

.hero.hero-tiny { min-height: 1rem; }

but I’m not able to change the default size.

Where I’m wrong?

Thanks,
Matteo

2

@bozzochet, As far as I can see, the different hero-* classes only set a different ‘min-height’.

If you want a maximum height for either of the classes, you could add a ‘max-height’ and see how that works out for your site.

3

I really feel myself idiot… I was thinking “min” was the size if the title was not requiring it to be bigger.

Thanks!
Matteo

4

@bozzochet, Be aware that the .hero class sets quite large vertical paddings (6rem/7rem) which may force the display to be bigger then the max-height.

5

Yes,

now that I understood:

.hero.hero-tiny {
    max-height: 0px;
    padding-top: 5em;
    padding-bottom: 0px;
}
6

@bozzochet, I have no idea how your page needs to look like, but ‘max-height: 0’ seems quite useless.

The height of the hero is now entirely defined by its padding and its inner elements and will expand the hero element beyond ‘max-height’

7

Ciao,

maybe I have to put the size of “h1” (3rem?). What I wanted is this:

image
image2992×720 245 KB

Ciao,
Matteo