[Resolved] Homepage : settings for the header

Hi Nicolas,

Any chance you can link us to the site in question and point us to where we should be looking at?

You can use the private information field.
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know 🙂

Hi Nicolas,

To alter the color of the Post Titles in the Page Hero of your front page, here’s a CSS code you may try adding in Appearance > Customize > Additional CSS:

body.home .page-hero .wpsp-content-wrap header h2.wp-show-posts-entry-title > a {
    color: rgb(247 247 0);
}

Then, to alter, the background of these entries, in Appearance > Customize > Additional CSS, look for this code:

.wpsp-card .wpsp-content-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 5% 8%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.35);
    background: -webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(80, 50, 50, 0.5)), to(rgba(0, 0, 0, 0)));
    background: linear-gradient(0deg, rgba(80, 50, 50, 0.5) 30%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}

You’ll see a CSS rule for the background. The 0.5 value is the opacity of the bottom color of the background. The 30% is the height where this color changes to transparent. Changing these values will lighten or darken, and increase or decrease the height of the background.

For instance, try replacing the entire code with this:

.wpsp-card .wpsp-content-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 5% 8%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.35);
    background: -webkit-gradient(linear, left bottom, left top, color-stop(50%, rgba(80, 50, 50, 0.9)), to(rgba(0, 0, 0, 0)));
    background: linear-gradient(0deg, rgba(80, 50, 50, 0.9) 50%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}

I simply replaced 0.5 with 0.9 and 30% to 50%.

Kindly see the difference: https://share.getcloudapp.com/6quzx5EX

Hope this helps! If you’re referring to something else, kindly let us know.

I see. There seems to be a line of code causing an issue. Specifically, this line above the new code:

.tribe-common .tribe-common-h7, .tribe-common .tribe-common-h8 a

It’s an incomplete CSS code which may probably be the reason why the new code you added isn’t working. Can you try removing it?

Kindly let us know how it goes.

You’re welcome Nicolas! Glad that worked!