[Support request] Blog Title Treatment Similar to Dispatch

[Dave]

Hi There,

Is there a way to mimic the blog heading treatment that Dispatch uses, without actually using Dispatch? Wondering if there’s some PHP or CSS code I could use to create something similar. Screenshot of the treatment I’m talking about is below.

http://stag.irreverentgent.com/wp-content/uploads/2019/10/Screen-Shot-2019-10-09-at-11.35.22-AM.png

Ideally I’d like to know how to make this the default treatment for blog posts, but also have the option of not doing it on certain posts as needed.

Thanks!

Dave

[David]

Hi there,

Dispatch uses the Header Element to display the Featured image, title, and post meta:

https://docs.generatepress.com/article/header-element-overview/

It can be set to display dynamically using the Display Rules settings.

The only extra part is a little CSS that adds the box shadow for better contrast.
To do that edit the Header Element for the posts, and within the Element Classes field add overlay and then add this to your CSS:

.page-hero.overlay {
    -webkit-box-shadow: inset 0px -180px 83px -15px rgba(0, 0, 0, 0.75);
    box-shadow: inset 0px -180px 83px -15px rgba(0, 0, 0, 0.75);
}

[Dave]

Great, thanks David. One more question: I actually want to float my title in the middle of the image, rather than at the bottom, as you can see here:

https://stag.irreverentgent.com/mens-casual-boots-to-wear-with-jeans/

I can’t quite figure out how to customize the CSS you provided to make the shadow float in the middle over the title and byline. Are there different values I can input for that?

Thanks again,

Dave

[Leo]

Looks like it’s already in the middle of the page hero?
https://www.screencast.com/t/Krs5aBOqSVPo

The position of the page hero content is determined by the top and bottom padding:
https://docs.generatepress.com/article/how-to-create-a-page-hero/#step-5-position-the-content

Let me know if this helps 🙂

[Dave]

Sorry, should have clarified. The title is in the middle, but the CSS that David provided me puts the shadow on the bottom of the image. I tried tweaking the CSS to move the shadow to the middle as well, but couldn’t figure it out. So, looking for tweaks to the below code that will run the shadow across my h1 title and byline, not along the bottom of the image.

.page-hero.overlay {
-webkit-box-shadow: inset 0px -180px 83px -15px rgba(0, 0, 0, 0.75);
box-shadow: inset 0px -180px 83px -15px rgba(0, 0, 0, 0.75);
}

[Leo]

Don’t think you can use box-shadow for that unfortunately.

You can try to tweak the code to your liking using this site:
https://www.cssmatic.com/box-shadow

[Author]

Posts