Buddypress Shoutbox Colours and BBpress Customizations

[lappanion]

Hi there, is there an easy way to edit the Buddypress and BBpress elements with Kleo, if not where do I edit those colours? I have customized my themes and want to match those elements the overall feel.

Thanks 🙂

[Laura]

Hello, some elements doesnt have an option to color them, but i can helo you with css if you send me a link and the colors you want 🙂

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

[lappanion]

Thanks Laura 🙂

The shout box here: http://treasureclub.com/activity/ (not super sure what colours, was going to experiment with what works from this theme: https://color.adobe.com/Aniwaniwa-color-theme-6319728 to match the site

But there are more buddypress and bbpress locations (like in groups and profile) that I would have to edit too… is there like a global setting or something?

Here is a sample from the forum that I want to edit: http://treasureclub.com/forums/forum/introduce-yourself-here/

Toni

[Laura]

Well the only way right now is with CSS, if you specify me the changes i can help you, but there is not a place to edit those colors

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

[lappanion]

Thanks again Laura!

I would like all member profiles (here is a sample: http://treasureclub.com/members/Toni/) to be edited to color: 3C698C the Button to 5E8FA6

and the exact same in all groups like here: http://treasureclub.com/groups/underwater-treasure-hunters/

and exact same on all activity pages: http://treasureclub.com/activity/

and for the forums it’s a bit more complicated since I guess you would need to be logged in to see all those elements like the background on the create new thread and those buttons on top that aren’t too visible..

Toni

[Laura]

Hello, could you specify what button? Maybe a screenshot? All elements can be changed with css so i need to know which element

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

[lappanion]

I attached you the button 🙂

Toni

[Laura]

Hello, i need an user to see the button 🙂

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

[lappanion]

Sure 😉

user: Laura

pw: Kleo123

[Laura]

Hello, this is the css code for the post update button, let me know if you want to switch the colors

COPY CODE

#buddypress form#whats-new-form #aw-whats-new-submit {
  background: rgb(240, 209, 139);
  color: rgb(19, 37, 48);
}

For the others can you send a screenshot? 🙂

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

[lappanion]

Thank you 🙂

I attached you the screenshot of the shoutbox.

I just paste all this code in my Kleo Child CSS??

[Laura]

Hello, yes in child css.
For the creenshot, what about making the box transparent, taking off the grey so your buttons are more visible and looks more stylish? 🙂

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

[lappanion]

Ahh that’s awesome Laura 🙂

I just previewed it in Google Dev Tools and it does look a lot better indeed! I just don’t know how to proper code this…

Actually if you could help me to me point in the right direction for editing styles in the future on my BP websites that would be great, I used to build simple HTML/CSS stuff like 10 years ago so I am not a total noob but I am having trouble with Buddypress as far as editing things and customizing the looks goes… Maybe you know of a great tutorial somewhere?

Thanks
Toni

[Laura]

Hello, i will make a video tutorial for this soon, but as you have worked with it before, it should be easy for you.
Check out in Elements tab of google dev tools, select the element in the full html ( next to the styles ) and change it as you did, then just copy that code and paste it in Quick CSS
The change you did, if it took effect should have a class and a style
Copy the css code in the dev tab, paste it as i said in Quick CSS and save, if it changes then thats how you should do all styles. If it doesnt try to add an !important before the ;

Buddypress uses css as any other website tool, plugin or script. Just think its a blank html page and you need to give it style, but use the correct class so it takes effect

Remember to clear the page cache in your wordpress using CTR+F5 to preview the changes

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

[lappanion]

This is it :)!

Thank you so much Laura, was just scared to touch those files for some reason 😀

I appreciate your help very much 🙂

Toni

[Laura]

Hello, glad i could 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