how to tint cover photo

[CIDesign_Media]

Hi,
What CSS could I add to tint all cover photos? Groups and Profile cover photos. I would like this to overlay every cover photo:

rgba(0,0,0,0.5);

Thanks!

[sharmstr]

Try this

COPY CODE

body.is-user-profile #item-header-avatar {border-width: 6px;}
body.is-user-profile .profile-cover-inner {
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.5) 100%, rgba(0,0,0,0.5) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(100%,rgba(0,0,0,0.5)), color-stop(100%,rgba(0,0,0,0.5))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.5) 50%,rgba(0,0,0,0.5) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(0,0,0,0.5) 100%,rgba(0,0,0,0.5) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(0,0,0,0.5) 50%,rgba(0,0,0,0.5) 100%); /* IE10+ */

    background: linear-gradient(rgba(0,0,0,0.5) 100%,rgba(0,0,0,0.5) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
}

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

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[maelga]

Hi sharmstr,

This works well until one click the “Show Less” toggle in the top right corner of the profile page.
Then the tint disappears. The tint then reappears when clicking “Show More” as the cover gets back to its original size.

I have been playing with my css but can’t get it solved.
Any idea how to fix this?

[sharmstr]

try adding this class to it body.is-user-profile.bp-header-small .profile-cover-inner

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

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[maelga]

Thanks sharmstr.

It works great, except for Groups when users are NOT logged in. When users are logged in it works.

Do you have a quick css fix for this?

[sharmstr]

For some reason, the devs wrote the code so that the .profile-cover-inner div is only created on the groups page when a user is logged in. Without that div, there’s nothing to apply the tint to. I’ve copied them on this topic to see what they say. In the meantime, you can go to /plugins/buddypress-cover-photo/group-cover and remove the following lines (starting around line 65)

COPY CODE

if ( ! is_user_logged_in() ) {
                return;
            }

Again, I dont know why it was coded this way, so it may cause issues to change it. I did some basic testing and it seems okay.

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

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[maelga]

Thanks again.
Ok I see.
May be some legacy code lost from a previous version.

[Abe]

Thanks you @sharmstr, you are a star 🙂
I will change that also in the wordoress repo but until then you can grab the change from github
https://github.com/seventhqueen/buddypress-cover-photo

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

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[Author]

Posts