Change background color of wall/activity posts buddypress

Hello again :slight_smile:

I am finally almost done with hrdinetwork.com for its launch and there are just a couple of things that I have not yet been able to change…

I would like a slightly different background color for activity on the "wall." Basically, I think I want those posts to have a slightly different background color.

Also, I don't know how to arrange the links underneath the avatar area, where you see "media," "activity," "groups," etc. I would like to align them left as with my widget area I do not have the space for all of them to fit on one row and they are currently justifying right.

Lastly, I have found many solutions right here in your lovely pro forum for customizing the admin bar and I have yet been able to change the color of the text when they are hovered. You can see on my site that the text is still blue when it is hovered and I would like it to always be white.

Thank you so much! You all have been wonderful and I enjoy the support!

  • DavidM

    Hi Mandy,

    Hope you don't mind my working with Jack on this. :slight_smile:

    I believe the following will sort those items for you:

    #buddypress li.activity-item {
        background-color: #f0f0f0;
    }
    
    #buddypress div.item-list-tabs ul li {
        height: 40px;
    }
    
    #wpadminbar a:hover {
    color: #fff !important;
    }

    If you don't already have a solution for adding CSS to your site, you can use a free plugin like this:
    http://wordpress.org/plugins/imporved-simpler-css/

    And I see your other post regarding the BuddyPress button colors was updated here:
    https://premium.wpmudev.org/forums/topic/change-button-text-color-in-buddypress#post-656159

    Oh, the color for the initial item #f0f0f0 is just an example color. You can change that to any color you like. You can user background-color: blue; for example. :slight_smile:

    Could you let us know how that all works for you?

    Thanks,
    David

  • Mandy

    Thank you so much David! You all have been my heroes in crash coursing through buddypress on a deadline!

    One more thing I would like, if you have the time, is to have spaces between the activity and to round the corners just a tad…..

    Also, is there any way to give those item-list-tabs a background color?

    You all are so amazing and I am super happy that I have joined! Your response time is great, your friendliness unmatched and answers on-point!

    THANK YOU!

  • Mandy

    I forgot to ask one more thing…. the area where the status/activity is typed in has a border color that appears when you place the cursor inside the box, is there a way to change the color of that box.

    Lastly, I would like the link that shows the name of the user on their profile/timeline to be the same color as the other links on my site.

    You are all my heroes, thank you thank you thank you! I am getting ready to take a css class so hopefully my questions become less and less frequent :slight_smile:

  • Mandy

    Hi Ari!

    Thank you so much for staying with me on this.

    I granted access again.

    On the menu issue, regarding the one that is under the avatar picture, is there anyway to give a little darker grey behind those tabs so that they appear more like a menu.

    Also, and sorry to be a bother, you can see that on a profile page, like the one for senompson, that I have a "cover" photo or or what is called a "featured image" above the traditional avatar. I would like it to be lower and behind the avatar, like facebook has their cover photo. I know that the code for it is in wp-content/plugins/buddypress/bp-templates/members/single/member-header.php

    Thank you so much for this!

    Basically, creating some space between the background color you all so kindly provided me the code for, that exists behind wall activity, perhaps rounding those corners, creating a bit of a contrasting grey behind the menu items below the avatars, and moving my "cover" photo.

    THANK you guys so so so so much for all of your continued help! It is appreciated and you have a member for life here :slight_smile:

  • Jack Kitterhing

    Hi there @Mandy,

    Hope you're well today and thanks for re-granting access.

    This css should work, `#buddypress #whats-new:focus {
    border-color: #000000 !important;
    outline-color: #000000 !important;
    }

    #buddypress ul.item-list {
    line-height: 50px !important
    }

    `

    For the rounding and also the links, the links seem to be the same color (orange).

    For the rounding I wasn't 100% sure what element you needed rounded, if you could let me know, I'd be happy to help.

    Thanks!

    Kind Regards
    Jack.

  • Mandy

    Hello Jack!

    I was traveling so I apologize for not getting back to you!

    Ok, I was not totally clear in my communication of what I need so I apologize for that.

    Here is what I am looking to do, as the code you gave me does not seem to have changed what I was looking to change.

    I will grant access again too :slight_smile:

    1. Ok, with the activity posts that show up on the wall of users, I would like a space between the activity posts. So, if I post a picture, then I want to be able to have a space between that post and the next status update.

    2. I would also like the status posts to have 20px radius.

    3. Regarding the tabs that you all so kindly helped me to align left, I would like a grey background color to them so that it is clear that they are a toolbar. I guess I am trying to make it look just a tad more organized for the clients who will be using the site.

    4. I have added the ability for a "cover" image, as mentioned above through rt media's plugin. I would like the avatar to cover a portion of the cover photo as facebook does. I know that it is possible as I have seen it done, though I have not been successful in finding a css solution for it as of yet. I would like either that image moved down or the avatar moved up.

    5. When someone enters a status update, the box highlights with a blue border, I would like that border to reflect one of the colors I use on my site. How would I go about changing that?

    6. Lastly, I promise :slight_smile:, I would like to make the link of the name on the profile which is above the avatar to match the remaining link colors of the site. It is currently grey. I am not sure if I can change this in a canvas setting as perhaps it is a title or h1 that I can change the color of there?

    THANK YOU A MILLION for being so wonderful. I missed getting support from ya'll while traveling! I am about to take the tut class for css so hopefully I can hunt down more of these things on my own in the future. 2 thumbs up on your support!

    Pura Vida,
    Mandy

  • aristath

    Hello there @Mandy, I hope you're well today!

    1. Ok, with the activity posts that show up on the wall of users, I would like a space between the activity posts. So, if I post a picture, then I want to be able to have a space between that post and the next status update.

    Add this CSS:

    #buddypress ul#activity-stream.item-list li {
      margin-bottom: 10px;
    }

    You can change the 10px to whatever you want.

    2. I would also like the status posts to have 20px radius.

    Add this CSS:

    #buddypress ul#activity-stream.item-list li {
      border-radius: 20px;
    }

    3. Regarding the tabs that you all so kindly helped me to align left, I would like a grey background color to them so that it is clear that they are a toolbar. I guess I am trying to make it look just a tad more organized for the clients who will be using the site.

    #buddypress div.item-list-tabs#object-nav {
      background: #222;
    }

    Of cource you can change the #222 to whatever you want there. :slight_smile:

    4. I have added the ability for a "cover" image, as mentioned above through rt media's plugin. I would like the avatar to cover a portion of the cover photo as facebook does. I know that it is possible as I have seen it done, though I have not been successful in finding a css solution for it as of yet. I would like either that image moved down or the avatar moved up.

    I'm afraid I didn't see a cover image on your profile so I couldn't do this... Please add a cover image on your profile so that I may find a solution for you.

    5. When someone enters a status update, the box highlights with a blue border, I would like that border to reflect one of the colors I use on my site. How would I go about changing that?

    Try adding this CSS:

    #buddypress #whats-new:focus {
      border-color: #ceaf00 !important;
      outline-color: #ceaf00;
    }

    I used your background color there (the mustard-like color) but you can use whatever you want.

    6. Lastly, I promise :slight_smile:, I would like to make the link of the name on the profile which is above the avatar to match the remaining link colors of the site. It is currently grey. I am not sure if I can change this in a canvas setting as perhaps it is a title or h1 that I can change the color of there?

    This should work:

    article.bp_members h1.title a {
      color: #b34035;
      text-decoration: none;
    }

    I hope that helps!

    Cheers,
    Ari.

  • Mandy

    I am sorry, I forgot to tell you that the profile that has the cover photo is user senompson.

    Thank you for your help with this.

    2. I would like to have a border around each menu "item" on the menu section below the avatar. I added a border around it though I would like the border to be around each item (Wall, Notifications, Friends, Media, etc.).

    3. (I promise this is it) I would also like to change the background color of the submenu that pops up for each menu item ie. Wall>Timeline

    Thank you all. The support is amazing!

    Mandy

  • Michael Bissett

    ...the profile that has the cover photo is user senompson.

    I'm not seeing a cover photo when I go to your profile, I even tried assigning a different image there just in case.

    I would like to have a border around each menu "item" on the menu section below the avatar. I added a border around it though I would like the border to be around each item (Wall, Notifications, Friends, Media, etc.).

    Here's the code you need for this:

    #item-nav li a {
        border: 1px solid black;
        border-radius: 7px;
        height: 24px;
        margin-right: 2px;
        margin-left: 2px;
    }
    
    #object-nav {
        padding-left: 12px;
        padding-right: 12px;
        padding-top: 4px;
    }

    The "border" and "border-radius" properties are the ones that'll govern the look of the border, the rest of it I threw in as a bonus, to make things look a bit more nice (the borders are right next to each other by default, which may not be the look you're going for).

    I would also like to change the background color of the submenu that pops up for each menu item ie. Wall>Timeline

    Change the "white" here to your desired color:

    #subnav ul li.current.selected a {
        background: white !important;
        opacity: 1 !important;
    }

    Hope that helps! :slight_smile:

    Regards,
    Michael

  • Mandy

    Thank you so much for the help!

    Ok, now I just want to do a couple of other things.

    1.) I would like to round all of the buttons to a 20px radius that are within the buddypress framework.
    2.) I would like to create a radius of 20px around the subnav you just gave me code for. It did not work but it might be due to me adding a HEX code for color instead of just using a color name?
    3.) I would like to make all images appear with a 20px radius, media uploads and avatars
    4.) Lastly, is there a way to put a border around the photos on the site including avatars and media shared on the wall?

    Thank you all so much!

  • aristath

    1.) I would like to round all of the buttons to a 20px radius that are within the buddypress framework.

    .button.bp-primary-action,
    .button.bp-secondary-action {
      border-radius: 20px;
    }

    2.) I would like to create a radius of 20px around the subnav you just gave me code for. It did not work but it might be due to me adding a HEX code for color instead of just using a color name?

    From what I can see you've already changed that and it has a 20px radius, bravo! :slight_smile:

    3.) I would like to make all images appear with a 20px radius, media uploads and avatars
    4.) Lastly, is there a way to put a border around the photos on the site including avatars and media shared on the wall?

    You can add a border-radius to all images on your site like this:

    img {
      border-radius: 30px;
    }

    You can even make them all round by using % instead of pixels:

    img {
      border-radius: 50%;
    }

    I hope that helps!

    I'm marking this issue as resolved now.

    Cheers,
    Ari.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.