[Resolved] Make bbPress look like this?

[Tom]

Yes, I’m using this one: https://wordpress.org/plugins/bbpress-no-captcha-recaptcha/

[Dave]

Thanks. If you could update your CSS file for forum, it would be amazing.

[Dave]

Can you tell me how to move the avatar pictures to the right like on this forum? I copied your Css code and it is on the center.

[Pascal]

Hello Tom,

I’m quiet new over here (and to CSS-PHP…) and currently trying to copy the look and feel of your bbpress forum pages. They look really great compared to the by default install.

I have been able to follow the instructions in the above posts and I think I’m stuck exactly where the discussion stopped 🙂

On my forum reply pages :

The reply-author & Avatar are showing above the reply-content in a “one column layout”. Your 2 columns layout with the reply to the left and the author/avatar the right is something I’m really interested to duplicate.

I have seen the post about moving the search to the top. I understand that but be still need to figure out in which file to inject the code. On the same line, how are your generating the gray area that sits between the bbp-pagination-count and the bbp-reply-post dates ? This makes a clean separation before getting to the first reply.

Can you drive me in the right direction ?

I’m kind of a beginner …

Thanks for you help.

[Tom]

Hi there,

I have a couple updates to release this week, but then I’ll re-build the bbPress stylesheet I’m using and will definitely post it in here 🙂

For now, try playing with the Inspect element tool in your browser – it will show the CSS I’m using 🙂

[Max]

Pascal. From my memory tom is creating the search bar at the top of his page using a GP Hook. One of the features in his addon pack.

[Patrick]

Hi guys,

if you like the avatar on the right, you can use the following CSS

@media (min-width: 769px) {
	#bbpress-forums div.bbp-forum-author, #bbpress-forums div.bbp-topic-author, #bbpress-forums div.bbp-reply-author {
   		width: 200px;
    	float: right;
	}
    .bbp-reply-content {
    	border-right: 1px solid #eaeaea;
	}
}

Regards
Patrick

[Tom]

I separated all of the bbPress CSS into a different file: https://generatepress.com/wp-content/themes/generatepress_child/bbpress.css

There’s some generatepress.com related CSS in there, but it has all of the CSS for these forums as well 🙂

[Patrick]

thank you very much tom!

such a file for buddypress …. *dreeeeaaam* 🙂

[Tom]

No problem 🙂

[Leon]

Hi Tom

Sorry to bother you again.

I used your css for bbs. https://generatepress.com/wp-content/themes/generatepress_child/bbpress.css (I hope you dont mind) I will change some colors though.

My problem is: the spacing between the entry title and the search form (i used your gp hook) is too small. (20px should look good) and the spacing between the entry title and tagged is too much. again, i think 20 px will look good.

Would you please advise me which css code should I change please? (I tried, but couldn’t make it right :()

Thank you
Leon

[Tom]

Any chance you can link me to that page?

Thanks! 🙂

[Leon]

Thank you Tom for your quick support. You may find the link here: https://interpreterdatabase.com/forums

I also noticed that in this forum, your Reply To and Create New Top etc. are bold, which is pretty good. Somehow the regular is not so easy to view. I shouldn’t be using your latest css yet. 🙂 Would be great if you can share that code.

As always, thank you. This theme surprises me always!

[Tom]

Try this:

.forum .entry-content {
    margin-top: 0;
}

.gp-forum-search {
    margin-bottom: 20px;
}

[Leon]

Hi Tom,

I tried the code but nothing happens. Then I changed .forum .entry-content {
margin-top: 0;
} to 10px and now it looks beautiful.

Thank you very much!
Leon

[Author]

Posts