BuddyPress.org

2.) Then when altering configuration (i.e. adding add_filter( ‘bp_email_use_wp_mail’, ‘__return_true’ ); to BP_Custom), and testing again, the emails output a combination of WP Better Email and the default template with various CSS Styles altering different parts of the email with each new email sent.

BTW, this is exactly what I expect to happen. The content from the plain text version of the email from BuddyPress into the template provided by, in this case, WP Better Email.

If you’re saying extra CSS is getting involved, I strongly suspect you have some other plugin or theme component adding extra junk.

OR

You can add these styles to your theme css file:

#members-all{display:none}
#buddypress .profile h4{display:none}

I don’t know which theme you’re using so I can only offer some basic, general css advice.

The numbers are in a table column, each number is in a table cell. In the html the table cell is written as <td>

I’m not sure if you can or will want to remove the numbers column entirely, there may be some buddypress inserted code in there (#id’s, etc) that helps identify each row <tr> for a buddypress function.

What you can do is make that column narrower or possibly hide it from displaying on screen while keeping the (possibly) important code in place.

With Firefox or Chrome right click on a cell and choose ‘inspect element’.

This will show you the html code in that area.

You want to find the cell <td> that wraps around the numbers then identify its class. There may be a couple of different classes in each <td> that buddypress inserts.

To help find which class you want to work with add a background-color: red; to different classes til you find the right one that applies to all cells in the column.

(if you cant find a class that applies to only the numbers column you will need to get into a little more complex css using nth and similar methods)

Once you find the right one open your themes style.css file and place on the bottom of it the class with your new styles.

Try something like ..

.className {visibility: hidden;} to hide it

or

.className {width: 10%;} to adjust it’s width relative to the overall width. (would want to adjust the other columns cell widths to compensate. may also be some other elements within the cell with their own widths set.)

There are numerous ways to target those cells for styling and different things that may prevent the above ideas from working but I’d better leave it at that for now.

@mrunal2989 the easiest way to center the registration page to select the full-width page template (instead of the Default Template) of your theme from the “Register” page Page Attribute box and then use CSS on the #buddypress wrapper to center the registration page. e.g. add

#buddypress {
     width: 90%; 
     margin-left: auto; 
     margin-right: auto; 
} 

to your theme’s stylesheet.

HI ! I have the same problem … I understand what coeycoey writes , here is the explanation ;

Add BuddyPress Styles to a Theme

Everything is great and everything works , just does not appear cover image … ??? any Solution ?

Ok, let’s try something different.
Add a file called functions.php to child root
/child/functions.php
Copy/paste this, including php tags

<?php
// enqueuing the child to parent - don't remove */
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

/********************** CUSTOM STUFF **********************************/

// other custom function

?>

Inside child’s BuddyPress folder, you can remove anything except CSS and JS folder.

buddypress.css contains all styles used by BP.

I also use a cache plugin that is not caching for logged in users.

If i understand this correctly, it means that if i visit your site without being logged in, i get a page from the cache, right ? This means logically that you have to be logged in while testing your change. And finally, it could be possible that non logged users see (it’s an example) a black title (cached) and logged-in user see a red title (the most recent, not cached, version of the new style applied to that page). Hum…

When you use a child-theme, and his mandatory style.css, the child has priority over the parent theme, and buddypress.css.

Child theme is the only safe strategy to get your customization without loosing your work at each update. You add to it only what you want to modify. Even if you need to change only 2 title styles.
In your case, you need only a style.css with a rule or two for your titles. You don’t have to add template files.

is it possible to find somewhere already created templates with different color profiles

A template is a structure of different HTML tags and some php code for dynamic content.
A theme is a design applied to this armature.
A content is what is showed inside the structure.
HTML is used to build the structure
CSS is used to build the layout/design
Content is text, images, videos, etc
PHP is a coding language to build dynamic pages between a database and a server.

BuddyPress template files are stored in wp-content/plugins/buddypress/bp-templates/bp-legacy/buddypress

Unfortunatly for you, the theme is a premium one for which we can’t provide support, as we have no access to his code and can’t install it to test without using a licence.

See theme doc for information about child theming it and other advice for adding custom CSS.

hi @kostasbarkas30,

i even tried to copy some functions from bp default theme in my functions php theme but still nothing.

Revert back to the original install by deleting that custom work. then follow @djsteveb advice.

Keep in mind that you should never install something on WordPRess before WP is working correctly. Same thing when you add, let’s say BuddyPress. In this case, WP and BP should work flawlessly together. Once you hace the built your house, you can add the wallpaper. OMG ! Like IRL ! 😉

That way, it’s much easier to debug if an issue occurs. 1 is ok, add 2. 1 & 2 are ok. Add 3. 1 & 2 & 3 are ok, and so on.

Note also that BP-Default theme is no more maintained and is only in for backward compatibility. BuddyPress works on slightly any theme !

BP has no theme, just some templates with minimal styles. This stuff is stored in bp-templates/bp-legacy/buddypress/. If you need to modify some theme functions, you do it from within a child-theme, in which you copy what you want to change from bp-legacy.

All this and more, is explained on Codex. Don’t hesitate to read through it, if you’re new to BP !

We all started a day. Rome wasn’t built in one day. It’s a Long Way to Tipperary . Facebook is unique and BuddyPress is great. Hold on, it’s just the begin ! 🙂

@jld142 Based on title of this topic, you only want to change the styling aka CSS. If that’s the case, you do not need to add any BP folders/files in your child theme. Just override the style in your theme’s style.css file or whatever stylesheet is enqueued in your premium theme.

If however, you want to change the markup or functionality in some form or the other, then you’d have to look at https://buddypress.trac.wordpress.org/browser/tags/2.3.2/src/bp-core/bp-core-widgets.php#L22 and make the fix in your child theme’s functions.php – no need to copy over any BP folder.

@kjgbriggs – setting up a child theme is just a way to essentially make a new theme – using another “parent” as your template. When you activate, it’s just ONE theme that it handling everything for your wp/bp site.

You do no provide enough details about your theme names, and what you like about the main one and the one that ‘looks better with buddyprees’ – however, if you just like the layout of the bp components with he second theme more, then yes I believe you could make a child theme from your primary theme, and then go into your secondary theme and start to pull some of the layout code for the bp specific components and add those to your main theme.

If it’s overall colors and such you are trying to mix, like have a red header for your main site and a blue header for your bp pages – that is not going to be so easy..

it’s easy to learn about child themes here: https://codex.wordpress.org/Child_Themes

and a little more digging to learn about bp specif pages and components here:

BuddyPress Theme Development

for minor changes you can keep things simple by activating your second theme that you like with the bp looking better, go to the bp pages where you like the layout, right click on the element that looks good and click inspect elements – this will give you the css rules that are working the way you like.. things like alignment properties, bold, colors perhaps – copy those – put them into your new child theme styles and such..

of course some things can be more tricky if your second theme has fancy functions.php, java and all that included.

Hi @rameden,

in hope you are already familiar with Genesis framework. If not, i don’t recommend it, because starting with a framework (even if very good) is not easy, and adding another point where you also begin is not the best way… to learn. 😉

The answer to your question is : child/css/buddypress.css/, but you can also use child/style.css

Add BuddyPress Styles to a Theme

If you want to modify BP templates, then you copy the needed file from legacy/buddypress/ to child/buddypress/…./

/bp-templates/bp-legacy/ belongs to BP.

Hi @backpackersunion,

Companion stylesheets were introduced in 2.3. You can read more about them here.

If they’re not quite to your taste, you can dequeue them. Here’s an example of how to do it:

function dequeue_bp_twentyfifteen() {
    wp_dequeue_style( 'bp-twentyfifteen' );
}
add_action( 'wp_enqueue_scripts', 'dequeue_bp_twentyfifteen' );

Previous snippet changed all avatars (user, blogs and groups) which is not what you want. Here’s a snippet which works almost correctly, but not to 100%. Give it a try anyway.

It changes the user avatar depending of an xprofile value.

(add to bp-custom.php)

function bpfr_my_new_avatar_url() {
global $bp;

	if( bp_is_user() && ! bp_get_member_user_id() ) {
        $user_id = bp_displayed_user_id();
    } else {
        $user_id = bp_get_member_user_id();
    }

	if ( is_page( 'activity' ) ) {
		$user_id = bp_get_activity_user_id();	
	}

$ranking = xprofile_get_field_data ('ranking', $user_id );

	if ($ranking == "Top 25") {		
		$url = get_stylesheet_directory_uri() .'/custom_img/25.png';
	}
	
	if ($ranking == "Top 24") {		
		$url = get_stylesheet_directory_uri() .'/custom_img/24.png';
	}
return $url;

}
add_filter( 'bp_core_default_avatar_user', 'bpfr_my_new_avatar_url' );

Create a profile field called “ranking” with 2 options (top 24 & top 25).
Create a folder in your child-theme called “custom_img” and add 2 pictures: 24.png & 25.png (250×250)
If everybody must those avatars, disallow avatar upload in BP settings.
Site default avatar stays as Mystery Man (wp default setting).

You have also to get rid of Gravatar, so you must add this to bp-custom.php
add_filter('bp_core_fetch_avatar_no_grav', '__return_true');

The thing who doesn’t work is related to X & Y are now friends. Both willhave the same avatar.

Can probably by better improved.

Yes, I should have done that / should do that :

If you want to apply your own CSS, override the plugin’s styles by adding the following to your theme’s stylesheet. That way you won’t lose anything going forward.

Thanks. Why it has not been added to the BP plugin page? Please add.

PS : Just now saw it has been added. Thanks.

@alexfa08

If I was creating a new theme with buddypress in mind right now, I would consider that most buddypress installs probably use the rtmedia plugin – and given that it is over bloated with it’s own loading of bootstrap components, and font awesome, and I think some zurb foundation files(?) – most themes I have tried to use that are responsive and work with buddypress plain – have issues when the rtmedia plugin is enabled – not sure why exactly – but I found that any theme I tried that was based on bootstrap code caused conflicts, and there for I was unable to use – since having media uploads is more important than having a good theme imho.

Maybe that will change if the new mediapress plugin proves to be a good alternative – but I don’t think we will know unless someone codes an import media and stuff from rtmedia to mediapress.

So if I was making a new theme for BP – I would try to test with rtmedia, and some of the other major plugins that most people will be using. I’d make it responsive – but I would get a list of all classes that bootstrap uses and make sure not to use any of the same.

It would be nice to see a new theme that had options to un-enque / deregister calls to repetitive assets – on my current theme I think my theme calls 4 javascripts, 3 css files, adds inline css styles, and then my 6 plugins do the same.. so I end up loading javascripts about a dozen times, and fonts, and about a dozen css files, and a few hundred lines of inline css, and all kinds of extra bloated bs.

Some random thoughts from my recent experiences.

@laura09 try adding the following to your theme’s stylesheet

#buddypress .comment-reply-link, #buddypress a.button, #buddypress button, #buddypress div.generic-button a, #buddypress input[type=button], #buddypress input[type=reset], #buddypress input[type=submit], #buddypress ul.button-nav li a, a.bp-title-button {
color: #000;
font-size: 1rem;
}

if it doesn’t work, please provide a throw-away username and password so we could log in.