Here’s my bbPress integration:

http://www.itinerantangler.com/blog/board/forums/

Only problem is the queries are running a bit slow right now. I posted about that in Troubleshooting.

I successfully transferred a 75k post board from Yabb 2.3 –> YaBB 2.4 –> SMF 1.4 –> phpBB3 –> bbPress. I’m kinda proud of that. It took a LOT of work.

[@macpresss Participant 11 years, 7 months ago]

Nice website, looks pretty.. only ‘problem’ it took about 12 seconds to load the pages.

[@johnjamesjacoby Keymaster 11 years, 7 months ago]

Are you able to profile your site (probably using the Debug Bar plugin) to get more information on what queries are running slowly? According to your other topic, it sounds like some other plugins were the culprit.

If you’d like to help improve the forum, view, and topic-index queries, we have this ticket open for bbPress 2.5: https://bbpress.trac.wordpress.org/ticket/1925

[@zachmatthews Participant 11 years, 5 months ago]

Hey guys –

The page load times were due to a couple slow plug ins which I was able to identify with the P3 Plug In Profiler and remove. Load time is now sub 1.5s per page (once you load the heavy banners – I need to reduce the size on those but I haven’t found the time yet since they are site-wide and it will take me a while to reconfigure everything).

Thanks for the feedback. I still haven’t been able to make BuddyPress play nice but bbPress is at last fully functional with Pinboard.

Zach

[@kvr28 Participant 10 years, 9 months ago]

That’s pretty outstanding, any suggestions for a new person to bbpress how to set up a style like that?

[@zachmatthews Participant 10 years, 9 months ago]

Sure, you can get pretty close just by mimicking my settings and dropping my custom CSS in.

Install the Pinboard Theme and the BBPress plug in, then in your admin page go to Appearances/Themes and choose Pinboard to modify.

Pinboard is built with an admin section for you to add custom CSS to, which is great since it essentially takes the place of having to go through and tweak the crap out of a child theme.

In the Appearance/Themes section, choose Theme Options, then in the tab at the top choose Layout. Set the layout for 2 Content columns, 2 Boxes Sidebar columns and 4 Footer columns, but keep in mind that out of the box BBPress is broken with Pinboard. However, I have a ton of CSS tweaks that fix BBPress on Pinboard, and you’ll want to cut and paste those in to the “Custom CSS” box at the bottom of the layout page. Once you implement those tweaks you should have a workable version of BBPress that you can further tweak.

Custom CSS:

`#bbpress-forums #bbp-user-wrapper h2.entry-title {
margin-left: 0 !important;
}

#bbpress-forums {
font-size: 1.2em;
}

.bbp-attachments-count {
width: 0;
height: 0;
}

#slider .entry-title a {
display: none;
}

.flex-direction-nav,.flex-pauseplay {
display: none;
}

#bbpress-forums iframe,#bbpress-forums embed {
max-height: 400px;
max-width: 600px;
margin-left: 0 !important;
}

fieldset {
border: 0;
}

.fluid-width-video-wrapper {
padding-bottom: 0 !important;
padding-top: 45% !important;
}

.bbp-reply-content {
margin-left: 140px !important;
font-size: 14px;
margin-right: 10px;
}

.bbp-topic-content {
margin-left: 120px !important;
}

#bbpress-forums div.bbp-the-content-wrapper textarea.bbp-the-content {
font-size: 15px !important;
}

#bbpress-forums {
font-size: 14px !important;
}

.bbp-topic-permalink {
font-size: 16px !important;
margin-right: 3px;
}

.bbp-reply-header a.bbp-reply-permalink {
color: #00548c;
}

a.button.logout-link {
color: #f1f1f1 !important;
background-color: #111;
}

p {
font-size: 14px;
margin-right: 20px;
}

button {
color: #fff !important;
background-color: #555;
padding: 6px 18px !important;
border-style: solid !important;
border-color: #000 !important;
border-width: 1px !important;
border-radius: 5px;
}

input {
border: #9e9e9e 1px solid !important;
border-radius: 5px;
margin: 0 0 8px;
box-shadow: inset 1px 1px 10px rgba(0,0,0,.2);
background-color: #FCFCFC;
}

#sidebar-header {
float: none !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
border-top: solid 1px #333 !important;
border-bottom: solid 1px #333 !important;
}

#sidebar-header a {
padding: 0 !important;
}

#bbpress-forums div.bbp-reply-header {
background-color: #c3c3c3;
}

.bbp-admin-links a {
color: #00548c !important;
}

.bbp-admin-links a:hover {
color: #d54e21 !important;
}

#bbpress-forums ul.bbp-replies {
border: 1px solid #ccc;
}

#bbpress-forums .bbp-topic-content ul.bbp-topic-revision-log,#bbpress-forums .bbp-reply-content ul.bbp-topic-revision-log,#bbpress-forums .bbp-reply-content ul.bbp-reply-revision-log {
border-top: 1px solid #ccc;
}

#bbpress-forums .bbp-reply-content ul.bbp-reply-revision-log {
color: #666;
}

#bbpress-forums ul.bbp-reply-revision-log img.avatar {
margin-left: 3px;
margin-right: 3px;
}

.entry-content a img {
padding: 0;
margin-bottom: -3px;
}

.wp-editor-container {
border-color: #aaa !important;
}

.quicktags-toolbar {
border-bottom: 1px solid #aaa !important;
border-top-right-radius: 5px !important;
border-top-left-radius: 5px !important;
border-top: 1px solid #AFAFAF;
border-right: 1px solid #AFAFAF;
border-left: 1px solid #AFAFAF;
}

#bbpress-forums div.bbp-the-content-wrapper div.quicktags-toolbar {
padding: 0;
padding-top: 5px;
padding-left: 5px;
}

#bbpress-forums ul.bbp-topics {
border: 1px solid #ccc;
}

.bbp-topics-front ul.super-sticky,.bbp-topics ul.super-sticky,.bbp-topics ul.sticky,.bbp-forum-content ul.sticky {
background-color: #f0f8ff;
}

#bbpress-forums fieldset.bbp-form {
border: 1px solid #ccc;
}

#bbp_topic_title {
box-shadow: inset 1px 1px 10px rgba(0,0,0,.2);
}

#bbpress-forums div.bbp-the-content-wrapper textarea.bbp-the-content {
box-shadow: inset 1px 1px 20px rgba(0,0,0,.2);
border-right: solid 1px #AFAFAF;
border-left: solid 1px #AFAFAF;
border-bottom: solid 1px #AFAFAF;
}

input#bbp_topic_tags {
box-shadow: inset 1px 1px 10px rgba(0,0,0,.2);
}

.bbp-forum-title {
font-weight: 400;
margin-left: 0 !important;
font-size: 18px;
font-family: Oswald, “sans serif”;
}

#bbpress-forums div.odd,#bbpress-forums ul.odd {
background-color: #f3f3f3;
}

#access {
background: #333 url(http://www.itinerantangler.com/global/body-bg12.png) repeat top left !important;
padding-left: 0 !important;
padding-right: 0 !important;
}

#access ul {
padding-left: 35px;
font-family: Oswald, sans-serif;
font-weight: 300 !important;
font-size: 13.5px;
letter-spacing: .7px;
}

#bbpress-forums li.bbp-header {
background: #f1f1f1 url(http://www.itinerantangler.com/global/body-bg12.png) repeat top left !important;
border-top: none !important;
width: 100%;
border-bottom: 1px solid #d3d3d3 !important;
}

#footer-area {
background: #333 url(http://www.itinerantangler.com/global/body-bg12.png) repeat top left !important;
}

.entry-content a:hover {
color: #d54e21;
}

.entry-content a img,#attachment-nav a img {
border: none !important;
box-shadow: none !important;
}

.entry-content a:hover img,#attachment-nav a:hover img {
border: none !important;
box-shadow: none !important;
}

.onecol .onecol .entry-summary,.entry-content {
padding: 20px;
}

.onecol .hentry .entry {
padding: 20px;
}

.single .entry-title {
margin-left: 20px !important;
margin-bottom: -10px !important;
}

#bbpress-forums li.bbp-body ul.topic {
border-top: 1px solid #eee;
padding-top: 5px !important;
padding-bottom: 0 !important;
padding-left: none !important;
padding-right: none !important;
}

#bbpress-forums p.bbp-topic-meta {
margin: 0 0 5px;
}

li.bbp-topic-title {
padding-left: 10px;
}

#url,#email {
text-indent: 0 !important;
}

a.bbpl_button {
width: 25px !important;
}

li.bbp-forum-info {
text-indent: 50px;
}

#bbpress-forums .bbp-forum-info .bbp-forum-content,#bbpress-forums p.bbp-topic-met {
margin: 0 !important;
}

#bbpress-forums li.bbp-body ul.topic {
padding: 0 !important;
}

#bbpress-forums p.bbp-topic-meta img.avatar {
margin-bottom: -3px !important;
}

#bbpress-forums div.bbp-template-notice img.avatar {
margin-bottom: -3px !important;
}

div.bbp-template-notice {
background-color: #F0EAD6;
border-color: #B6A9A6;
}

li.bbp-header div.bbp-reply-content span#subscription-toggle {
margin-right: 10px;
}

div.bbp-template-notice,#bbpress-forums ul.bbp-replies,#bbpress-forums fieldset.bbp-form {
border-radius: 5px !important;
}

#bbpress-forums fieldset.bbp-form input {
padding: 3px;
}

.bbp-reply-content img,video {
width: auto;
height: auto;
max-height: 750px;
max-width: 750px;
}

.bbp-reply-revision-log,.bbp-topic-revision-log {
display: none;
}

#buddypress {
float: left;
width: 100%;
}

#buddypress div#item-body div.profile {
float: right;
width: 825px;
margin-top: -325px;
}

#buddypress div#item-body div#bbpress-forums {
float: right;
width: 825px;
margin-top: -425px;
}

#buddypress div#item-body form {
float: right;
width: 825px;
margin-top: -425px;
}

#buddypress div#item-body div.messages {
float: right;
width: 825px;
margin-top: -425px;
}

#buddypress div#item-body div.profile table.wp-profile-fields td {
text-align: left;
padding: 10px;
}

/* New Message Icon */
.bbpresss_unread_posts_icon a img {
background-color: transparent;
}
.bbpresss_unread_posts_icon {
float: left;
margin-right: 10px;
}

/* Private Messaging */
#buddypress div#item-body div.profile h4 {
font-weight: 400;
}

#pm-content {
border: 1px solid #fff !important;
}

#pm-content tbody {
border-radius: 5px;
}

#pm-content td,#pm-content tr,#pm-content th {
border: 1px solid #f1f1f1 !important;
}

#pm-content th {
background-color: #f1f1f1;
}

#pm-header {
border-color: #f1f1f1 !important;
background-color: #f1f1f1;
border-radius: 5px;
}

/* BBPress Member Profiles */
form#bbp-your-profile table {
text-align: left;
}

.bbp-footer {
background: #f1f1f1 url(http://www.itinerantangler.com/global/body-bg12.png) repeat top left !important;
}

td#simple-local-avatar-photo {
width: auto !important;
}

.entry-title {
margin-left: 20px !important;
text-shadow: 0 1px 2px #999;
font-size: 36px !important;
}

#bbpress-forums div.bbp-the-content-wrapper textarea.bbp-the-content {
font-family: inherit;
box-shadow: inset 1px 1px 20px rgba(0,0,0,.2);
border-right: solid 1px #AFAFAF;
border-left: solid 1px #AFAFAF;
border-bottom: solid 1px #AFAFAF;
}

div.bbp-template-notice.info {
border: #B6A9A6 1px solid;
background-color: #f0ead6;
}

element.style {
}

#bbpress-forums li.bbp-body ul.topic {
padding: 0 !important;
}

#bbpress-forums li.bbp-body ul.topic {
border-top: 1px solid #eee;
padding-top: 5px !important;
padding-bottom: 0 !important;
padding-left: none !important;
padding-right: none !important;
}

#bbpress-forums li.bbp-body ul.forum,#bbpress-forums li.bbp-body ul.topic {
border-top: 1px solid #eee;
overflow: hidden;
padding: 0;
padding-top: 8px;
padding-bottom: 8px;
}

.single #content .hentry,.page #content .hentry {
box-shadow: none;
background: none;
border: none;
}

#bbpress-forums div.odd,#bbpress-forums ul.odd {
background-color: #f3f3f3;
}

#bbpress-forums div.odd,#bbpress-forums ul.odd {
background-color: #f1f1f1;
}

#bbpress-forums ul {
background: none;
list-style: none;
margin: 0;
padding: 0;
}

.bbp-topics-front ul.super-sticky,.bbp-topics ul.super-sticky,.bbp-topics ul.sticky,.bbp-forum-content ul.sticky {
background-color: #f0f8ff;
}

.bbp-topics-front ul.super-sticky,.bbp-topics ul.super-sticky,.bbp-topics ul.sticky,.bbp-forum-content ul.sticky {
background-color: #f0ead6 !important;
font-size: 1.1em;
}

#bbpress-forums div.bbp-forum-author,#bbpress-forums div.bbp-topic-author,#bbpress-forums div.bbp-reply-author {
float: left;
text-align: center;
width: 125px;
}

#bbpress-forums li.bbp-header,#bbpress-forums li.bbp-footer {
font-size: 14px;
padding: 0px;
padding-top: 8px;
padding-bottom: 8px;
}

#copyright {
width:185%;
text-align: center;
}

body
{
-webkit-animation-duration: 0.1s;
-webkit-animation-name: fontfix;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0.1s;
}

@-webkit-keyframes fontfix{
from{ opacity: 1; }
to{ opacity: 1; }
}

.entry-title {
width: 250%;
}

.bbp-topics ul.super-sticky, .bbp-topics ul.sticky, .bbp-forum-content ul.sticky {
border-bottom: #E2D7B4 1px solid !important;
}

#bbpress-forums div.bbp-reply-content img {
max-width: 750px;
}

.threefourthcol .threecol .entry, .onecol .fourcol .entry, .fourcol .widget {
margin: 0;
margin-left: 5%;
margin-right: 5%;}

input:-webkit-autofill, textarea:-webkit-autofill {
background-color: #f0ead6 !important;
}

#bbpress-forums div.bbp-reply-author a.bbp-author-name {
clear: left;
display: inline-flex;

/* WP Ultimate Search results page */
#wpus_response .entry {
border-bottom: none;
border-bottom: none;
box-shadow: none;
}’

Good luck and post if you get it working so we can check it out.

[@kvr28 Participant 10 years, 9 months ago]

Dude, your awesome, I didn’t expect that at all, I will try this on my staging server, if you have a 300×250 banner for your site, I will put it where the tractor supply ad is for 30 days for free

Home Page

thank-you for your help

[@zachmatthews Participant 10 years, 9 months ago]

It’s a nice site; no worries about the ad, but I would be curious to see what that code does to an out of the box version of bbPress. It should get it pretty close; I just use a lot of ‘Inspect Element’ clicking to figure out what might be broken and tweak it. The main issue with bbPress and Pinboard is to do with the .onecol format, which for some reason is broken. Just an FYI, I’ve also modified the header.php file and the search.php file in Pinboard to move their built-in slider up to the utmost top of the page, so I can use it as a banner. It doesn’t quite work on my forums page, because that’s actually in a sub-category but in the blog section it slides. Just to explain why that may look different.

One other thing of note: in building my site I did a multisite install with three different instances of Pinboard running different sections. This allows me to keep the (1) Board, (2) Blog/Gear Reviews/Podcasts/Videos, and (3) Photoblog separate. The photoblog has like 1700 images so I didn’t want those mixed in with general purpose posts, and in order to make the board work with the CSS tweaks above, I had to set it up as a multisite so I could configure the other sections differently, get away from a one column layout, etc. The good news is in a multi-site the user carries their logged in status and identity from section to section regardless of which blog they’re in.

Zach

[@holdemall Participant 10 years, 9 months ago]

looks really nice, and you are a nice man indeed for showing your settings