By “ribbons” are you referring to the white sections on the home page?
Go to WP-Admin > Appearance > Customize and place the following code in the custom CSS box:
.focus,
.latest-news,
.our-team {
background-color: rgba(0, 0, 0, 0.5);
}
No, “Ribbons” as in Ribbon Sections w/ buttons – there is a red one and a green one.
The CSS class of the green one is separator-one and the red one is purchase-now.
So the code to change their background colours would be:
.separator-one {
background-color: rgba( 255, 255, 255, 0.5 );
}
purchase-now {
background-color: rgba( 0, 255, 255, 0.5 );
}
The fourth value of rgba() decides the transparency, 1 being completely opaque and 0 being invisible.
Use this website to get the RGB colour values of your choice – http://www.colorpicker.com/
Thank you, pastorstevehcf for starting this and Jesin A for your replies. Helpful for future customizations.
A related question:
I have managed to replace the (Green) Ribbon (or “separator”) background from the default colors to an image.
However, the height of the Section became narrow—almost half the size of the default Green background.
May I know which code I should change to adjust the height of this section please?
Appreciated.
@admink-ubm Please post your site URL.
Hi @jesin A,
It’s currently a work in progress to test Zerif Lite demo but if this image image helps, where it says [A] is Zerif Lite “RIbbon” (or “separator-one”) Demo and [B] is my attempt at replacing it with an image, I hope it clarifies my query above.
Thank you.
PS.
I just got a reply from Hardeep on a similar Ticket I posted on ThemeIsle’s Zerif Lite Forum which seems to address this inquiry (posting this ahead and I haven’t tried it yet, though).
WIll update.
Thanks!
