Change buddypress stream background colors

[mtgame21]

On the buddypress activity/wall stream, I would like to have a background color for the primary posts and then a different background color for the comments or replies to that post.

When I use the CSS below, it changes the background for both sections

#buddypress ul.item-list li {
background-color: black;
margin-bottom: 20px;
}

What is the CSS to change the color for each section individually? Thanks

[Radu]

Hi,

Use this css

COPY CODE

#buddypress ul.item-list li {
background-color: black;
margin-bottom: 20px;
}

/* Level 1 comment */

#buddypress div.activity-comments ul.has-comments li {
    background: yellow;
}

/* Level 2 reply comment */

#buddypress div.activity-comments ul.has-comments li ul li{
    background: red !important;
}

/* Level 3 reply comment */

#buddypress div.activity-comments ul.has-comments li ul li ul li{
    background: green !important;
}

Cheers

Radu

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

What support service includes ? What not ?

[mtgame21]

Hi,
No luck on the above.

For lines 9,15,21, I also tried changing background to background-color. Also tried adding !important to line 8.

Everything stays the default color selected in line 2 above. I’ll keep trying.

[Radu]

I’ve tested and builded the css live on your website and it works, try to put the css in to wp-admin -> theme options -> general options -> quick css

Cheers

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

What support service includes ? What not ?

[mtgame21]

Ok, I did some more testing. I added the updates you gave me to my styles file. Then, cleared cash and refreshed the page. The backgrounds for the existing posts/replies on my stream did not change. Therefore, I didn’t think it was working.

However, then I started adding new comments(level 1 comment) and then (level 2 reply) to one original Post. Each time I added a level 1 comment, the background stayed black (should have turned yellow) until I added a level 2 reply. Once I added a level 2 reply (which correctly displayed red background), it then updated the backgrounds of the previous level 1 comments to yellow. Then, if added more level 1 comments, they would correctly have the yellow background.

So it seems the background colors only get updated after a level 2 reply is added. In addition, when I refresh the page, they all revert back to the black background. Then once I make another level 2 reply, the comments and replies get updated with the correct colors again.

In the end, all I’m really shooting for is two backgrounds colors just like facebook. The original post background will be one color and then every level 1,2 or 3 comment will be the same color. That way if you are scanning through your wall posts, its easy to read. However, for testing purposes I like using your colors for now.

[Radu]

Hi,

Where you have pasted the css ? in quick css from theme options ? or in child theme style.css ?

Do you have any speed optimization plugin ? maybe the plugin moves some resources to the footer and it overwrites this css from head

Let me know

Cheers

Radu

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

What support service includes ? What not ?

[mtgame21]

I posted it in my child themes style.css. Also, I can try it in the quick CSS section if you want me to.

I do use the WP Super Cache Settings plugin. I will test it on my localhost copy that doesn’t use that plugin to see what happens

[mtgame21]

On my localhost duplicate copy of my website, I put the css code in both styles and also the quick CSS section and got the same results.
Which is, only after I add a level 2 comment do the backgrounds change color. And then when you go to another page and then back to it (or refresh the page), the backgrounds all go back to black.

[mtgame21]

In the meantime, while I continue working on that problem, how could I move the “post” button in the attachment up to the same line as those icons. See the arrow I drew in the pic.

Attachments:

You must be logged in to view attached files.

[Radu]

This reply has been set as private.

[mtgame21]

This reply has been set as private.

[Radu]

This reply has been set as private.

[mtgame21]

Outstanding work. Appears to be working on my initial testing on the live site for now. Thanks.

I’m not worried about this because I will be making a new local clone again, but the odd thing is I put the same code on my localhost version of my website and whole stream becomes transparent (cant see anything or text) or I can add a new post but once I refresh the page, it disappears. Only know its there if move the mouse over it.

Is there an CSS fix for moving that “post” button up. See pic above. I tried making the box that holds the 3 icons smaller to give room and then I tried making the box that holds the button smaller, but that just shifts the button position to the left corner.

[Radu]

This reply has been set as private.

[mtgame21]

This reply has been set as private.

[Radu]

This reply has been set as private.

[mtgame21]

Yes, that worked. We can close this resolved. Thanks again.

[Radu]

Great

You’re welcome

Have a nice week

Cheers

Radu

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

What support service includes ? What not ?

[Author]

Posts