Hello, I am trying to change the Banner heading, description and button text to hex colour #776e7b.
I found a code to change the background of the button.
Right now, then default is white, and of course with white photos, the text is not visible on the heading and description.
could anyone please tell me the snippet of code I need to add? and where to place it? Thank you so much!
Hi @Rosierose
This is Kate from PageFly - Landing page builder
Please share your store URL and if your store is password protected then please provide password too.
So that we can help you.
Thank you.
url is: https://www.joiedesigns.ca/
sorry, I am not comfortable posting my password on a public platform.
Hi. No password is required. Can you please tell which banner you are talking about on the website?
To change the color of the heading, description and button text to hex color #776e7b, you would need to add CSS to your website’s stylesheet.
.banner-heading, .banner-description, .banner-button {
color: #776e7b;
}
hi, is it the main banner on the home page. I have made the text not visible right now, as it is white on white
Hello. Please enable the text. I will figure out despite it is having a white color. I will give you the code that will change the color of the text.
thank you. I tried adding this both the the end of the bas css and in the custom css.
In both instances, I still have white text. Is there somewhere in particular i should add this?
thank you. text is now enabled again
@Rosierose Please use this code in base or Custom CSS. It will work.
.banner__heading,.banner__text,.banner__buttons{
color: #776e7b !important;
}
thank you. I put it here at the end of the base.css , but am still seeing white text. did I put it in the right place?
got it. it worked once I added it to section-image-banner.css
Next question, any way to move this text down a couple cm’s? Right now it is still a little too centered when in the bottom position
The code is applied correctly. You need to clear your browser cache to see the changes. The heading, text and button are all visible at my end.
Alternatively instead of clearing browser cache, you can open this link and refresh the page. https://cdn.shopify.com/s/files/1/0613/7760/9967/t/17/assets/base.css?v=144944279932224578881676488168. The homepage will display the latest changes then.
Yes, it is possible. Try this code.
.banner__box {
padding: 0rem 3.5rem !important;
}