Guys –

In my particular layout, the ‘Forums’ page is incorrectly calling to the ‘threecol’ CSS tag instead of ‘onecol’. The topics page is calling to ‘onecol’ correctly and lays out fine. I am using a four column layout with a sidebar, and I need the BBpress unit to take up the entire space except for what is in the sidebar.

Broken layout:

http://www.itinerantangler.com/blog/podcasts/boards/

Fixed layout:

http://www.itinerantangler.com/blog/podcasts/boards/board/fly-fishing/

I can edit the forums CSS tags live using Chrome’s “inspect elements” tag and make it lay out properly, but I don’t know where to make those changes amongst all the BBPress php files.

My question is simple: where does BBPress get its CSS directions for the Forums page? It has to be in one of the php sub-files. I just need to change that one CSS tag and it ought to work properly.

Thanks,
Zach

[@jaredatch Member 11 years, 7 months ago]

Copy:

wp-content/plugins/bbpress/templates/default/css/bbpress.css

to:

wp-content/themes/[YOUR-THEME]/css/bbpress.css

And that’s all it takes 🙂

bbPress will auto-detect the CSS file in your theme and use that instead of it’s own.

[@zachmatthews Participant 11 years, 7 months ago]

Well it was certainly worth a shot, but the CSS is still broken:

http://www.itinerantangler.com/blog/podcasts/boards/

So I am still doing just fine with the sub-forums and topics, but the main “Forums” page (linked above) is stuck in three-col layout instead of one-col, which is what it needs to be. Any ideas on where to switch it over?

Thanks,
Zach

[@zachmatthews Participant 11 years, 7 months ago]

Any help at all on this would be greatly appreciated, guys.

Basically the question is, how come the overall ‘Forums’ page is pulling the .threecol CSS tag while the internal, ‘Topics’ pages are (appropriately) pulling the .onecol CSS tag?

If I could simply figure out where to set the Forums page to .onecol, it’d be fixed.

Thanks!
Zach

[@zachmatthews Participant 11 years, 7 months ago]

From what I can tell the issue is with this file.

content-archive-forum.php

The css is so convoluted I can’t use my usual tricks of just showing the element styles to identify where it is getting its directions.

However the fix would be super simple; I just need to force it into .onecol layout somehow.

I guess I am on my own on this one.

[@jaredatch Member 11 years, 7 months ago]

Does you theme have the ability to set layout controls per page? Does it have hooks for that?

[@zachmatthews Participant 11 years, 7 months ago]

Thanks for the replies guys. Jared no it does not. The theme is pretty popular – Pinboard. I am seeing other Pinboard users with the same issue, too.

What I have done is followed the instructions here to carve out a separate forums.php page which is working as intended and rendering the bbPress plugin separate from the rest of the site.

That is allowing me to tweak the code for just this one section, but I haven’t worked out how to force it over to the .onecol layout yet. Worse, it looks like this layout issue persists through various sub-parts of the forum software, such as profile pages.

[@zachmatthews Participant 11 years, 7 months ago]

All right, and I am now making progress.

I made a complete copy of page.php within the /wp-content/themes/pinboard/ directory. I then created a blank file and titled it “forums.php” (with an ‘s’ on forums). I copied the complete text of the page.php file into the forums.php file and started tweaking.

This is the code I have so far:

<?php get_header(); ?>
	<div id="container">
		<section id="content"  <?php pinboard_content_class(); ?>>
			<?php if( have_posts() ) : the_post(); ?>
				<article class="onecol" id="post-<?php the_ID(); ?>">
					<div class="entry" >
						<header class="entry-header">
							<<?php pinboard_title_tag( 'post' ); ?> class="entry-title"><?php the_title(); ?></<?php pinboard_title_tag( 'post' ); ?>>
						</header><!-- .entry-header -->
						<div class="onecol">
							<?php the_content(); ?>
							<div class="clear"></div>
						</div><!-- .entry-content -->
						<?php wp_link_pages( array( 'before' => '<footer class="entry-utility"><p class="post-pagination">' . __( 'Pages:', 'pinboard' ), 'after' => '</p></footer><!-- .entry-utility -->' ) ); ?>
					</div><!-- .entry -->
					<?php comments_template(); ?>
				</article><!-- .post -->
			<?php else : ?>
				<?php pinboard_404(); ?>
			<?php endif; ?>
		</section><!-- #content -->
		<?php if( ( 'no-sidebars' != pinboard_get_option( 'layout' ) ) && ( 'full-width' != pinboard_get_option( 'layout' ) ) ) : ?>
			<?php get_sidebar(); ?>
		<?php endif; ?>
	</div><!-- #container -->
<?php get_footer(); ?>

That spreads the forums page out to the appropriate onecolumn width and also completely fixes the profile page. It looks like the entry headers are being called from another php file, so I need to do some more tweaks, but here’s the result as is:

http://www.itinerantangler.com/blog/podcasts/boards/

If I can get it fully tweaked up I’ll post how here. I know others were looking to do this.

[@zachmatthews Participant 11 years, 7 months ago]

Ok so I had to partially give up, but I did come up with a partway solution. It’s still got some broken CSS here and there.

I am running a WordPress Multisite. I noticed that BBPress will lay out and mostly play nice with the Pinboard theme provided you set the layout to have no sidebars and to be 4 column. You can still have footers, thank god.

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

So there’s a live working version of BBPress. I did use the forums.php trick noted above to fix a few things for the time being. I would actually like to just DELETE the search function from the header, because it’s broken and it’s causing the layout to jump.

[@cuocsongnz Participant 11 years, 6 months ago]

Hi Zach, I have the same problem with you
I have used the forums.php trick as you showed but I don’t know how to delete search bar header
Mine is like this
http://cuocsongnz.com/forums/

Please help me

[@zachmatthews Participant 11 years, 6 months ago]

This is the answer I came up with and provided to some other people who have asked:

Set Pinboard to 2 content columns, 2 Boxes Sidebar Columns, and 4 Footer Columns. Choose the first (farthest left) “Preferred Layout” option.

Now, this is obviously going to dictate the look of the rest of your site. I got around that by doing a three-tier Multisite layout. It’s not hard to set up but it is a pain in the ass to have to re-install Pinboard and re-set every single option so the site is all the same, but that gives you the flexibility to have multiple different layouts and formats all within the same blog. I actually have one blog running my Blog, Articles, Podcasts, Video and About pages, then a second blog running my Photoblog database (which keeps the posts separate), and then finally the third blog running only bbPress. However, user profiles are integrated in a multisite so people stay logged in throughout the environment.

One more thing to note: I moved the slider feature to my header by putting the slider section of the functions.php file actually in my search.php page, then deleting all other content from search. (My site only has search on the forums page). That makes the slider get called on each page first and you can tweak the menu layout and stuff to make it all appear up top. The only catch is the slider itself only works on the first page of a given blog (so it works on three of my pages). Everywhere else it is a static image, dictated by the oldest image chronologically amongst the slider pictures.

Here’s my CSS:

#slider .entry-title a {
	display:none;
}
.flex-direction-nav, .flex-pauseplay {
	display:none;
}
#bbpress-forums iframe, #bbpress-forums embed {
	max-width: 640px !important;
	height: 480px
!important;
	margin-left: 0px
!important;
}
fieldset {
	border: 0;
}
.fluid-width-video-wrapper {
	padding-bottom: 20px !important;
	padding-top: 53% !important;
}
.bbp-reply-content {
	margin-left: 120px !important;
}
.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;
}

.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 #aaa #aaa !important;
}
.quicktags-toolbar {
	border-bottom: 1px solid #aaa !important;
}
#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;
!important;
}
#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);
}
input#bbp_topic_tags {
	box-shadow: inset 1px 1px 10px rgba(0, 0, 0, .2);
}
.bbp-forum-title {
	font-weight:400 !important;
        margin-left: 0px !important;
}
#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;
}
#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%;
}
#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;
}
.entry-title {
	margin-left: 20px;
}
.single .entry-title {
	margin-left: 0 !important;
	margin-bottom: -10px !important;
}
#bbpress-forums li.bbp-body ul.topic {
	border-top: 1px solid #eee;
	padding-top: 5px !important;
	padding-bottom: 0px !important;
        padding-left: none !important;
        padding-right: none !important;
}
#bbpress-forums p.bbp-topic-meta {
	margin: 0px 0 5px;
}
li.bbp-topic-title {
	padding-left: 20px;

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

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

#bbpress-forums li.bbp-body ul.forum, #bbpress-forums li.bbp-body ul.topic {padding-top: 8px;}

#bbpress-forums li.bbp-header {padding-left: 0px !important;}

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

#bbpress-forums .bbp-forum-info .bbp-forum-content, #bbpress-forums p.bbp-topic-met {margin: 0px !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;}

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;}

.quicktags-toolbar {border-top-right-radius: 5px !important; border-top-left-radius: 5px !important;}

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