New user, first post 🙂 I am using the Reign theme by WBCom, and I really like it, except for the layout of the BBPress forum index page, and the topic page. I’d really rather not have to switch to a new theme (already paid for Reign, don’t want to pay for another theme!) so I’d like to see if I can alter it myself to get what I want.
Some general info: I taught myself html back in the 90s, so I’m OK with html and css, but I never got as far as php. However I can probably grasp the basics.
I tried out the Youzify plugin and it does a lot of the layout styling that I want, but changes other things that I don’t want. Would it be possible to use the code from this to guide me to make the alterations I want?
I’m stuck at the start: which file/s would I find the layouts? (css is about styling, I’m looking for table structure, where information is displayed, that sort of thing).
Thanks!
Good afternoon,
I installed bbpress successfully and created a few forum entries.
also added a few test topics.
It displays fine: https://www.dealtimer.com/forums
Also, it displays one of the forum entries with a list of topics fine at
https://www.dealtimer.com/forums/forum/auto-dealer-csi-boosting-ideas
However, when I click one of the topics, it shows a content area blank below the header…
I changed the theme, and it works fine to show topic details and reply..
I even added a single page with a shortcode to display the topic, thinking that the CSS conflicts, it shows fine at https://www.dealtimer.com/single-topic-page.html
However, from the list of topics to browse the topic content, it fails.
When I looked at it, it even called content-single-topic.php code, however, I do not see bbp-container content being supplied to add a topic information page…
Do you have any idea about debugging this problem?
Thank you in advance for your help,
Jay M
I can’t find the other forum topic where I asked about how to make the replies VISIBLE.
The problem was that participants, key masters, admins, authors, everyone was only seeing the date / time stamps of replies to topics, no one could see the content of any of the replies, when viewing the bbPress forum in the web page. Robin responded with this and fixed it.
——————————————————-
In short some code clashing was stopping the display being right in your browser, it was all working behind the scenes. Nothing that you had done.
Just for your records I have done the following change
In dashboard>appearance>customise>additional css and added this code
.reply {
position: relative !important;
right: 0px !important;
top: 0px !important;
Tech support at my theme company made a fix. Here is CSS to put into the theme options to fix this for the next person!
#bbpress-forums > div:nth-child(4) {
display: none;
}
ul#bbp-forum-0.bbp-topics1.bs-item-list.bs-forums-items.list-view {
display: none
}
Thank you so much for your help, Robin!
Thanks. There is no “All Discussions” forum.
This may or may not help, but that “All Discussions” box by itself is what you get with the short-code [bbp-topic-index]. In other words, if you used that shortcode by itself it just has that “All Discussions” part, but here it is as the 2nd part of [bbp-forum-index] (after the grid display of the forums). I am hoping to inject some CSS to make it go away.
Thank you! This shows the output of shortcode [bbp-forum-index]. I just want the grid of the forums, not the discussions box below.
If am hoping there is CSS where I can specify showing these things is ‘false’
1) Remove the ‘Discussions’ Box
2) Remove the two statements ‘Viewing 4 of 4 forums’ and ‘Viewing 1 of 1 discussions’
I hope that makes sense!
Hello. I am hoping there is a method, maybe CSS, to remove the “All Discussions” portion of the BBpress forum grid display. I just want to present the grid of the forums. I do not want it to have the 2nd part that shows the latest activity. Thank you!
That css code works!
And to answer your question, I use that pdf generator plugin for blog posts. I don’t know if it has anything to do with forum posts. Which is why I never made the connection.
ok, it is a theme issue.
2 further things to suggest
you could look at this
https://codex.bbpress.org/step-by-step-guide-to-setting-up-a-bbpress-forum/ item 8
and/or you could add this to your custom css
#bbpress-forums {
width: 90% !important;
}
Otherwise you need to reach out to the theme authors
When I do that, it takes over the CSS of the page, so where we have full width in the top of the site, when I paste this in: [bbp-forum-index] , it causes ALL the full width to go “boxed”.
Even if I set the element such as a Full Width Row, it still boxes it all.
I have read on here all day and tried some additional css doing amongst other things that have been suggested…I cannot for the life of me get rid of the bbPress Forum title on the following page…
https://hookdgear.com/forums
Any suggestions? I did not initially create a forum page as I simply went through the forums section in wordpress to create the forum layout…I create a page with a permalink to /forums to see if that helped but the title is still there…thank you in advance for your help
your theme is hiding the bbpress breadcrumbs in
https://renaloo.com/wp-content/themes/digiqole-child/assets/css/custom.css line 2281
This function will add a reference to the breadcrumb
add_action ('bbp_template_before_single_topic' , 'rew_forum') ;
function rew_forum () {
echo '<div class="rew_forum">' ;
$topic_id = bbp_get_reply_topic_id() ;
$forum_id = bbp_get_topic_forum_id() ;
echo '<a href="' . esc_url( bbp_get_forum_permalink( $forum_id ) ) . '" class="bbp-breadcrumb-forum">' . bbp_get_forum_title( $forum_id ).'</a>' ;
echo '</div>' ;
}
Put this in your child theme’s function file –
ie wp-content/themes/%your-theme-name%/functions.php
where %your-theme-name% is the name of your theme
or use
Code Snippets
Hi,
In my forum using Astra Theme the ‘Reply’ link to a posting is left aligned so that the text is up against the end of the date. On desktop it is right aligned beside the unique posting ID. I have done some reasearch on this but don’t see anyone else with the problem. Anyone aware of the CSS required to fix this?
Thanks,
Eddie
The page on my forum is full of list bullets. (https://www.turtleholic.com/forums/forum/turtle-questions/)
Does anyone know how to fix this? I was able to add the following CSS code to the main Forum page (https://www.turtleholic.com/turtleholic-forum/), which removed the bullets from that page. But on the specific forum pages I don’t know how to add custom CSS.
ul ul li:before {
display: none;
}
ul li:before {
display: none;
}
once activated go to
dashboard>settings>bbp style pack>Breadcrumbs
I tried but unfortunately when I save it doesn’t save the changes
for the furst two, add this to your theme custom css
.forum h1.page-title, .forum div.page-description p {
display : none ;
}
When I try this, I have this error:
changeset_post_save_failure
for the furst two, add this to your theme custom css
.forum h1.page-title, .forum div.page-description p {
display : none ;
}
for the last, install this additional plugin
bbp style pack
once activated go to
dashboard>settings>bbp style pack>Breadcrumbs
A lot of mobile changes depend on the theme being used.
These are the css changes that this site uses for smaller devices
/* Do not fix #header for non-desktops */
@media screen and ( max-width: 782px ) {
#header {
top: 0;
z-index: 99999;
position: absolute;
}
#wpadminbar {
z-index: 88888;
height: 56px !important;
position: absolute;
}
#wp-toolbar {
width: 100%;
}
#main {
margin: 100px 10px 40px 10px;
}
body:not(.trac):not(.home-page) #main {
margin-top: 140px;
}
#footer {
padding: 10px;
margin: 10px;
}
#footer div.links,
#footer div.details {
float: none;
margin: 10px 0;
}
#bb-menu-icon,
#mobile-menu-button {
display: block;
position: absolute;
right: 0;
padding: 33px 20px 33px 33px;
text-decoration: none;
}
#header #nav,
#wporg-header #wporg-header-menu {
margin: 0;
float: right;
overflow: visible;
}
#header #bb-nav,
#wporg-header #wporg-header-menu {
position: absolute;
width: 100%;
right: 0;
top: 81px;
border-bottom: 1px solid #aaa;
}
#header #bb-nav li,
#wporg-header #wporg-header-menu li {
width: 100%;
text-align: center;
margin: 0;
padding: 0;
}
#header #nav #bb-nav li a,
#wporg-header #wporg-header-menu li :link,
#wporg-header #wporg-header-menu li :visited {
display: block;
margin: 0;
padding: 20px;
color: #000;
text-shadow: none;
border-radius: 0;
}
#header #nav #bb-nav li.current a,
#header #nav #bb-nav li a:hover {
color: #fff;
}
#header #bb-nav,
#bbpress-forums .bbp-pagination-count,
.bbp-topic-meta,
#wporg-header #wporg-header-menu {
display: none;
}
#header #nav:hover #bb-nav,
#header #nav:focus #bb-nav,
#wporg-header #wporg-header-menu.toggled {
background-color: #eee;
display: block !important;
}
#wporg-header #wporg-header-menu.toggled {
background: #eee;
}
#header #nav:hover #bb-menu-icon:before,
#header #nav:focus #bb-menu-icon:before,
#wporg-header #mobile-menu-button[aria-expanded="true"]:before {
color: #fff;
}
#wp-admin-bar-my-account img.avatar {
height: 38px !important;
width: 38px !important;
}
}
/* Mobile */
@media only screen and (max-width: 480px) {
#bbpress-forums div.bbp-topic-author img.avatar,
#bbpress-forums div.bbp-reply-author img.avatar {
width: 72px;
height: 72px;
margin: -5px 0 0 -5px;
transform: rotate(-5deg);
}
#bbpress-forums .bbp-author-role {
border: none;
background: transparent;
padding: 0;
margin: 0;
}
#bbpress-forums p.bbp-topic-post-date,
#bbpress-forums p.bbp-reply-post-date {
position: absolute;
right: -13px;
top: -17px;
font-size: 10px;
margin: 0;
}
#bbpress-forums div.bbp-topic-author .bbp-author-avatar + br,
#bbpress-forums div.bbp-reply-author .bbp-author-avatar + br,
#bbpress-forums div.bbp-topic-ip,
#bbpress-forums div.bbp-reply-ip {
display: none;
}
#bbpress-forums li.bbp-body div.type-topic span.bbp-admin-links,
#bbpress-forums li.bbp-body div.type-reply span.bbp-admin-links {
display: block !important;
border-top: 1px dotted #ddd;
margin: 10px 10px 0 10px;
padding: 5px 0;
position: relative !important;
top: 0;
left: 0;
}
}
You can play with them to get your site looking nicer
either add them to the custom css part of your theme, or use
Code Snippets
This may be more of a request for Elementor, but I thought I try and see if someone figured this out.
From this topic here: https://bbpress.org/forums/topic/bbpress-elementor/
I was able to make Elementor work on forum index, forums and the list of topics inside those, but not for single topic (those you can reply on). Technically those must be posts and post comments.
It’s not entirely essential, but would be great if there was a way to do this. I use a barebones theme (_s) and the theme parts themselves are built with Elementor’s theme builder and custom CSS. So without a template for single topics I’m unable to get a header or a sidebar on those.
Thanks in advance!
so you are happy that in the forum display, the topic content box will be there, but show nothing ?
for 1,3&4
#bbpress-forums fieldset.bbp-form input[type="text"] {
width: 100% !important;
}
div.bbp-submit-wrapper {
width: 100%;
}
add this to the custom css of your theme
Thanks, the only thing is, I do not want to modify the php or css files. Not only is that a rathole that I’d never escape from, I do not feel competent to do so, and to be honest, I don’t want to learn all that. I wanted a forum plugin that would use my theme and allow me to style it by using one of my theme builder’s page templates, because that I know how to do.
In any event, further research led me to discover that bbpress seems to use three custom post types: forum, topic, and replies. I can’t find documentation about when these custom post types are used, but I’m guessing that “forum” is used for the forum index listing, “topic” is used for the topic listing within an individual forum, and “replies” are for the replies.
I figured out that Thrive Theme Builder lets you create a template and apply it to custom post types. I did that with the “forum” type and it it does seem to work. It looks ugly, but at least it applied the template and now I can fiddle with it.
So then I tried it with the “topic” type, but that doesn’t seem to take effect. When I click on a a topic that I created, it takes me to a page that uses the default Theme Builder’s archive page. Not what I want at all. I would be fine if it used the same “forum” template, actually, but I don’t see how it does that.
Finally, Theme Builder does not even show the “reply” type as an option so I can’t try making a template for that one.
try this in your custom css
#bbpress-forums li.bbp-body ul.forum, #bbpress-forums li.bbp-body ul.topic {
padding: 5px 25px !important;
}
Hello.
I am a beginner in making websites.
The topic size of one of the forums on this page is “926px X 59px”
But the topic size of one of the forms on my site is “866px X 189px”
How can I change this size?
I’m only studying CSS, so if possible I would like to solve it with CSS only, without using php.
I’ve tried a lot of CSS so far, but I still can’t resize it.
Very nice work with the style pack Robin! I do have one issue with Mega Max menu compatibility. For whatever reason, it doesn’t look like shortcodes are being processed when style pack is activated (which is how MegaMax allows menus to be embedded).
Otherwise I’d recommend your style pack for bbPress users as this “simply works” to deliver the forum styling to Twenty Twenty Two without having to painfully apply one’s own CSS rules to make it marginally pretty.
For those willing to go that far, I found that simply adding a basic, default template page as described on WordPress.org will do the trick. Supposedly block editor doesn’t care for/use PHP template pages anymore so it’s otherwise ignored.
For simplicity, I just replace Twenty Twenty Two’s otherwise empty index.php with the “skinny” template index.php I created here:
https://gist.github.com/Steveorevo/96d8015bcf353221e1cf0cd6b89bb766
Hi bbPress community!
I’m setting up a new WordPress + bbPress website, and this website is RTL (Hebrew).
My theme, oceanWP, supports RTL pretty well, and it seems like bbPress plays nicely with RTL in some pages, but in the main forum list it does not.
Here’s my current forums page: https://kehila.tech/forums/
The issue is that the forum name appears on the leftmost part, which is odd in an RTL language.
From what I can tell, the RTL css files are indeed loaded, and indeed after the non-RTL files are loaded, so I’m not sure what went wrong.
I’d appreciate any tips as for what to do! And I’m definitely open to adding some custom CSS if that’ll solve it easily.
Thanks in advance!
Hey Robin,
thanks for your feedback.
Well, I used the twenty twenty theme before and I wanted to add a forum to my homepage. I found bbpress and thought it would fit perfectly. Unfortunately, bbpress looked pretty “detached” from the rest of the homepage. Meaning, the style of the forum did not fit the rest of the homepage. I played around with CSS but the result was not very satisfying and took too long. That’s why I tried the new tttwo theme.
I am not a Web developer and I can’t judge whether the block theme approach is a good idea or not. I played around with it and it was relatively easy to tweak the design templates. So, it kind of worked for me (first impression).
Thanks for your work!
