Tim_P
June 6, 2021, 11:26pm
1
Hey all, I am Brand New to Ghost and am very much a beginner at coding, so please have some mercy.
I’m trying cusomtize the Hero image to have a plain background color, text and sign up on the left and an image on the right.
What I’ve been able to do is change the hero container color using code injection:
.c-hero__container {
padding: 0px 0;
background-color: rgba(255, 0, 0, 0.3);
background-position: center;
background-size: cover;
}
Which gets me this:
So what I need to do is get rid of the Grey stylized hero that sits underneath the hero color.
Any help is much appreciated!
Add this to code injection
.c-hero {
margin-bottom: 32px;
background-color: var(--bg-gray);
background-image: var(--bg-gradient);
}
and change backgroud-color and background-image according to your preferences.
1 Like
Tim_P
June 6, 2021, 11:43pm
3
What if I don’t want any image? I just want the background to be one solid color?
.c-hero {
margin-bottom: 32px;
background-color: #put-your-solid-colour-here;
background-image: none;
}
1 Like
Tim_P
June 6, 2021, 11:47pm
5
Perfect! Thank you!
One last question; since I am now going with a darker solid color on the hero, I need to change the font to white. Is that a Code Injection as well? Thanks again for the help!
Hi,
You will need to include the following in the code injection:
color: #put-your-text-color-code-here;
And you will need to put it either in .c-hero or .c-hero__container.
I’m not sure what you want it to look like, so I don’t know in which of the two it should go.
1 Like
