BuddyPress.org

Adding bp_adminbar_notifications_menu() in your header will probably work (as long as it’s nested inside of a `

` element), but you will need to modify the styles. You can go in one of two directions.

One, you can try to bring over the styles from bp-default/_inc/css/adminbar.css. You can import that entire stylesheet into your child theme with this line at the top of your child theme’s style.css:
`@`import url( ../../plugins/buddypress/bp-themes/bp-default/_inc/css/adminbar.css );
(See https://codex.buddypress.org/theme-development/building-a-buddypress-child-theme/ for more info on BP child themes.) The downside of doing this is that, depending on your theme and the element in which you’re trying to nest the notifications menu, you’re going to have a really hard time getting it to look good with your theme.

The other method is to skip bp_adminbar_notifications_menu() altogether. Instead, copy the entirety of that function from bp-core/bp-core-adminbar.php into functions.php of you child theme. After you’ve copied it, change the name of the copied function (to something like wwday3_adminbar_notifications_menu() – it doesn’t matter, you just have to avoid duplicate function names). Then – and here’s what will make your life easier – change the markup, and in particular the CSS selectors (classes and ids) being produced by the function, so that it matches the CSS selectors in the existing dropdown menus you’re trying to integrate with. Then, in header.php of your child theme (or wherever you’re currently trying to call bp_adminbar_notifications_menu()), make sure to call this new function instead.

Add this at the bottom of your stylesheet

`div.activity { background: transparent url(“images/mp-sprite-content-bg.png”) top center repeat-y; }`

@linkyou, add this to your theme’s css:

`
/* Inherit the default theme styles */
@import url( ../../plugins/buddypress/bp-themes/bp-default/_inc/css/default.css );

/* Inherit the default theme adminbar styles */
@import url( ../../plugins/buddypress/bp-themes/bp-default/_inc/css/adminbar.css );
`

And put this in your functions.php

`// Load the AJAX functions for the theme
require_once( TEMPLATEPATH . ‘/_inc/ajax.php’ );

// Load the javascript for the theme
wp_enqueue_script( ‘dtheme-ajax-js’, get_template_directory_uri() . ‘/_inc/global.js’, array( ‘jquery’ ) );

// Add words that we need to use in JS to the end of the page so they can be translated and still used.
$params = array(
‘my_favs’ => __( ‘My Favorites’, ‘buddypress’ ),
‘accepted’ => __( ‘Accepted’, ‘buddypress’ ),
‘rejected’ => __( ‘Rejected’, ‘buddypress’ ),
‘show_all_comments’ => __( ‘Show all comments for this thread’, ‘buddypress’ ),
‘show_all’ => __( ‘Show all’, ‘buddypress’ ),
‘comments’ => __( ‘comments’, ‘buddypress’ ),
‘close’ => __( ‘Close’, ‘buddypress’ ),
‘mention_explain’ => sprintf( __( “%s is a unique identifier for %s that you can type into any message on this site. %s will be sent a notification and a link to your message any time you use it.”, ‘buddypress’ ), ‘@’ . bp_get_displayed_user_username(), bp_get_user_firstname( bp_get_displayed_user_fullname() ), bp_get_user_firstname( bp_get_displayed_user_fullname() ) )
);
wp_localize_script( ‘dtheme-ajax-js’, ‘BP_DTheme’, $params );`

Should put styles of the buddypress default theme into your theme. I would go into plugins/buddypress/bp-themes/bp-default/_inc/css/default.css and remove all the contents of:

`/* > Global Elements

---

*/
/* > Admin Bar

---

*/
/* > Header

---

*/
/* > Navigation

---

*/
/* > Container

---

*/
/* > Sidebar

---

*/
/* > Content

---

*/`

You can have an alternate color of whatever you want in your theme via css, with this simple css rule:

` tr.alt { background-color: #f4f4f4; } `

Since your using the buddypress default theme, you will add this rule under the:

`/* > WordPress Blog Comment Styles

---

*/` to something like:

`#comments ol.commentlist tr.alt {
background-color: #f4f4f4;
}`

If you are talking about the adminbar (very top) then the template plugin references the file from the bp-default theme in the buddypress plugin directory but you can disable that file and code your own styles or place a copy of the file in your themes folder and add an @import call to it in your style.css, then changes will be preserved when you update BP (that can be a good or bad thing depending on the changes)

@hnla, and @xberserker, I figured out the culprit to this, but I am not sure why it does not take until 1.2.6 to happen.

The double button is because you have called 2 stylesheets from the same buddypress default.css. The most common mistake is the css from the bp template pack being applied, and than calling the same css from the bp-themes/bp-default/css/default.css. You need to remove one, and it should solve the double button issue.

fjrichman… I agree this is a problem. It would be one thing if BuddyPress only added the padding when the site visitor was logged in, but it’s poor form to add 25px pixels padding to the body regardless. I understand that it would be a problem for WordPress developers who don’t call body_class(), but, by default, the BuddyPress default stylesheet (adminbar.css) should specify its padding on body.logged-in, not on the generic body tag. In any case, that’s the easiest solution I know of. Just modify adminbar.css (most likely at /wp-content/plugins/buddypress/bp-themes/bp-default/_inc/css/adminbar.css) on the first line to body.logged-in. If for some reason you have themes that don’t or can’t call body_class(), you can use the is_user_logged_in function to override the BuddyPress styling. Something like: `body#mypage { padding: 0px; } `. Hope that helps, two months later.
—
Looking back at your question, I see that you were actually asking more generally to start about BuddyPress tweaking a design wether or not the user is logged in. Well, in that case it would be harder to have a one-size-fits-all solution. Sorry if I missed the thrust of your question, but this may be helpful to others.

Blogs: You have to enable multisite in your WP install first before you can let journalists create their own blogs. Read how to https://codex.wordpress.org/Create_A_Network

Template Pack: Here’s a BP Template Pack walkthrough which could shed some light on how to add styles – https://codex.buddypress.org/theme-development/bp-template-pack-walkthrough-level-easy-2/
Basically, you copy some styling from bp-default theme and tweak it to taste.

@AnindyaRay I see that you’ve found a header parallax tutorial. The thing is, since you’re on localhost, it’s not as easy to ID the exact corrections which would give you a fix for what’s there in the image you uploaded. That being said, my stab in the dark is adding the following style to your child theme’s stylesheet
`body {
max-width: change to 960px;
}`
which will override the parent theme’s max-width of 1250px

If that doesn’t work, install the Firefox add http://getfirebug.com/ to find styling fix

@pcwriter go for it, it’s there to be used if it suits the purpose. – API keys were always a pain

@leguis08 Glad it works.

@gunju2221 It is very possibly a custom theme issue, a custom theme will have to have ensured that the correct action hooks exist in pages as the main maps are fed through to the page via these, you could test with the widget instead which was provided really so that site admins could place the map in more refined custom widitised areas of the members profile pages if they existed.

When writing something like this you can only account for that which is known thus the included stylesheet is there simply to try and style the map if it’s dropped into bp-default, therefore those styles may not have relevance to a custom theme, especially where that theme may be heavily modified, however the basic styles are worked on elements and element id’s/classes that should exist in any theme.

The other aspect of course is that you must have created that extended profile field and named it ‘location’ and existing users will then need to actually edit their profile to add an address or partial address for the map to display, if a user hasn’t filled this item in then the map does not display at all.

You can get all the styling for you custom theme in /plugins/buddypress/bp-themes/bp-default/inc/css/default.css

In order for it to take affect in your theme you need to add “/* Inherit the default theme styles */
@import url( ../../plugins/buddypress/bp-themes/bp-default/_inc/css/default.css );” into your custom css page.

Simple revisions via adding some styles in active theme’s style.css file
#1 can be addressed by adding `{ display: none; }` to specific widget’s avatar image
#2 which list are you referring to? In any case, add missing styles for the the overlapping images in lists with something like `{ float: left; clear: left; }` specific to the list ID or class
#3 can add styling like `body.members img.avatar { width: 35px; height: 35px; }`

@djpaul here’s what I got so far. I think a couple of these styles are redundant or could be redone with less code. I didn’t mess with the original nav css, that code might be able to be integrated into the drop menu’s css.

/* Menu

---

*/

ul#nav li.selected:hover > a,
ul#nav li.current_page_item:hover > a,
ul#nav li.current_menu_item:hover > a {
background: #333;
color: #fff;
}

#nav ul {
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
display: none;
position: absolute;
top: 30px;
left: 0;
float: left;
width: 180px;
z-index: 99999;
}

#nav ul li {
min-width: 180px;
position: relative;
}

#nav ul a {
background: #333;
padding: 10px;
width: 160px;
height: auto;
}

#nav ul li a {
-moz-border-radius-topleft: 0px;
-webkit-border-top-left-radius: 0px;
-moz-border-radius-topright: 0px;
-webkit-border-top-right-radius: 0px;
}

#nav ul.sub-menu li a {
background: #333;
color: #fff;
}

#nav li.current_page_item a:hover,
#nav li.current_menu_item a:hover,
#nav ul.sub-menu li a:hover {
background: #222;
}

#nav li:hover > a,
#nav ul ul :hover > a {
background: #333;
color: #fff;
}

#nav li:hover > ul {
display: block;
}

#nav ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}

1. Build a bp-default child theme – https://codex.buddypress.org/extending-buddypress/building-a-buddypress-child-theme/
2. Open up style.css file of child theme and override fonts, colors and widths of parent theme elements by adding new styles for said elements

Are you sure that your custom-sample.css file is actually being included? With a file name like ‘custom-sample’, I’m guessing that it might not be. Check out the theme’s main style.css, and see if there’s an @import rule for custom-sample.css (or if there is a rule in any other imported stylesheet).

I’m not sure how bp-social works (it appears to be a premium theme so I can’t look at the code) but if it is a child of bp-default, then you won’t be able to create a “grandchild” theme so that your changes won’t be overridden – WP doesn’t support that. However, you could fake it by dropping a snippet in your bp-custom.php file that looks something like this:

`function bbg_custom_style() {
$myStyleUrl = WP_PLUGIN_URL . ‘/custom.css’;
$myStyleFile = WP_PLUGIN_DIR . ‘/custom.css’;
if ( file_exists($myStyleFile) ) {
wp_register_style(‘myStyleSheet’, $myStyleUrl);
wp_enqueue_style( ‘myStyleSheet’);
}
}
add_action(‘wp_print_styles’, ‘bbg_custom_style’);`

(See https://codex.wordpress.org/Function_Reference/wp_enqueue_style for more info on how to enqueue styles)

Just make sure that you have your custom styles in a file called custom.css in your plugin directory. That should make sure that your styles get loaded, but that they don’t get overwritten by future upgrades to your main theme.

@ovizii That is not intended behaviour; the plugin has it’s own templates built off the default theme for BuddyPress; if you’re using a custom theme you’ll have to add your own templates. You might be able to get by with just changing the styles of the EventPress templates; the theme files are stored under eventpress/themes/bp and buddypress-custom-posts/themes/ . Any file you place in your own theme folder with the same name/relative path will directly over-ride these default theme files.

@chouf1 – yes, I know where the adminbar.css file is. Coda is my friend

The question was, why is adminbar.css being included in other themes (even none child ones) on a multisite network? What’s injecting it, and how do we turn it off.

e.g. My theme doesn’t explicitly link to adminbar.css, here’s the snippet from the header.php:

`

<link rel="stylesheet" type="text/css" media="all" href="” />
<link rel="pingback" href="” />
<?php
if ( is_singular() && get_option( ‘thread_comments’ ) )
wp_enqueue_script( ‘comment-reply’ );

wp_head();
`

No explicit inclusion of adminbar.css!

But, here’s what actually gets rendered in the browser:

`

`

The unwanted link to adminbar.css has been injected.

I assume it must be something in wp-head() doing it – is there a hook to turn it off?

Where do you see it?

look at the default.css look for the ‘body’ ruleset

<snip>
`
@import url( reset.css ); /* Reset browser defaults */

/* > Global Elements

---

*/

body {
background: #eaeaea url( ../images/background.gif ) top left repeat-x;
font-size: 12px;
font-family: Arial, Tahoma, Verdana, sans-serif;
line-height: 170%;
color: #555;
width: 90%; <<<<<<<<<
min-width: 960px; <<<<<< delete
max-width: 1250px; <<<<<< delete
margin: 0 auto;
padding-top: 0 !important; /* Remove the top padding space for the admin bar in this theme */
}
body.activity-permalink {
min-width: 960px; <<<<< delete both change to width
max-width: 960px;
}

h1, h2, h3, h4, h5, h6 {
margin: 5px 0 15px 0;
}

h1 { font-size: 28px; margin-bottom: 25px; }
h2 { font-size: 24px; margin-bottom: 20px; }
h3 { font-size: 20px; }
h4 { font-size:
`
Do all that in a copy of the file in your child theme otherwise the changes will be overwritten when you upgrade BP

Child theme can simply be a new folder under /themes containing new styles.css and calls to copies of the other BP stylesheets which you’ll modify in stead of the original, the codex/docs has greater detail on this.

@PJnu: Yep so far I’ve tried a bunch of popular plugins and they work and look fine! BP-Slick is a Child Theme of the standard Theme and inherits a lot of it’s templates. The templates I’ve added are build with the same classes and template structure so this means that all plugins which are developed for BP-Default (I think all plugins are) are working fine.

Plugins that are really extensive (BP-Media, CourseWare etc) might require some additional styling, but these modifications can be shared in the support group. Everyone who has bought the plugin can upload/download new templates, styles and tweaks for the Theme. So if something does not behave as expected, chances are that me (or someone else) has fixed it and has put it up for grabs in the “goodies” section of the support group!

In your child theme’s stylesheet, add this:
a {color:red !important;}

If you made a copy of the bp-default stylesheets in your child theme, that rule would be located in /_inc/css/default.css.

What’s all this talk about child themes? Read up here:
https://codex.buddypress.org/how-to-guides/building-a-buddypress-child-theme/

Try this which should work:

/*
Theme Name: TSS
Theme URI: http://www.thescratchingshed.com/themes/tss/
Description: TSS custom
Version: 1.0
Author: TSS
Author URI: http://www.thescratchingshed.com/
Template: bp-default
Tags: buddypress, two-column, blue, white
*/

/* Inherit the default theme styles */

@import url( ../../plugins/buddypress/bp-themes/bp-default/_inc/css/default.css );

/* Inherit the default theme adminbar styles */

@import url( ../../plugins/buddypress/bp-themes/bp-default/_inc/css/adminbar.css );

/* Begin custom styles

---

*/
/* change primary sidebar width to 300px */
div#content .padder {margin-right:300px;}
div#sidebar {width:300px;margin-left:-301px;}

When you refer to a child theme it refers to the ability to create a new blank folder within the ‘theme’ folder this would be considered a ‘Child theme’ if it simply had a stylesheet residing in it’s root /top level that stated it was using the files from a particular parent theme, what then happens is having selected this theme – which now would appear in your dashboard themes page, – WP examines the stylesheet information at the top of the file and finds that it instructs WP to look for files in a particular theme as being the main theme files to use; however the clever trick is that WP first knows that it must look in your child theme for necessary files FIRST! and if they are not found THEN look for the necessary file in the stated parent theme, thus you do not have to have any files in your child theme as WP will use the parent files, but you can add new CSS rulesets to the stylesheet living in the child theme and these will be read and acted on (that stylesheet references the parent CSS stylesheet files through the @import rule first and then reads on for any additional rules you have added below the @import calls)

If you do not want to make any changes to BP-Default theme then you simply activate that theme as seen in the theme page in the dashboard. When members create a blog then those blogs should use the twentyten theme or whatever other themes you choose to download and make available (Note that you decide what themes are available to members via the ‘Super Admin >Themes’ page only the themes that you select ‘yes’ to are available to member blogs so to avoid them attempting to use the BP-Default on user blogs you ensure BP themes are not selected)

If you decide that you do need to make changes to BP-Default theme then you would create a folder under ‘Themes’ name it ? ‘my-bp-default’
to the folder you add the requisite stylesheet and now you can move files as required from bp-Default original folder to your new folder and edit them as you wish, or simply create new rulesets to style elements which you place in the new stylesheet file. BP/WP now looks at your new child theme for any files that it must use in preference to the same versions that might reside in the original theme folder.

Apologies if the above covers ground you already understand.

Ok guys here is what I found may work. If you implement the two additional plugins into your site, you should never see the wp-admin page while using a buddypress site.
1. Be sure not to disable BuddyPress to WordPress profile syncing in Buddy Press settings. You want to link both the buddy press and word press site together
Now for the rest of the settings
2. Install Absolute Privacy
Under settings: Lockdown the site and Block admin access. For the “Redirect Non-logged in Users To:” part: enter your Login page permalink for My Login
3. Install Theme My Login
Under settings for Theme My Login: Put a 0 for Page ID and ensure the other 3 check boxes are selected, Pagelist, Links, and Stylesheet.
NOTE: In order to log out from your wordpress control panel you will need to click the link at the top left of your wordpress control panel to get back out to the buddy press site. You should still be logged in as your user in Buddy Press. Simply chose log out and viola you should not see the wp-admin. Test it out by entering a fake username/password, you should bounce back to buddypress login screen..
Same thing with the login procedure. You will need to log in through buddypress and click on “edit this entry” to get back to the wordpress control panel.
Another layer of wp-admin lockout may be to create a redirect for wp-admin and wp-admin.php
ALSO: It doesn’t seem like Buddy Press Sliding Login Plugin works with this setting so it may be wise to disable that feature. Be sure to backup, as results may vary. Proceed at your own discretion.