buddypress social theme graphical modification

I am working with the Buddypress social theme and I am trying to make it look cooler and move "alive".

1. Some of your other themes download page have a video, which states that all WPMU DEV themes come with a PDF manual. Is there such a manual for Social?

2. Is there a planed change in the design of the "Social" theme coming soon, or is there another 'Facebook alike' Buddypress theme available, or a new one that you are working on?

3. Can I combine two or more themes together? For example if I want to use your "Showcase" theme's cubical header, or your "Gallery" theme photo switcher on one of my "Social" pages, what is the easiest way to do so?

4. I would like to change the way the top menubar looks. For example, the Sencha & Conduit menubars.
Do you have a theme with quite a similar menu?

5. I try to customize each activity frame and sub-frames (activity title, activity comments) colors, text and adding CSS 'border-radius' (see attached image). Give it a look that is somehow similar to Facebook's mobile application. Is there a way doing so from the theme customization page?

  • Paul Barthmaier

    Hey RB,

    Thanks for your detailed questions. It's true that there is an updating of the themes going on, but we don't yet have a release date. I am hoping for during the first quarter of next year, but I really can't say definitively. Sadly, there isn't a manual that I'm aware of. The header issue wouldn't be a simple thing to do, as far as I can tell. And for the CSS, your screenshot looks like you are doing a good job of things. Fortunately, Social is pretty straightforward with its CSS, so making changes to your child theme like you are is excellent! Keep up the good work and let us know if you run into any challenges. We're here to help!


  • rbahumi

    Hi @Neil,

    Paul is right, I am sorry. I did confused you with a staff member, and I was kind of expecting a more informative answer from that staff member....(like the one @Paul gave). I am sorry for my last comment, you answering on the forum is highly appreciated, and I hope that you will keep on doing so.

    Hi @Paul,
    Thank you for your detailed answers. I have another question in relation to your answer....
    What would be your recommended/proper way of overriding a CSS value that is being set in the bp-social parent CSS?

    For example, in order to edit the menubar, there is a need to override some of the values in base.css. Some of those values, contain the !important property, so I am not sure how to override them with child-style.css.

    One idea, is to keep a local copy of base.css in the child theme, and override the PHP function devtheme_load_styles(), so it will load the file from the child theme and not from the parent theme. The cons for this solution, is the need to keep track on changes done on base.css and the devtheme_load_styles() function. Is there a better way?
    I have attached its code below, so you wouldn't have to go to the source code:

    if ( ! function_exists( 'devtheme_load_styles' ) ) :
    function devtheme_load_styles() {
    global $theme_version, $bp_existed;
    $home_featured_block_style = get_option('tn_buddysocial_blog_featured_style_status');
    wp_enqueue_style( 'dev-base', get_template_directory_uri() . '/_inc/css/base.css', array(), $theme_version );
    wp_enqueue_style( 'dev-bp-base', get_template_directory_uri() . '/_inc/css/bp-default.css', array( 'dev-base' ), $theme_version );
    wp_enqueue_style( 'dev-bp-css', get_template_directory_uri() . '/_inc/css/bp-css.css', array( 'dev-base' ), $theme_version );
    wp_enqueue_style( 'dev-bp-adminbar', get_template_directory_uri() . '/_inc/css/adminbar.css', array( 'dev-base' ), $theme_version );
    wp_enqueue_style( 'dev-js-gallery', get_template_directory_uri() . '/_inc/css/jd.gallery.css', array( 'dev-base' ), $theme_version );
    if( is_rtl() ):
    wp_enqueue_style( 'dev-rtl', get_template_directory_uri() . '/_inc/css/rtl.css', array( 'dev-base' ), $theme_version );
    if( file_exists( TEMPLATEPATH . '/_inc/css/custom.css' ) ):
    wp_enqueue_style( 'dev-custom', get_template_directory_uri() . '/_inc/css/custom.css', array( 'dev-base' ), $theme_version );
    // If the current theme is a child of bp-default, enqueue its stylesheet
    if ( is_child_theme() && 'bp-social' == get_template() ) {
    if( file_exists( STYLESHEETPATH . '/_inc/css/child-style.css' ) ):
    wp_enqueue_style( 'dev-base-child', get_stylesheet_directory_uri() . '/_inc/css/child-style.css', array( 'dev-base' ), $theme_version );


  • Paul Barthmaier

    Pretty much. I guess I'm saying it's probably better not to complicate things too much. I wasn't sure if maybe your child theme's settings were different than mine.

    You didn't mention the Navigation bar, though. Did it not also increase in size? I was thinking that you'd want to have that change to get the Nav Bar looking more like the Conduit theme.

    Anyway, my overall message is that if you can take care of all of this with child theme css, it's probably the safest and easiest way to go. Let me know if you run into trouble.


Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.