Changing the background of buddypress

Support
#1

hey all. I know this is a simple CSS thing for the Avatars of Apex™ :slight_smile:

Would someone please let me see how I can change the background of my buddypress (which is skinned through the Youzer plugin) to a background graphic while keeping the inner containers semi-transparent, like on this page?

Like, setting it so the BP pages (Activity, Groups, Profile, etc.) all have a particular background picture and that the containers for the content have that semi-transparent thing like it shows at the top of the page I just mentioned.

I know this is a small thing for a CSS wizard, I’m just not sure where to look to find what classes or parameters to change. Would very much appreciate some help as it’s really part of our design and we’re opening the site :slight_smile:

#2

Hello Peter,

Thanks for writing in!

Can you please share the exact page URL where you have implemented BuddyPress? I tried looking but I am unable to find the same. To avoid any confusion and for accurate CSS code regarding changing the background on BuddyPress pages, please share website URL.

Thanks.

#3

Hello Peter,

Do you want something like this?

If that is the case, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.page-template-template-layout-full-width .x-root .site, 
.page-template-template-layout-full-width .x-root .x-site,
.page-template-template-layout-full-width .x-container.main:before {
    background-color: transparent !important;
}

Please let us know if this works out for you.

#4

that didn’t do anything. Also, I’m not wanting it through the whole site. Only on the buddypress pages. Activity feed, profile, groups, etc. I want the semi-transparent texture above the starfield background on the buddypress pages, yet not all over the site.

this is the buddypress (though You have to log in with the username I gave in the secure note) --> https://www.intothemythica.com/mythos

#5

Hey Peter,

The given code is for the page using Layout - Fullwidth only.
Do you meant like this one:

You can use this code:

.buddypress .yz-page {
    background-color: transparent;
}

Please let us know how it goes.

#6

that doesn’t seem to be doing anything. What I’d like is to put this image in the background of the buddypress activity, profile, groups etc. pages with the currently white containers having a different RGB level opacity.

So I want this image as a background on the BP pages -->

and this opacity on the white boxes that hold the content (activity updates, posts, etc.)
rgba(255, 255, 255, 0.8)

So that it looks consistent with this -->
CloudApp

#7

Hey Peter,

Thank you for the detailed write-up. To achieve this, try adding the following code in the Theme Options > CSS:

body.buddypress {
    background: url(https://intothemythica.com/wp-content/uploads/2018/10/IMG_1706-1.jpeg);
}
.yz-page {
    background: transparent
}
body.buddypress .backstretch img {
    display: none;
}
.buddypress .item-list>li {
    background: rgba(255, 255, 255, 0.8)
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#8

That looks like it should work, yet for some reason it didn’t.

I put a secure note with a login if that helps. Thank you so much

#9

Hello Peter,

Please apply the custom css given by @Nabeel in his response above and you’ll have this:

Please let us know how it goes.

#10

that looks great. I added the code, but it didn’t work on my end. Confused.

#11

Hi Peter,

I went to Pro > Theme Options > CSS and added the code below:

html body.buddypress {
    background: url(https://intothemythica.com/wp-content/uploads/2018/10/IMG_1706-1.jpeg);
}
body.buddypress .backstretch img {
    display: none !important;
}
.yz-page {
    background: transparent
}
body.buddypress .backstretch img {
    display: none;
}
body.buddypress .item-list>li,
body.buddypress .youzer-sidebar .widget-content,
body.buddypress #yz-wall-nav,
body.buddypress  #yz-wall-form,
body.buddypress .yz-wall-content {
    background: rgba(255, 255, 255, 0.8)
}

That did the trick, but please consider that you may need to add additional code to make it perfect and you might need to check other pages to see if it applies correctly. In general, please check the CLASS of the BODY tag to find a common theme to apply the CSS. I found .boddypress a good match but it might be different on other pages.

I’m sure you will understand that we can not go for all pages and do micromanaged CSS fixes to achieve the effect you want. We will be more than happy to help you find the correct classes or IDs if needed. Also, we will be happy to explain what the CSS code we offered does. This way, you will get a grasp of the details for the future implementation.

Thank you for your understanding.

#12

You all are amazing. I both know you can’t do micromanaged CSS for me and deeply … DEEPLY appreciate the help. X-Theme / Apex has always been there with the graciousness.

Obviously, not everyone can focus their energies into CSS, and I’ve been doing the design of a humanitarian project for the past decade, so every little bit helps.

Yes. I would like to know what the CSS code offered does and how to fin the correct classes & ID’s.

To get her market-ready, I could use one more .php assistance thing, if that’s not too much to ask. It’s … it should have worked, but I wonder if the youzer plugin has done something to the buddypress pages and they are now functioning with a different class/ID.

This is the code I got -->

/**

  • Add slider at top
    /
    /    *
    function buddydev_add_slider() {
    echo do_shortcode( ‘[rev_slider alias=“atlasofstory”]’ ); // Replace shortcode with your one
    }
    add_action( ‘bp_before_directory_activity’, ‘buddydev_add_slider’ );
    */

I would to have a slider appear at the top of the activity feed in buddypress, yet not on the other feeds. Yet the code doesn’t work currently. Is it a syntax thing?

Is there a way to allow the X-Theme integrated drop-down Slider Revolution to work in buddypress activity page? My sense is that it requires the php so I’m investigating this.

note - I know technically this is another thread yet it feels so relevant. It’s … Slider Revolution 6 just came out. Really putting all my design sense into seeing how to create a fantastic slider for the social network. please help me make that code work so I can assign a slider to the Activity Feed :slight_smile:

Thanks!

#13

Hi Peter,

Thank you for your kind words.

Regarding the CSS code:

  • The most important part which restricts the given code to only BuddyPress was the usage of the body.buddypress as the beginning of the selector. That section says, check the body tag and make sure it has the buddypress class. As a matter of fact, BuddyPress adds that class on all its pages.
  • The rest of selectors are a matter of checking with the Google Chrome Developer Toolbar to find the correct one. Kindly click here to find out more about the tool.

Regarding the Slider:

You are correct that this needs to be handled as a separate thread. I am afraid that the answer might need a follow-up, and that will start the confusion. I will do my best to answer this with no need to follow up, but if you need to follow up kindly open up a new thread and we will be more than happy to help as our goal is to serve our awesome customers.

I suggest that you look at the matter from the theme point of view. Try to add the code in one of our theme hooks and just restrict it for the activity stream. I suggest that you add the slider below the masthead. The other point is that it seems RevSlider 6 has another method to call the slider in PHP. The result should be this:

function bp_slider_below_masthead() {
	if ( bp_is_activity_directory() ) {
             add_revslider('atlasofstory');
	}
}
add_action( 'x_after_masthead_end', 'bp_slider_below_masthead' );

I do not have BuddyPress installed, so I could not test this in my local installation. If it does not work, kindly open up a new thread and provide us with the login information and FTP information so that we can test the case on your installation. Also, please give us the exact URL of the activity stream there.

Thank you.

#14

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.