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 :)

Please find the information for connexion bellow in the private information field.

I would like to know if it is possible to set the color of the titles on the posts header just below the menu and if it is possible to have a background on it in order to have more readables titles and texts.
Best

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.

Hi Fernando,

Thanks for replying me.

I have tried to add this line at the end of additional CSS but it doesn't work :

/* Modification header */

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

The other modification works well.

Best

Nicolas
Best

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.

Ok, that's fine. Thank you very much.

Best

Nicolas

You’re welcome Nicolas! Glad that worked!