BuddyPress.org

By & large the point was/is with the BP theme compatibility styles that they do  or provide as little styling as possible, to slot into a theme BP has to render just very simple positioning styles more than anything, leaving the theme to provide styles.

You will need to look at the mechanisms the theme provides for adding styles and provide adjustments where the theme causes issues for BP elements.

BP provides a top level namespace type token #buddypress so using that you can apply styles that have a higher specificity.

>> text above the status update box that says something like “What’s New?” so members know to click in there.

>> I would like to know how to get that back?

@39images @bphelp for that specific item

1. create a new folder named buddypress in your active WP theme

2. within that buddypress folder you created, create a folder named activity

3. download https://buddypress.trac.wordpress.org/browser/trunk/bp-templates/bp-legacy/buddypress/activity/post-form.php and place it in your new activity folder like so:
wp-content/themes/NAME-OF-YOUR-WP-THEME/buddypress/activity/post-form.php

4. Open up post-form.php. On line 21 https://buddypress.trac.wordpress.org/browser/trunk/bp-templates/bp-legacy/buddypress/activity/post-form.php#L21 insert http://pastebin.com/z8e7xyRZ

5. Add the following to your theme’s stylesheet:
#whats-new-form p {
margin-left: 70px;
}

From a recent post by Boone this duplicate content may be related then to 1.7’s aggressive loading of styles, and scripts theme authors are going to need to add:

add_theme_support(‘buddypress’)

to their themes functions file, preferably hooked to ‘after_theme_setup’

but this will depend on how this theme has been configured to work with BP if at all?

http://bpdevel.wordpress.com/

If you want to replace the responsive css with your own, you should be able to disable the default with

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

For more info see https://buddypress.trac.wordpress.org/ticket/3881#comment:2

@scorpiouno unfortunately, your theme’s styles have overwritten the default forum styles that are enqueued by the bbPress plugin. For example, if bbPress is activated using the Twenty Twelve theme, the forums are styled as expected http://testbp.org/groups/buddypress-testers-614548248/forum/

Initial scan of your forum shows some style corrections you can add to the BOTTOM of your theme’s style.css file:

#entry #bbpress-forums ul {
margin: 0;
}
#entry #bbpress-forums ul li {
margin-left: 0;
list-style-type: none;
}
p.bbp-topic-meta img.avatar {
display: inline-block;
width: 14px;
}

@ciumbargi Big avatars at beginning of the stream denote “Major” activities which include new blog post published, new forum topic posted, etc. Small avatars at the beginning of the stream row denote “minor” activities which include joining a group, new friendships, new registrations, etc. So there is a method to distinguish which is which.

If you still want to make those changes, add the following to your stylesheet
<code>.activity-list li.mini .activity-avatar img.avatar,
.activity-list li.mini .activity-avatar img.FB_profile_pic {
height: 50px;
margin-left: 0;
width: 50px;
}</code>

If you’re using browsers like FireFox, Chrome or Safari, right click on the element you want to change, choose “Inspect Element” from the box which shows up and you’ll find the styles you would need to add/change in your  theme.

I got them from my old template

The thing is, those styles may not even work in your new template unless the HTMLtags/selectors/etc in your new template matches those of your old template. You could try adding those external stylesheets (bp.css and bp-admin.css)to your theme’s header.php see http://www.w3schools.com/css/css_howto.asp

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 see: https://buddypress.trac.wordpress.org/ticket/3881#comment:2

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 see: https://buddypress.trac.wordpress.org/ticket/3881#comment:2

@panashe add/remove styles in your theme’s style.css file. Depends on your theme.

and i only can access the main forum from the side bar

Actually, you have your sitewide forum index page at http://justinharvey.com/F/

Also i am trying to add CSS to My pages and cant figure it out. any tips?

One usually adds the styles to your theme’s style.css file. However, since you’re using the BP Default theme, any modifications made to the style.css file will be overwritten when you upgrade BuddyPress. It would be better if you created a child theme of the BP Default theme and add styles to that child theme’s style.css file. Or use a WordPress theme and install/activate the BP Template Pack plugin and go through Appearance > BP Compatibility process.

You just add position: fixed; to your #header (or whatever hook you have) in your theme’s stylesheet. Use Firebug, a FF add-on, or the Chrome Inspector to find what styles are used in the elements you want to copy.

@naijaping add the following at the top of your theme’s functions.php file
/**
* Sets up the content width value based on the theme’s design and stylesheet.
*/
if ( ! isset( $content_width ) )
$content_width = 625;

change 625 to theme content width. See how it’s done with twenty twelve theme https://themes.svn.wordpress.org/twentytwelve/1.1.1/functions.php

@jeellison @migson add this to your theme’s stylesheet:

#whats-new-options {
height: 40px !important;
}

@rossagrant theme authors should add $content_width – it’s a constant used to set the maximum width of embedded content like videos. It’s a standard part of just about any well-coded theme like those in WP theme repo per requirement https://codex.wordpress.org/Theme_Review#Required_Hooks_and_Navigation

Add the following at the top of your theme’s functions.php file
/**
* Sets up the content width value based on the theme's design and stylesheet.
*/
if ( ! isset( $content_width ) )
$content_width = 600;

Measurement is in pixels. Change 600 as needed.

B. COPY sidebar.php and Save As > sidebar-buddypress.php file

Open up sidebar-buddypress.php and at the very TOP of the file above all other code, add:
`

`

Save file.

C. Upload header-buddypress.php and sidebar-buddypress.php to your theme folder in server wp-content/themes/vagenta/ in the same directory where your regular header.php and sidebar.php files are

D. Final note: Copy the style modifications for some BP elements https://codex.buddypress.org/theme-development/theme-dev-bp-template-pack-walkthrough-twenty-ten-bp-1-5/3/ and paste those at the bottom of your theme’s stylesheet, then adjust to taste.

B. COPY sidebar.php and Save As > sidebar-buddypress.php file

Open up sidebar-buddypress.php and at the very TOP of the file above all other code, add:
``

[UPDATED-11/20/12 @rakshithvbharanigmailcom ] At the very BOTTOM of the same file, below all other code, add:
`

jQuery(document).ready( function() {
if ( jQuery(‘div#blog-details’).length && !jQuery(‘div#blog-details’).hasClass(‘show’) )
jQuery(‘div#blog-details’).toggle();
jQuery( ‘input#signup_with_blog’ ).click( function() {
jQuery(‘div#blog-details’).fadeOut().toggle();
});
});

`

Save file.

C. Upload header-buddypress.php and sidebar-buddypress.php to your theme folder in server wp-content/themes/lucid/ in the same directory where your regular header.php and sidebar.php files are

D. Final note: Copy the style modifications for some BP elements https://codex.buddypress.org/theme-development/theme-dev-bp-template-pack-walkthrough-twenty-ten-bp-1-5/3/ and paste those at the bottom of your theme’s stylesheet, then adjust to taste.

@zeecc No need to insult the BP generated design. If you don’t like it, just say so.

== So from what i’ve understand it is possible to use the frisco layout to insert into my theme. ==
Frisco theme has it’s own stylesheet where you copy the styles from. Use Firebug, the Firefox add-on to check which styles go with which HTML tag. Or, hire a developer to make the changes for you.

I don’t want to discourage anyone from creating BuddyPress themes but version 1.7 is very close and you don’t need to go through special hoops to create a theme for BuddyPress. BP 1.7 will work with any theme. The template files in 1.7 are minimally designed to fit inside existing WP themes. You can then add a few more styles to your WP theme to make the BP template files look even better with your theme.

You can test out the new way BuddyPress theming will work: https://github.com/paulgibbs/turtleshell

@ronnie_fantastic You’re welcome. Glad you’ve resolved issues on your own. Some finishing touches to your stylesheet you might like to consider:

`
Add these to bottom of stylesheet:

div.item-list-tabs ul li {
background-image: none;
margin-left: 0;
margin-right: 5px;
}
div#subnav.item-list-tabs {
border-bottom: 0;
}
.padder div.pagination {
margin: 0 !important;
}

CHANGE
div.item-list-tabs ul li:first-child {
margin-left: 15px !important;
}
to
div.item-list-tabs ul li:first-child {
margin-left: 0 !important;
}`

B. At the bottom of the same 16 files, replace:
`

`

with the following (except for registration/register.php):
`

`

with the following for registration/register.php:
`

jQuery(document).ready( function() {
if ( jQuery(‘div#blog-details’).length && !jQuery(‘div#blog-details’).hasClass(‘show’) )
jQuery(‘div#blog-details’).toggle();
jQuery( ‘input#signup_with_blog’ ).click( function() {
jQuery(‘div#blog-details’).fadeOut().toggle();
});
});

`

Save files.

C. Upload the 6 BP folders containing the 16 files you’ve just revised to your server wp-content/themes/flare/

D. Copy the style modifications made in BP Twenty Ten at https://codex.buddypress.org/theme-development/theme-dev-bp-template-pack-walkthrough-twenty-ten-bp-1-5/3/ and paste to your theme’s stylesheet. Adjust to taste.