BuddyPress profile cover background

[andrewseptember]

Hi!

I’m using Kleo theme, and I’d like to change the way the cover image appears in buddypress profile page.

In buddypress profile page, before the cover photo is loaded I see a gray gradient background first for a short time, and then the cover image shows up. How can I change the gray gradient to something else ? Could you help me with that please?

[Laura]

Hello, something like what? 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[andrewseptember]

Hi! Well, I’d like to change it to blue. Shall I use Theme options/styling options, which settings? Or will I have to redefine some settings in body.is-user-profile .profile-cover-inner that I found in several files, for instance, in
wp-content\themes\kleo\assets\css\combined.css wp-content\themes\kleo\assets\css\combined-and-fonts.css
wp-content\themes\kleo\assets\css\plugins.css wp-content\themes\kleo\assets\css\plugins\bp-cover-photo.css
wp-content\themes\kleo\assets\css\plugins\bp-cover-photo.less
I am a new to Kleo and to web design too, so these kind of things are not clear to me right away 🙂

[Laura]

Hello, if the styling section of theme options is not enough just tell me which changes you need and i will give you the code 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[andrewseptember]

I need to change the color of the grey gradient background which appears just before the buddypress cover image is loaded to blue #3f51b5. I attached a screenshot with the grey gradient that I want to change. Thank you in advance! 🙂

[Laura]

Hello, this is the css you need, change the color as you prefer 🙂

COPY CODE

body.is-user-profile .profile-cover-inner {
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.45) 100%) !important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(35%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.45)))!important;
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.45) 100%) !important;
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.45) 100%) !important;
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.45) 100%)!important;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 35%, rgba(20, 195, 234, 0.45) 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#a6000000', GradientType=0) !important;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[andrewseptember]

Thank you, Laura!

[Laura]

Glad to help 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Author]

Posts