Save file.
B. Copy sidebar.php and Save As > sidebar-buddypress.php
Open up sidebar-buddypress.php and at the top of the file, above all other code, add this:
`
Hello all,
I’ve been trying to get buddypress integrated with my theme and I’m not having much luck. I have it on my website now at http://www.critterhub.com, but a lot of the styling is off… Places overlap, sidebars are messed up, etc.
I read the tutorial about how to change each buddypress file to the structure of my main theme (Boulevard), but still can’t figure it out.
Any help?
Thanks,
Neodoxa
To fix alignment of BP template files to fit your theme’s HTML structure, open up your theme’s header.php, copy code, paste code in pastebin.com, click submit and post the generated pastebin irl here. Do the same for your index.php, page.php, sidebar.php and footer.php
Thank you SO much for the reply! Here are the codes…
Header: http://pastebin.com/eHZER4us
Index: http://pastebin.com/9Z8xxqGe
Page: http://pastebin.com/niyjCMJF
Sidebar: http://pastebin.com/w29NwLh4
Footer: http://pastebin.com/hcEqrCps
Why do you have the code to BP’s members/index.php as the index.php of your theme in pastebin.com? I suggest you re-upload your boulevard theme files again, just in case.
If you’ve tried to revise the BP template files transferred to your boulevard theme folder during the compatibility process, I suggest you delete those 6 folders from your theme folder. Then re-run Appearance > BP Compatibility again just to make sure you have clean template files.
Looks like you only need to create two files and upload it to your boulevard theme folder in server.
A. Copy header.php and Save As > header-buddypress.php.
Open up header-buddypress.php and at the bottom of the file, below all other code, add this:
`
Save file.
B. Copy sidebar.php and Save As > sidebar-buddypress.php
Open up sidebar-buddypress.php and at the top of the file, above all other code, add this:
`
`
At the bottom of the same file, below all other code, add this:
`
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 wp-content/themes/boulevard
D. Style modifications for BP templates – you might want to use some or all of styles listed in this page https://codex.buddypress.org/theme-development/theme-dev-bp-template-pack-walkthrough-twenty-ten-bp-1-5/3/
Thanks for the reply!
So I did that… made the copy of the header and sidebar, and inserted those codes to the ends of them. Now it sort of scrunched everything inside of a box without the sidebar being on the right anymore… visit http://www.critterhub.com/forums/groups/ to see what I am talking about.
Did I do something wrong? Thanks!
You’re missing the whole div#sidebar. Per note above, copy sidebar.php (which contains div#sidebar) and Save As sidebar-buddypress.php
Thanks. It works fine now.
A bunch of the buddypress pages are “Page Not Found”… I don’t know how that would have happened. I’ve tried uninstalling the buddypress plugin and reinstalling it, but it does the same thing. How do I completely uninstall buddypress and its files so that I can start over and have all of the buddypress-associated pages work?
Thanks!
Also, which php file do I add the tweaks to? (https://codex.buddypress.org/theme-development/theme-dev-bp-template-pack-walkthrough-twenty-ten-bp-1-5/3/)
== A bunch of the buddypress pages are “Page Not Found”… ==
Re-run Settings > Permalinks and choose permalink other than default.
You add the style modifications at the bottom of your boulevard theme’s stylesheet
I checked my permalinks, and they were set on Post Name, rather than default. So I don’t know why none of the buddypress pages are working…
Missed it previously.,I see it now. BP components must be parent page levels in “Page Attributes” at this time. If you want to “show” that Members and Group Pages are under Forums, the use custom menu and position the Members and Group Pages under Forums
Thanks for all of the help, mercime. I got it pretty much all sorted out thanks to your awesome assistance!
One more thing… I added those tweaks to the end of my style.css for the boulevard theme, but did not see any difference take effect.
All I’m supposed to do is copy and paste the code onto the very end of my style.css, right?
Thanks again,
Neodoxa
== I’m supposed to do is copy and paste the code onto the very end of my style.css, right? ==
Yes. I checked your theme’s style.css file and the style modifications are not there.
I put the bottom of my style.css file into pastebin… http://pastebin.com/qjLUthgP
Is that the right way to add in the buddypress codes?
Thanks.
Ok, so here are some pictures showing the formatting problems I’m experiencing. I’m sure that the tweaks you posted about probably fix some of them, but I added them to the end of my style.css (see the pastebin link in the post above) and didn’t see any changes take effect.
Here is a screenshot of a buddypress user profile. As you can see, the bottom is cut off. I also want to get rid of the bulletpoints next to each link on the profile.
http://i40.tinypic.com/mt09d5.png
Here is a screenshot of some sample groups I created… The descriptions are cut off on them. And the text on the right side goes beyond the white text box background.
http://i43.tinypic.com/jb4qky.png
Here is a screenshot of the main forum incorporating all of the groups. There are some alignment issues here as well. Also, I’d like to be able to remove the bulletpoints from the links (circled in red).
http://i43.tinypic.com/5vtbw7.png
Thanks in advance,
Neodoxa
Bump.
Could a file be overwriting my style.css for my theme somehow? I am really scratching my head here as to why no changes I make to my style.css take effect.
Hate to bump this again… I just really need the help with fixing this. Any help from anyone? @mercime ?
@neodoxa first thing, we have to remove the default image background and default left padding, etc. in your theme by adding following to your stylesheet:
`div#item-nav ul,
div#item-body ul {
padding-left: 0;
}
div#item-nav ul li,
div#item-body ul li {
background: transparent none;
}`
You should install Firebug, a Firefox add-on, to help you identify and correct styles
See also: WordPress.org • bbPress.org • BuddyPress.org • Matt • Blog RSS