The Home Page Text Banner Over the Featured Image

[bcottle-mld]

On the CollectionBuilder Home page, when you upload your featured image, the text banner always goes through the middle of the featured image. Sometimes, depending on the photo you use, this cuts across the faces of those in the picture. Is there anyway to have that text banner raised so it goes across the very top of the featured image (and thus across the very top of the page) instead of through the middle of it? Or at the very bottom of the featured image instead of across the middle of it? I have a feeling that the answer is right in front of me, and I just haven't noticed it, so I thought I would ask it here. Thanks!

[evanwill]

@bcottle-mld moving the title box itself isn't a built in option in the template. You can adjust the image position in theme.yml which in some cases might work for your problem.

To directly change the position as you describe, you can edit the file "_includes/collection-banner.html".
Towards the top of that file (line 9+), find the bit of CSS that looks like:

#home-title-box {
    padding-top: {{ site.data.theme.home-title-y-padding | default: '5em' }};
    padding-bottom: {{ site.data.theme.home-title-y-padding | default: '5em' }};
}

The padding-top and padding-bottom set here is what puts the title box in the middle of the featured image and controls how big the feature is.
If you want it all the way at the top, delete the padding-top: {{ site.data.theme.home-title-y-padding | default: '5em' }};.
All the way at the bottom, delete padding-bottom: {{ site.data.theme.home-title-y-padding | default: '5em' }};.
Or more likely, you might manually set some amount of padding for both, which would look like:

#home-title-box {
    padding-top: 10em;
    padding-bottom: 3em;
}

This code with curly brackets {{ site.data.theme.home-title-y-padding | default: '5em' }} is Liquid setting the size from data in "theme.yml", so you would delete the whole thing between the fancy brackets and replace it with a size. "em" is sizing based on the font size.