BuddyPress.org

This is really useful! So let’s make this based on ftp url’s to confirm our understanding. If (buddypress.js) path is:
/MYDOMAINNAME.com/html/wp-content/plugins/buddypress/bp-templates/bp-legacy/js
and I want to edit this in my child theme, I have to create js folder inside my child theme. The path will be:
/MYDOMAINNAME.com/html/wp-content/themes/ChildThemeName/js
Inside the js folder in the child theme directory I will copy and past buddypress.js there and edit it at my convenience. The updates will not affect this file, do I ever have to worry about updating this?

Regarding buddypress CSS, do I have to create a folder for Buddress like this one: your-child-theme/css/buddypress.css to style buddypress? or I can add this to the style.css in the child theme directory? what is the best practice?

If I want to make updates to buddypress CSS for desktops and get rid of those updates (styles) on the ipad and phones to keep on responsiveness. What do you suggest I do?

Thanks

1st:

is the child theme folder in the wp-content/themes/ folder

The child-theme folder is, were you have placed it.

The child-theme folder should be on the same level of your folder-structure as your parent-theme (“comprehensive theme”)-folder.

E.g.:

• I have a folder wp-content/themes/reddle – for my parent theme
• and a folder wp-contentent/themees/reddle-child – for my child.theme

2nd:

Theme Name: BuddyPress_GSN

Template: buddypress

I don’t know, whether it should work your way as well, but I do not refer on the BuddyPress-theme, rather on my WordPress-parent-theme – so, in my case the style.css of my child-theme beginns with:

/*
 Theme Name:   Reddle Child
 Template:     reddle
*/

3rd:

You have to connect child- and parent-theme – in my case it is (as next line of my style.css) on the one hand:

@import url("../reddle/style.css");

And on the other hand you need a functions.php within your child-theme-folder as well. In my case it starts with:

<?php

/**
 * Enqueue stylesheet
 */
function reddle_child_theme_stylesheet() {
	wp_enqueue_style( 'reddle-child-themestyle', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'reddle_child_theme_stylesheet' );

4th:

Finally you have to activate your child-theme. You do this within the admin panel of your WordPress-installation:

http://1a-spielwiese.de/wp-admin/themes.php

In the case, that you have installed WordPress MultiSite, you have to activate it on the network level as well:

http://1a-spielwiese.de/wp-admin/network/themes.php

Cfr.: https://buddypress.org/support/topic/buddypress-2-1-bp-language/page/2/#post-200308 (section 2nd).

5th:

I don’t know, whether it is state of the art – anyway it works for me:

I insert as well my changes regarding my WordPress parent-theme as well as my changes regarding BuddyPress into my wp-content/themes/reddle-child/style.css.

Further reading:

https://codex.wordpress.org/Child_Themes#How_to_Create_a_Child_Theme

just went to make changes in buddypress.min.css

@barchiola Please do not modify the CSS file in the BP plugin. Any changes you make will be overwritten the next time you upgrade BuddyPress. Recommend that you upgrade to the latest BP version 2.1.1 https://buddypress.org/download/ and create a child theme of your preferred theme. Add the style changes to your child theme’s stylesheet.

Hello,

I’m suffering a lot of issues too with the translation into Spanish, in such a way that I had to patch it several times after trying different configurations.

So! To the point. It works for me now and I explain here my current configuration:

1. I’ve downloaded the BuddyPress translation package from https://translate.wordpress.org/projects/buddypress/ and contributed with some translations (specifically for Spanish: https://translate.wordpress.org/projects/buddypress/dev/es/default)

2. Saved the .mo and .po files in /wp-content/languages/plugins as recommended by the Moderators: https://translate.wordpress.org/projects/buddypress/dev/es/default.
And configured the site in Spanish (particularly I tried to do it dinamically)

3. Becuase I try to change the language dinamically according to the browser preferred language I use the xili-language plugin, which “helps” you to manage in what language you’ll display your WordPress, but I’m no sure if it is decisive for the BuddyPress translation. In this plugin there’s a configuration to mention and not enough documented. In case you use the plugn, in the tub “Settings for expert” there are rules to specify. My configuration is:
Wordress rule –> translation in local
BuddyPress rule –> no modification

5. At this point the translation didn’t work correctly or I didn’t succeed in translating some strings that remained in English (like: “Members”, “Groups”, “Notifications”, “Activity” in the BuddyPress navigation menu and others). So, I edited the .po file with PoEdit and updated it with the BuddyPress catalog “buddypress.pot”:

Customizing Labels, Messages, and URLs

6. I updoaded the modified .po and .mo files to the mentioned folder /wp-content/languages/plugins and didn’t change a thing. I read then in forums the different issues with translations, for example:

https://buddypress.org/support/topic/translation-fails-only-at-sitewide-activity/
https://buddypress.trac.wordpress.org/ticket/5655
https://buddypress.org/support/topic/buddypress-2-1-bp-language/
https://buddypress.trac.wordpress.org/ticket/5887
https://buddypress.org/support/topic/buddypress-2-1-known-issues/ (here there’s another workaround)

7. And I added the following lines to the file functions.php of my child theme:

function igf_my_child_theme_setup() {
load_child_theme_textdomain( ‘my_child_theme’, get_stylesheet_directory() . ‘/languages’ );
load_plugin_textdomain(‘buddypress’, false, basename( dirname( __FILE__ ) ) . ‘/languages/’ );
}
add_action( ‘after_setup_theme’, ‘igf_my_child_theme_setup’ );

And it begans to translate correctly! I’m sorry I really don’t understand why. Furthermore I thought that the buddypress textdomain was set by the plugin xili-language but, as I said, I’m not clever enough or it is not well documented.

I know there’s a lot of steps to do, I was really frustated with it, but if you try something like this

Anyway, as this is my first post, I have to thank to the developers for the software and the great effort, of course; it has helped me a lot too.

Regards.

Theme Compatibility & Template Files

Add BuddyPress Styles to a Theme

@1a-spielwiese The better guide to use in making a full-width page for the theme you’re using, https://wordpress.org/themes/reddle, is the one for Twenty Twelve at https://codex.buddypress.org/themes/bp-theme-compatibility-and-the-wordpress-default-themes/twenty-twelve-theme/

HTML structure for Reddle and Twenty Twelve are almost identical. However. for Step 4 of the Full-Width instructions, instead of using body.buddypress .site-content in media query, add the following to your child theme’s stylesheet:

@media screen and (min-width: 600px) {
       body.buddypress #primary {
              width: 100%;
       }
}

hi @stefanolusetti-1,

here we go !
You already copied buddypress/bp-templates/bp-legacy/buddypress/activity/post-form.php to the right place in your child-theme:
/child-theme/buddypress/activity/post-form.php

Excellent! Here’s more.

We’re going to use the wp_editor function to accomplish the task.

Note: wp_editor can replace any textarea. This means that if you use these function, that you have to remove the original textarea first.

The above function use the new drag_drop_upload support introduced in WP 3.9

First we go to remove the whats new textarea from this file, around line 29, and replace it with a custom action hook: whats_new_textarea

Before

<div id="whats-new-textarea">
			<textarea name="whats-new" id="whats-new" cols="50" rows="10"><?php if ( isset( $_GET['r'] ) ) : ?>@<?php echo esc_textarea( $_GET['r'] ); ?> <?php endif; ?></textarea>
</div>

After

<div id="whats-new-textarea">		
   ?php do_action( 'whats_new_textarea' ); ?>				
</div>

Save.

Now go to /plugins/bp-custom.php (if the file doesn’t exist, you have to create it) and paste in this snippet.

function bpfr_whats_new_tiny_editor() {
	// deactivation of the visual tab, so user can't play with template styles
add_filter ( 'user_can_richedit' , create_function ( '$a' , 'return false;' ) , 50 );

	// building the what's new textarea
	if ( isset( $_GET['r'] ) ) :
	$content = esc_textarea( $_GET['r'] ); 
	endif;

	// adding tinymce tools
	$editor_id = 'whats-new';
		$settings = array( 
		'textarea_name' => 'whats-new', 
		'teeny' => true, 
		'media_buttons' => true, 
		'drag_drop_upload' => true, 
		'quicktags' => array(
		'buttons' => 'strong,em,link,block,del,ins,img,ul,ol,li,code,close'));	
	
	// get the editor	
	wp_editor( $content, $editor_id, $settings );
}
add_action( 'whats_new_textarea', 'bpfr_whats_new_tiny_editor' );

Save and enjoy !

salut @victord34,

I obviously could not do it with my child css
Most probably because you did it wrong !

Add BuddyPress Styles to a Theme

If your goal is to style the member diretory, which is set by default, you have to style it through CSS or modify the template from ithin a child theme. You can’t do this by adding a personnal template as for an usual WP page, to the BP (internal) page named Members.

BuddyPress Components and Features

BuddyPress Theme Development

Add BuddyPress Styles to a Theme

We’re now in the 2.0 aera.
To apply changes to your BP 2.x site.
– Upload any theme you want and check first if it works with WordPress, specially by creating new users and sending messages.
– Upload and activate BuddyPress. Check conscientiously his settings. Changecalso the permalinks settings to your need (except by default).
– If everything is fine, after testing of course, you create then a child theme.
– if you need to alter some BP templates, you get copies of them from bp-templates/bp-legacy/buddypress/ and put them in your child-theme/community/ or child-theme/buddypress/ directory. All other files, which are not (BP files) filed in bp-legacy, should be copies of your original theme added to your child theme.

References:
all comments in bp-templates/bp-legacy/buddypress-functions.php
https://codex.wordpress.org/Child_Themes
https://codex.wordpress.org/Function_Reference/get_template_part

@jeremiahward Did you download the file from buddypress.trac in the Original Format per link at the bottom of the page, i.e., index.php? And did you add that index.php to your WP child theme folder per structure I gave you in your own child theme? If you did, and it’s still not working for you because of some conflict, you can always go through the CSS route. Add this to your stylesheet:

.activity form#whats-new-form {
display: none;
}

@mr-bronze

You could try putting the following in you child theme functions.php file

function bbg_enqueue_styles() {
remove_theme_support( 'bp-default-responsive' );
}
add_action( 'wp_enqueue_scripts', 'bbg_enqueue_styles', 5 );

For more info ( including important details ) see: https://buddypress.trac.wordpress.org/ticket/3881#comment:2

——————————————————————————————–

EDIT: I’ve just noticed that you have been told this answer before: https://buddypress.org/support/topic/upgraded-and-now-nav-and-sidebar-is-responsive/#post-150007

Please start your own Topic, rather than jump in on others, which can get confusing for those trying to fix a different problem.

In your New Topic please describe more thoroughly the actual problem you personally are having and what you have already tried, including links to the theme, plugin, snippet or tutorial etc., ( if possible, practical or appropriate )?

@eddieb12180 Did you even try adding the styles I provided above? Of course you can make some changes in the registration page’s markup. Copy over the register.php file from https://buddypress.trac.wordpress.org/browser/tags/2.0/bp-templates/bp-legacy/buddypress/members/register.php into yourchildthemefolder/buddypress/members/ folder and make the changes you want to html tags available there.

@eddieb12180 Add the simple tweaks below to your child theme’s stylesheet and adjust to taste. Basically, tame the styles of the descriptions and settings so it will be more visually pleasing.

#buddypress .field-visibility-settings,
#buddypress .field-visibility-settings-toggle,
#buddypress .field-visibility-settings-notoggle {
font-size: 14px !important;
}

#buddypress .field-visibility-settings legend,
#buddypress .field-visibility-settings-toggle {
font-style: normal !important;
}

#buddypress .current-visibility-level {
font-weight: normal !important;
}

#buddypress .field-visibility-settings a.visibility-toggle-link {
font-style: italic;
text-decoration: underline;
}

#buddypress .field-visibility-settings legend,
#buddypress .field-visibility-settings-toggle {
margin-bottom: 0;
}

1GB RAM is a minimum, 2GB RAM is ideal. As you scale up you may need more. On a good server setup you can actually see live (via SSH) how much of your RAM is being used up and how much is free. If you’re bottlenecking, you can contact the hosting company to add more RAM or bump you up to the next server. That is not the same as migrating to a new host… if it’s within the same company they should handle it for you seamlessly in the background.

Another option is to use Amazon (AWS) instead of a private server and it just scales up automatically as needed – they mostly charge by data rather than by server. They will be more expensive for most sites and will be slightly harder to set up, but they are also incredibly scalable.

A CDN isn’t really a “cache” in the way you imagine W3 working. It’s only caching resources (stylesheets, images, javascript files, etc) but not caching “content”. Your resources usually don’t go stale because they are not updated often. And if you do it properly, the cache can be broken any time you update a resource (by adding a version number to the enqueue in your theme). The version number gets appended to the URL of the resource, so if it changes the CDN thinks it’s a different file and immediately serves up a new file.

Content does go stale. By content I mean the data that is outputting for everyone to see right on the website. Like a profile, activity page, member directory, etc. This is the stuff that plugins like W3 are primarily used to cache (among other things as well).

You can integrate a CDN very easily using WP Super Cache. You can just turn off the content caching stuff and use it only for pushing your resources into a CDN. It’s a set it and forget it kind of setup for the most part.

If you happen to be in the Miami area on May 9, I’ll be speaking about scaling BuddyPress at the BuddyCamp (1st day of WordCamp Miami). http://2014.miami.wordcamp.org/
Should be a fun event.

@simple-man BP’s default style for the Member and Group widget avatars have been superseded by your theme’s style where it changed the avatar’s width to auto in one area and in another area, changed it to max-width: 100%. You can add the following to the stylesheet of your child theme

.widget.buddypress ul.item-list img.avatar {
width: 20px;
}

No not a blank file, you copy over the existing file, the crucial aspect is that you retain the same folder paths to that file so members/single/index.php if found in your child theme is the one used, or in the case of that plugin you might need to us it’s templates in place of the BP ones.

If you are set on using bp-default then you probably ought to copy over all template files, and all assets css, js, etc to your theme along with the functions file parts necessary to locate BP ajax, scripts, styles and add the line add_theme_support( ‘buddypress’ ) in your themes functions.php file and run as a full theme.

BP experts seem to know (or are willing to share) the answer

Firstly it isn’t really something that requires BP expertise nor is it some secret people are trying to hide from you.

CSS is coding and requires some degree of understanding if you wish to start modifying code to some degree you’ll have to leave behind that notion of being a non expert 🙂

There is no general bit of code that can be provided to suit all users in this request, the start point for stating a general font color is the body tag as this is a inherited property however then that color can be overridden with other values further on down into the cascade so if it didn’t work on the body tag likely it is being stated somewhere else and as there is no particular set notion as to where as this is a stylesheet authors decision it’s hard to give anything other generic approaches. Using a tool such as firebug in FireFox you may be able to examine the elements that have styled text and see where they inherit things like color properties from in the stylesheet and then adjust accordingly.

@henrywright approach adding !important might work however it’s not a good practise (sorry Henry 🙂 )

The reason people are always advised to use child themes is that this way you can make changes and be assured they won’t get overwritten in updates, now in your case looking at your custom theme with very bold coloured backgrounds the rules in the buddypress.css stylesheet that set activity meta to grey would need changing but to do this you would want to copy over that stylesheet or in your themes styles write very specific rulesets to override the BP ones.

The process for copying over BP files is described here:

Theme Compatibility & Template Files

My advice:

1. Don’t copy bp-default. It’s a very old theme and is being retired. Instead, model everything off of the bp-legacy files. They’re at /plugins/buddypress/bp-templates/bp-legacy/

When BuddyPress runs (1.7+) it is pulling in templates files and CSS and JS from this folder. You can replicate that folder structure to override any templates in there, like CSS, etc.

2. If you want to completely override the default CSS, you can remove the enqueuing of it entirely with this in your functions.php, so that you’re not loading your CSS in addition to BP default CSS.

wp_deregister_style( 'bp-child-css' );
wp_deregister_style( 'bp-parent-css' );

3. Sounds like a nice plan of attack. I wouldn’t recommend using a separate stylesheet for every single component, because you’re going to end up with a ton of stylesheets which will be bad for performance. But if it makes your life easier to code this way, you can always combine all of the styles at the end. Also I think you may find that a lot of stuff overlaps between components. Like all directories are basically the same CSS (Member directory, Groups directory, etc.), and member profiles and single groups are basically the same CSS. So it may get redundant to separate by component. I would separate by directory, single item (profile, group), and then get specific for different “inner” content types – like messages, activity, etc.

For CSS – Add the following to your theme stylesheet and change it to whatever color you want

#buddypress a.activity-time-since {
	color: #aaa;
	text-decoration: none;
}
#buddypress a.activity-time-since:hover {
	color: #888;
	text-decoration: underline;
}

The “1 day, 1 hour ago” text is coming from \plugins\buddypress\bp-activity\bp-activity-template.php line 1332
$time_since = apply_filters_ref_array( 'bp_activity_time_since', array( '<span class="time-since">' . bp_core_time_since( $activities_template->activity->date_recorded ) . '</span>', &$activities_template->activity ) );

However, It’s not recommended to change core files. And I have no idea how to do it externally. Hope this helps

@alleycakes add to your theme’s stylesheet:
#buddypress a.button {
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #f43b32), color-stop(1, #d2231a) ) !important;
background: -moz-linear-gradient( center top, #f43b32 20%, #d2231a 100% ) !important;
-webkit-box-shadow: inset 0 1px 0 hsla(0,100%,100%,.3) /*Top*/, inset 0 0 2px hsla(0,100%,100%,.3) /*Shine*/, 0 1px 2px hsla(0, 0%, 0%, .29);
-moz-box-shadow: inset 0 1px 0 hsla(0,100%,100%,.3) /*Top*/, inset 0 0 2px hsla(0,100%,100%,.3) /*Shine*/, 0 1px 2px hsla(0, 0%, 0%, .29);
}

No need…. I’ll just explain it slightly better you’re using a buddypress child theme, so you need to create a folder inside _inc called “js”. For me, this holds all my javascript files in this case, you’ll put backstretch.js here (make sure the name is backstretch.js)

Next step is putting the background image in the folder _inc as well, place your image inside “images” within _inc, name it background.(whatever)

Now we need to add the code so that wordpress uses these files – we can add it to our functions.php

function backstretch_script() {
 
		wp_register_script( 'backstretch', get_stylesheet_directory_uri() . '/_inc/js/backstretch.js', 'jquery', '1.8.3', true);
                wp_enqueue_script( 'backstretch' );
    
}
add_action( 'wp_enqueue_scripts', 'backstretch_script' );

	function backstretch_add() {
?>
        <script type="text/javascript">
            jQuery.backstretch("<?php echo get_stylesheet_directory_uri()?>/_inc/images/background.jpg");
        </script>
<?php
	}
add_action ('wp_footer', 'backstretch_add', 20);

add that code as is – you may want to change the .jpg to .png or whatever file type your image is.

If for some reason you don’t want to place backstretch.js or your background image in those folders, you’ll need to modify these two lines to the new location.

wp_register_script( 'backstretch', get_stylesheet_directory_uri() . '/_inc/js/backstretch.js', 'jquery', '1.8.3', true);
jQuery.backstretch("<?php echo get_stylesheet_directory_uri()?>/_inc/images/background.jpg");

Hopefully that’s slightly clearer