BuddyPress.org

Hi,

The CSS file that gets loaded depends on which template pack is in use, e.g. Legacy vs Nouveau. Additionally, styles (CSS) can be customized via a Child theme and, if a Classic theme is in use, via the Appearance > Customize > Additional CSS menu path within the wp-admin area. Thus, which CSS file gets loaded is irrelevant/moot.

Specific to Avatars, How to Customize BuddyPress Avatars With CSS has some info (Note: might be a tad outdated). There are other sources on wordpress.org that contain general info regarding custom CSS, e.g. from the Advanced Administration Handbook – Custom CSS in WordPress

Hopefully, this is enough information to get you started.

To overwrite the BuddyPress Nouveau template CSS in a child theme, you need to ensure that your child theme is properly enqueued and that the correct file path is used. Here’s the recommended approach:

In your child theme folder, create a new directory called buddypress.

Inside the buddypress directory, create a new directory called css.

Copy the buddypress.css file from /plugins/buddypress/bp-templates/bp-nouveau/css into your child theme’s buddypress/css directory.

In your child theme’s functions.php file, enqueue the modified CSS file. Add the following code:

function enqueue_child_theme_styles() {
wp_enqueue_style( ‘child-theme-buddypress’, get_stylesheet_directory_uri() . ‘/buddypress/css/buddypress.css’, array( ‘bp-nouveau-main’ ), ‘1.0’ );
}
add_action( ‘wp_enqueue_scripts’, ‘enqueue_child_theme_styles’, 999 );

To overwrite the BuddyPress Nouveau template CSS in a child theme, you need to ensure that your child theme is properly enqueued and that the correct file path is used. Here’s the recommended approach:

In your child theme folder, create a new directory called buddypress.

Inside the buddypress directory, create a new directory called css.

Copy the buddypress.css file from /plugins/buddypress/bp-templates/bp-nouveau/css into your child theme’s buddypress/css directory.

In your child theme’s functions.php file, enqueue the modified CSS file. Add the following code:

php
Copy code
function enqueue_child_theme_styles() {
wp_enqueue_style( ‘child-theme-buddypress’, get_stylesheet_directory_uri() . ‘/buddypress/css/buddypress.css’, array( ‘bp-nouveau-main’ ), ‘1.0’ );
}
add_action( ‘wp_enqueue_scripts’, ‘enqueue_child_theme_styles’, 999 );
Make sure to adjust the version number (‘1.0’) if you update your child theme’s CSS in the future.

With these steps, the modified “buddypress.css” file from your child theme should be loaded and override the default styles from the BuddyPress Nouveau template.

Remember to clear any caching plugins or server caches to ensure that the updated CSS is being served.

If the changes still don’t take effect, it’s possible that another plugin or theme is conflicting with the child theme’s styles. In that case, you may need to investigate further and potentially use more specific CSS selectors or use a higher priority for the “wp_enqueue_style” function.

I posted my initial response about this on the blog page. I want to add additional ideas and context here. The changes to the plugin sound great and are needed but they just don’t go far enough. The update is not that exciting.

There doesn’t look like there is going to be support for block-based themes, full-site editing, or Gutenberg. There is no mention of new Gutenberg blocks.

It looks like the next release will still rely on a limited amount of widgets. The widgets can’t be added to pages to create unique looks unless the user downloads a plugin.

Widgets are going away and will be replaced with blocks soon. WordPress users will have to disable newer features in order to use the older BuddyPress features. How is this fair?

BuddyPress should incorporate the newer WordPress features and add backwards compatibility for those unable to upgrade right away.

Also, your website doesn’t contain any documentation on creating blocks for Gutenberg or block-based themes that work with the plugin. There is no exciting news about documentation updates.

The release notes say there are updates to the BP Nouveau template pack. I am wondering what these updates are. Will this include updates to the Companion Stylesheets?

Honestly, with full-site editing and block-based themes coming, these updates are a little too late.

I am hoping the BP Nouveau template pack at least removes some of the BuddyPress CSS elements and gives more control back to the theme authors.

Why is the plugin overriding the theme’s original styles for page titles, fonts, color schemes, etc?

This creates extra work for someone modifying a theme or creating a theme. The plugin works against the original theme and not with it. The plugin should focus on modifying the elements that are not taken care of by the theme.

The alerts look like you just copied what the alerts looked like in a previous version of Bootstrap. They have to be redesigned.

The plugin is not mobile-friendly. The plugin overrides the mobile-friendly designs put in place by the theme designer to make the experience as terrible as possible on a mobile device.

– Small fonts in places
– Fonts too large in others
– Selection areas too small to touch
– Buttons too small

I understand not all themes are done well, but the majority using the new features available in WordPress already does a better job with design than the BP Nouveau styles.

Overall, this new update isn’t going to be ready for WordPress 5.8. It seems as though the developers o BuddyPress don’t care about what the WordPress Core community is accomplishing and the progress they are making.

In 2017/2018 this would be an awesome update. It’s 2021 and the update is meh.

Hi,
How did you disable the option? Are you using css to do it?

There are two ways to do it
1. Using css
2. editing template file(register.php and keeping a copy in your theme’s buddypress/members directory)

I will prefer the first approach as it will not be much work on a site admin’s part.

.register-page .signup-form .editfield .field-visibility-settings,
.buddypress-wrap .standard-form .field-visibility-settings-header {
    display:none;
}

Please visit Dashboard->Appearance->Customize menu then open “Additional Styles” and add those lines.

Does that work?

Best Regards
B

I am not attacking the BuddyPress Dev team to be clear.
I’m just saying that there should be a customization option for the registration page.
Because right now the styles are dependent on the theme. Why not add an option that allows people to place a certain field at a place and fully customize that field to their likings. Of course I understand that is hard and takes a long time and will probably not happen.
But please the team would make a lot of people happy by adding an option so people can customize the registration page apart from the full theme like its own style sheet.

add_theme_support( 'buddypress' ) is for custom BuddyPress themes not relying on theme compatiblity.

I would remove that line from your theme’s functions.php and then load a BuddyPress page to see if the default BP styles show up as expected.

Extended Buddypress profile fields demands an additional name / username field. This is the case whether you are using Buddypress Usernames Only plugin or not.

This is only relevant if you require extended profile fields. If you don’t, then go into Buddypress settings and turn off extended profiles. That will remove the requirement for a second name on the registration / profile area.

If you want to use extended profile fields on BP, but you don’t want the second username / name field uglying up your registration flow, you can do the following.

You have to be careful with this, because if you hack it, remove the second required name / username field, or any of a dozen other solutions I’ve found – the registration will break down. You will get 500 errors, missing confirmation emails etc.

The solution I used for this is as follows.

1. Assuming you just want to use a singular Username for your site – install the Buddypress Usernames Only plugin. It says the plugin is old but it is still working as of WP version 4.7.4 (for me at least). This deals with the display / access of various username / name / fullname / nickname issues throughout the WP / Buddypress install.

2. Next you’ll need to hide the extra name / username field on the registration area, and the BP profile area. Stick this CSS into your theme custom CSS under Appearance > Customize:

#profile-edit-form .field_1 { display: none;}
#signup_form .field_1 { display: none;}

(I have seen a 3rd line of CSS on other solutions – #register-page p { display: none;} – all this did for me was to hide the confirmation message after the user registers. You probably want that so I’d leave that line out).

3. The fields should now be hidden, but the system still requires that information to process properly. So next create a file in notepad and save it as name_remove.js

In that file put the following javascript:

document.getElementById("signup_username").onchange = function() {myFunction()};
function myFunction() {
 var x = document.getElementById("signup_username");
document.getElementById("field_1") .value = x.value
}

Save that file and upload it to your theme folder (same folder as functions.php etc). This javascript automatically populates the hidden field with the username, so the system does not complain or fall over.

4. Finally you need WordPress to pick this javascript file up. You can do that with a function, using file enqueing. Copy and paste this function into your themes functions.php file Appearance > Editor

function wpb_adding_scripts() {
wp_register_script('name_field_remove', get_stylesheet_directory_uri() . '/name_remove.js', array('jquery'),'1.1', true);
wp_enqueue_script('name_field_remove');
}

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );

You have to be careful about the path. If it’s not working at this point, you can view the page source of your register page, and search for “name_remove.js” – look at the path on that script line. If the path is wrong, tweak it in the function above (you might need to change the get_stylesheet_directory_uri() part, or the path part after it. You can check if the path is correct by clicking the link to the .js file in the page source. If the path is wrong, you will get a 404 error. If the path is right, you should see the script code contained in the js file. Fiddle around with the path until it’s correct.

At that point, you have hidden the fields with CSS, and populated the second hidden username / name field automatically with javascript. Test your registration / confirmation email etc to make sure everything is working. But you should be good to go.

Hope that helps someone. Thanks to the folks I cobbled this solution together from.

A brief check for wp-content/themes/rehub/buddypress/groups/single/index.php indicates that you use a wrong file.

There is no index.php file in the original template directory of /groups/single/…

So it may by interesting for you to review the group page install – evtl. register permalinks again and to check how you implemented “/buddypress” into your theme. About theme, do you use a child theme ?

Perhaps read the template doc if it is a bit unclear.

Add BuddyPress Styles to a Theme

That’s mainly a styling thing.
You should be comfortable using Firefox or Chrome and their developer consoles, where you are able to preview changes.

These links will be help you as well:

Add BuddyPress Styles to a Theme

https://buddypress.org/support/topic/custom-css-changes/

Don’t forget to either include your styles via external file in your plugin or use your child themes, not to lose changes on parent theme update.

Thanks for the reply @danbp

I have not built the site and I also have very little technical and coding knowledge (sorry!) I will update WordPress later but wasn’t sure how to back everything up?

There is a lot of plugins installed:Admin Menu Editor, Advanced Custom Fields,Advanced Custom Fields PRO, bbPress,BuddyPress, DropBox Folder Share, Easy FancyBox, Gravity Forms, Gravity Forms + Custom Post Types, Gravity Forms CSS Ready Class Selector, Gravity Forms Remove Entries, jonradio Multiple Themes, Login Security, Members, No Page Comment, OPcache Dashboard,Page Specific Menu Items, PHP Code For Posts, Post Types Order, Social Media Feather, Styles with Shortcodes for WordPress,
TAO Schedule Update, WordPress Importer, WP Google Maps, WP Google Maps – Pro Add-on, wp_mail return-path

Are any of these know to conflict with BuddyPress?

Not sure on the custom functions as far as I know… I’m not confident enough to debug and the site it is also live so not sure what to do?

Think I will update WordPress then disable all plugins except BuddyPress and try on a twenty theme but if that doesn’t work, which seems like the case in other past posts, I’m not sure need help!

Thanks again

@destac There are different ways to implement the new feature. For the screenshot, I did it in 4 simple steps.

Note that you might need to adjust how the widgets are registered, named, or styled based on your theme.

1. Registered three new widget areas in the child/theme’s functions.php file.

<?php // Only add this line if you are adding this to an empty functions.php file
/**
 * Register three widget areas for Members front page.
 *
 * @since My Child Theme 2.6.0
 */
function my_child_theme_widgets_init() {
	register_sidebar( array(
		'name'          => __( 'bp-members-1st', 'my-child-theme' ),
		'id'            => 'bp-members-1st',
		'description'   => __( 'Appears on each member\'s front page.', 'my-child-theme' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h2 class="widget-title">',
		'after_title'   => '</h2>',
	) );

	register_sidebar( array(
		'name'          => __( 'bp-members-2nd', 'my-child-theme' ),
		'id'            => 'bp-members-2nd',
		'description'   => __( 'Appears on each member\'s front page.', 'my-child-theme' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h2 class="widget-title">',
		'after_title'   => '</h2>',
	) );

	register_sidebar( array(
		'name'          => __( 'bp-members-3rd', 'my-child-theme' ),
		'id'            => 'bp-members-3rd',
		'description'   => __( 'Appears on each member\'s front page.', 'my-child-theme' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h2 class="widget-title">',
		'after_title'   => '</h2>',
	) );
}
add_action( 'widgets_init', 'my_child_theme_widgets_init' );

Adjust items registered in child theme based on how your theme is setting up the widget areas.

2. Created a new file front.php which should be located as follows: wp-content/my-child-theme-folder/buddypress/members/single/front.php
(Create the buddypress, members, and single directories/folders if you do not have those in your theme yet.)

Added the following in the front.php file:

<?php
/**
 * BuddyPress - Members Front Page
 *
 * @since My Child Theme 2.6.0
 */
?>

<div class="bp-member-front-wrap">

	<div class="bp-member-front-1">
		<?php dynamic_sidebar( 'bp-members-1st' ); ?>
	</div>

	<div class="bp-member-front-2">
		<?php dynamic_sidebar( 'bp-members-2nd' ); ?>
	</div>

	<div class="bp-member-front-3">
		<?php dynamic_sidebar( 'bp-members-3rd' ); ?>
	</div>

</div>

3. Added some styles:

.bp-member-front-wrap {
	clear: both;
	margin-bottom: 2em;
}

@media screen and (min-width: 46em) {
	.bp-member-front-wrap {
		clear: both;
		margin-bottom: 1em;
	}
	.bp-member-front-1,
	.bp-member-front-2 {
		float: left;
		margin-right: 1.5%;
		width: 32%;
	}
	.bp-member-front-3 {
		float: left;
		width: 32%;
	}
}

4. Went to Appearance > Widgets and add widgets to the Member Front Page Widget Areas.

As mentioned above, there are other ways to implement this new feature. Happy customizing!

Hi Ben,

You are correct that it’s best to leave the bp stylesheet in place so that you get updates to that file. You can add a custom stylesheet, though, and increase the selector power of the rule, so that it overrides the bp.css rule, like .site #buddypress #item-body { border-left: none; }

Here’s the basic concept.
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Adding a stylesheet:

Including CSS & JavaScript