Looking in the browser developer tools, I think I can see what is happening. The problem is:
#bbpress-forums {
background: 0 0;
clear: both;
margin-bottom: 20px;
overflow: hidden;
font-size: 12px;
line-height: 18px;
and then there’s also .bbp-breadcrumb and .bbp-template-notice and so on.
And then there’s this CSS class defining the width inside the standard WP entry-content:
.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
max-width: 57rem;
width: calc(100% - 4rem);
}
What do you recommend as the best way forward, bearing in mind I will probably forget all about this after a couple of months! 😆
A child theme from Twenty Twenty?
Or just the appropriate CSS in the WP theme Additional CSS dialog?
Hi Robin,
I could do a child theme and CSS if that’s necessary but I am trying to figure out whether it is actually necessary.
If you look at the page I’ve linked to – the topics index for the single forum on my website I believe – then I assume you’ll see the same as me, which is that there is the massive page title, which is default Twenty Twenty theme like the rest of the website, and there is the tiny bbPress text, inc. forum information, pagination text, topic title etc.
I tried changing the forum information font size in the Topics Index Styling tab but it had no effect. Am I using the wrong bbPress Style Pack tab?
Hi,
I’m struggling to set up bbPress so that the forum style adheres to the website style.
I wasn’t able to find the right place to change the font size on this page linked to above despite your guidance 🙁
I’m trying to read my way through the bbPresss documentation in codex.bbpress.org but it starts off getting right into the nitty-gritty by recommending I create a child theme and start writing CSS.
I’m using Twenty Twenty theme for the main site. I read that I might need to create a bbPress theme – but I think I need to read a lot more about that.
Any help gratefully received!
Hello,
I have a problem here my forum is small when I look at it on the index I would like to take the full width of the page.
How to do what code I will be able to enter in the CSS
See here https://perso-blog.fr/buisness-strategie/forums/
Hi,
Can anyone assist with removing the entry title ‘FORUMS’ on this page:https://frugalflyer.ca/forums/
CSS doesn’t seem to work, or seems to be overidden by something in bbpress.
Thanks
Reed
if you decativate and delete the plugin and then re-install, then forums, topics etc. will be kept, but css will revert to default
Hi
I have a lot of plugins installed on my site.
Let me know if you have anything to check more
Best Regards,
Hyunho
================
301 Redirects
Activity Log
Advanced Access Manager
Advanced Editor Tools (previously TinyMCE Advanced)
Advanced TinyMCE Configuration
All In One SEO Pack
Automatic Copyright Year
Awesome Weather Widget
bbp style pack
bbp User Ranking
bbPress
bbPress – Private Replies
bbPress forum utility pack
bbPress Permalinks with ID
bbPress Profile Link Shortcode
bbpress Simple View Counts
bbPress Toolkit
Classic Editor
Favicon by RealFaviconGenerator
GD bbPress Attachments
GD bbPress Tools
Hide Admin Bar From Front End
Hide My WP Ghost Lite
Image Upload for BBPress
Link Widget Title
Log Out Shortcode
MangBoard WP
Members
Nav Menu Roles
Pages In Widgets
Post/Page specific custom CSS
Search & Replace
Shortcode in Menus
Shortcode Widget
SiteOrigin CSS
Smush
Stylist
Timeline Express
User Registration
Wordfence Security
WP 2FA – Two-factor authentication for WordPress
WP OPcache
WP RSS Aggregator
WP Statistics
WP-Optimize – Clean, Compress, Cache
WPForce Logout
broken link check
buddyPress
================
no need to edit files, you can do all that with css
so
.bbp-forum-freshness {
display : none !important ;
width : 0px ;
}
li.bbp-forum-reply-count, li.bbp-forum-topic-count, li.bbp-topic-reply-count, li.bbp-topic-voice-count {
width: 20%;
}
li.bbp-forum-info, li.bbp-topic-title {
float: left;
text-align: left;
width: 55%;
}
will fill the freshness space up.
you can play with the percentages, above is 20% + 20% + 55%
just make sure they don’t go over 95% total
put this is the custom css section of your theme
.bbp-forum-freshness {
display : none !important ;
}
I am using a wordpress site to make forums with bbpress. We like to have a lot of security and dont like to show ip addresses to anyone other than keymasters, https://prnt.sc/uozyfi is an example of what this looks like.
Is there a way to edit a part in the theme/css or make it so only keymasters can see ips?
Please use baby steps or something that someone who is moderatley tech literate can use.
Theme: OceanWP
Theme Version: 1.8.9
WP Version: 5.5.1
bbPress Version: 2.6.5
bbPress Tweaks Version: Latest (idk?)
Site Address: https://brucedraco.com
I am not an expert on this, but what I do it to make a css subdirectory in my child theme. In that directory, css files should override the css in plugins (if they provide for the possibility of overrides, which bbPress does).
There are more details here: https://codex.bbpress.org/step-by-step-guide-to-setting-up-a-bbpress-forum-part-2
And here: https://codex.bbpress.org/bbpress-styling-crib/
And there are also some plugins that can do these things for you.
Hello,
I would like to select with CSS selector for BBpress forum pages to hide Breadcrumb NavXT.
Is there a CSS code ?
THanks for your help.
Hi Robin,
thanks for the suggestion, of course I was looking at the code in the plugin before.. but it had overwhelmed me :))
so, after your tip, here is what I ended up with,
add_action ( 'bbp_template_before_single_forum', 'new_topic_button' ) ;
function new_topic_button () {
if ( bbp_current_user_can_access_create_topic_form() && !bbp_is_forum_category() ) {
$text=__('Create New Topic') ;
$href = apply_filters ('new_topic_button' , '#new-post' ) ;
echo '<a class="new_topic_button" href ="'.$href.'">'.$text.'</a>' ;
}
}
probably there is a more elegant solution.. as the button didn’t want to go to a line below the breadcrumbs.. had to use css
.new_topic_button {
background-color: #0066CC;
border: 0;
border-radius: 5px;
color: #fff;
font-size: 16px;
font-weight: 600;
padding: 15px 30px;
text-decoration: none;
width: auto;
display: block;
width: 200px;
margin-top: 30px;
}
Hello,
I have 0 knowledge about making website and such… but please help!
I want to make it like this –
1. Forum name clicked
2. Goes to Single Forum Layout page with corresponding forum ID (Edited with Elementor).
3. When posted Topic is clicked, It’ll show the post, reply threads and reply form.
–
I’m using Elementor’s bbpress widget and has bbp Style Pack (My WordPress theme is twenty-ninteen).
First, I made a page with Forum Index, and created a Forum. I created a Forum from WordPress dashboard “Forum”.
Second, When I click this Title of the Forum, it takes me to a WordPress Theme without “Edit with Elementor” gives me Content missing error. I’m having a trouble with this too, it seems like I have to add: the_content (); code or <?php the_content(); ?> on somewhere in the Theme Edit on dashboard. None of the Google search matched what I see on my css and php code list.
Third, I created 3 different sub-pages to Forum Index page to put in Elementor’s Bbpress widget, changed layout to Single Forum and input ID of the forum that I found from the Dashboard’s Forum section.
Problem is here, I can’t connect when the Forum name is clicked, direct to the Single Forum page.
I noticed that Breadcrumb of the Single Forum page is Home > Forums > Forum > Videos.
“Home” is Home, I don’t have a page name “Forums”-where is this coming from?
The name of the page with Bbpress widget (Forum Index) is “Forum”.
From seeing this error, It seems like I have to edit directly onto the Dashboard’s Forums section. but with these Forum page I don’t have access to Edit with Elementor.
–
I appreciate anyone’s suggestions and help! If you need any more information or need to clarify anything, please let me know.
Thank you.
ok, I don’t think it is a css problem.
cab you tell me which method you are using in no. 8 in here
Step by step guide to setting up a bbPress forum – Part 1
Hi
I have a transparent header built with Astra theme and Elementor page builder. I am also using BuddyPress on my site.
I would like to change all the bbpress forum pages header to a different background color, none white, so the header menu can display properly.
What css codes should i use?
Bbpre Version 2.6.5 on latest WordPress installation
Thank you
Hey there, I tried using the translation part of the bbp style pack plugin, while assuming, that once I was able to fix the translations I would then fix the CSS styling issues I have mentioned above (this would just take a little work on my behalf). Anyway, even though it says you have to play around with it to get it right (e.g. add the full stop if there is one etc.), I was not able to implement the translations. I am sure it has something to do with the way my site is set up and not the plugin itself, but alas, I had to find a different option.
So, here is my frontend Javascript solution. I noticed that I have to put e.g. “weeks” before “week” in the object for it to work (i.e. plural before singular). For anyone who wants to know, the word “aktualisiert” refers to the English word “updated”, (as the verb goes to the end of the sentence in German it is slightly tricky to just translate “this was last updated…..”).
I am not sure if anyone needs this, but as I require help with my website from time to time from people like those at bbpress (thx btw), if I can be of any help, I would like to. This is an IIFE btw:
/* WB- translate some dodgy sentences (part English/ part German) */
var translate = function () {
//check if the page is a forum page. If not, return function
var isForum = document.querySelector("#bbpress-forums");
if (!isForum) return;
// find if either forum or topic description (topic is one level lower in the forum where people can answer individual posts. forum is where all the sub-topics are listed
var forum = document.querySelector(".bbp-forum-description");
var description = document.querySelector(".bbp-topic-description");
//If not on either the forum description page or the forum topic page, return
if (!forum && !description) return;
//set a variable to add the innerHTML to
var d_text;
if (forum) {
// if forum has no topics make no tranlation changes and hide the "Oh bother.... div"
if (forum.innerText === "Dieses Forum ist leer."){
var oh_both_text = document.querySelectorAll(".bbp-template-notice");
oh_both_text[1].style.display = "none";
return;
}
d_text = forum.innerHTML;
}
if (description) {
d_text = description.innerHTML;
}
// create object with list to translate (name: = English, value = Deutsch)
var d_obj = {
"This forum has": "Dieses Forum hat",
"This topic has": "Dieses Thema hat",
"This category has":"Diese Kategorie hat",
"This topic is empty":"Dieses Thema ist leer",
"hidden":"verdeckt",
"and was last updated": "und wurde zuletzt",
"seconds": "Sekunden",
"minutes": "Minuten",
"hours": "Stunden",
"days":"Tagen",
"day": "Tag",
"weeks":"Wochen",
"week": "Woche",
"months": "Monaten",
"month": "Monat",
"years":"Jahren",
"year":"Jahr",
"by": "von"
}
// use Replace method to run through innerHTML and replace English text with German
d_text = d_text.replace(/This forum has|This topic has|This category has|This topic is empty|hidden|and was last updated|seconds|minutes|hours|days|day|weeks|week|months|month|years|year|by/gi, function (matched) { return d_obj[matched]; });
//add "aktualisiert" to end of sentence
if (d_text.indexOf("und wurde zuletzt") > -1) {
d_text = d_text.slice(0,-1).concat(" aktualisiert."); }
//update the innerHTML of either the forum or the topic page
if (forum) { forum.innerHTML = d_text; }
if (description) { description.innerHTML = d_text; }
}();
I see, pity, but thanks for your help 🙂
BY the way, How on this BBpress forums – it was possible to remove top pagination and leaving the one at the bottom?
css display none kills both 🙁
so put this in the custom css are of your theme
#bbpress-forums ul.bbp-forums li.bbp-body .reply .bbp-reply-header .bbp-admin-links,
#bbpress-forums ul.bbp-forums li.bbp-body div.hentry .bbp-reply-header .bbp-admin-links,
#bbpress-forums ul.bbp-replies li.bbp-body .reply .bbp-reply-header .bbp-admin-links,
#bbpress-forums ul.bbp-replies li.bbp-body div.hentry .bbp-reply-header .bbp-admin-links,
#bbpress-forums ul.bbp-topics li.bbp-body .reply .bbp-reply-header .bbp-admin-links,
#bbpress-forums ul.bbp-topics li.bbp-body div.hentry .bbp-reply-header .bbp-admin-links {
bottom:1px !important;
}
yes your theme has a style sheet
wplms/assets/css/bbpress.min.css
which contains
#bbpress-forums ul.bbp-forums li.bbp-body .reply .bbp-reply-header .bbp-admin-links,
#bbpress-forums ul.bbp-forums li.bbp-body div.hentry .bbp-reply-header .bbp-admin-links,
#bbpress-forums ul.bbp-replies li.bbp-body .reply .bbp-reply-header .bbp-admin-links,
#bbpress-forums ul.bbp-replies li.bbp-body div.hentry .bbp-reply-header .bbp-admin-links,
#bbpress-forums ul.bbp-topics li.bbp-body .reply .bbp-reply-header .bbp-admin-links,
#bbpress-forums ul.bbp-topics li.bbp-body div.hentry .bbp-reply-header .bbp-admin-links {
position:absolute;
bottom:15px;
right:0
}
which moves the links, and makes them unclickable
Hi Robin,
for example on this page:
https://bbpress.org/forums/
to remove / hide 981 982 983 pages
the css class seems to be the same, so not sure how to hide it
bbPress Version 2.6.5 <
WordPress 5.4.2
Among other instructions I used bbPress Styling Crib (https://codex.bbpress.org/bbpress-styling-crib/). I copied bbpress.css into the wp-content/themes/%your-theme%/css/ folder as directed in the Step by step guide to setting up a bbPress forum – part 2 (https://codex.bbpress.org/step-by-step-guide-to-setting-up-a-bbpress-forum-part-2/).
The bottom line is that I changed every “font-size:” tag in bbpress.css (and there are 40) trying to have SOME effect. Nothing.
The tiny text makes the forum unusable. Changing the font size, from much of what I’ve read, is simple.
What am I doing wrong???
Thanks in advance
When i activate the plugin, the css styling changes how the forum looks. For example the Topics Index Styling overrides the css of my current layout, which is styled from my own styles.css file.
#bbpress-forums div.odd, #bbpress-forums ul.odd {
background-color: #fbfbfb;
}
The above is the CSS that you have at the moment to colour the borders.
Can can add your own additional CSS to manage how comments are displayed.
#bbpress-forums blockquote {
color: #000;
}
You can put whatever styling you like in there. This styling us usually in the customizer area of your website. Although the bbp style pack also has a Custom CSS tab.
And the bbp style pack allows you to set some other colour properties too on the various tabs.
