Hi, I installed bbpress and added the visual editor to make it easier for users to post.
However, the visual editor seems to inherit the theme CSS and all the icons are black background now, like this page https://weliveinus.com/forums/forum/1786/ I know the theme doesn’t allow me to use tagDev composer, but is there anyway I can stop the visual editor inherit the theme CSS? I want to make it no background color otherwise it’s so hard to see.
I added the visual editor in the functions.php with the following:
function bbp_enable_visual_editor( $args = array() ) {
$args[‘tinymce’] = true;
return $args;
}
add_filter( ‘bbp_after_get_the_content_parse_args’, ‘bbp_enable_visual_editor’ );
Thanks a lot!
Hi
I see that you manage to resolve the problem – https://i.imgur.com/wMxnhSR.png
Indeed, it is possible that the forum on bbpress inherits some stills from the theme, a fix was made for this a while ago, but I think that after the latest updates to the theme and plugin, this no longer works properly. I will ask the developers to check this.
Thank you!
Hi， can you let me know how to change the black color header of bbpress on this page? https://weliveinus.com/forums/ I really hate this black header but couldn’t change it even with some plugin like BBpress Style Pack. I think it somehow interited the color from the theme. Thanks a lot!
Hi,
Please check this topic https://bbpress.org/forums/topic/how-to-customize-bbpress-forum/
Also, you need a custom code to change the color
#bbpress-forums li.bbp-header
{
background: red;
}
Set the code in Theme Panel ->Custom code -> Custom CSS
Thank you!
Thank you!!! It worked!
One more question on this page https://weliveinus.com/forums/ : how can I set the sidebar width to be 20%? Right now it is too wide but I don’t know how what custom css code to use.
Thanks!
Hi,
Please try this custom code:
.forum-archive .td-pb-span8 {
width: 75%;
}
.forum-archive .td-pb-span4 {
width: 25%;
}
.forum-archive .td-pb-span4 .td-ss-main-sidebar{
width: 100%!important;
}
The css need to be set in the theme panel > custom code> custom css
I hope this will help you!
Thanks Calin! You are so amazing! It works!
Hi Calin,
Would you mind letting me know to change this? https://snipboard.io/3ltMR7.jpg page url: https://weliveinus.com/forums/
Thank you in advance!
Hi Calin,
Regarding the colors of TinyMCE editor that I asked you last month, I found out how to ‘partly’ change them with these code:
/* This is for the button color */
.mce-btn-group .mce-btn {
background: none ;
}
/* This is for the icon color */
.mce-toolbar .mce-ico {
color: white;
}
But they still have black background color which I can’t remove with the above code. I think that’s from the theme. See here https://snipboard.io/9QGb7E.jpg Did you have any chance to check with the developers how to solve this?
Another thing is that the sidebar width remains unchanged here on this page (forum list page and topic page), although the sidebar width on the frontpage of the forum is changed to 25% with your help. How can I change the width here as well?
Thanks!
Hi,
Related to breadcrumbs, what do you want to stop displaying them?
For this – https://snipboard.io/9QGb7E.jpg please try this custom css
body #bbpress-forums button {
color: #000;
background: gray;
}
body #bbpress-forums button:hover {
background: #3498db;
}
body .mce-toolbar .mce-ico {
color: #000;
}
body .mce-toolbar .mce-ico:hover {
color: #fff;
}
Adjust it to your needs.
Thank you!
Thank you!
For breadcrumbs, I’d like to hide the page title and to change the font size and color of breadcrumbs. https://snipboard.io/3ltMR7.jpg page url: https://weliveinus.com/forums/
For the sidebar width, I followed your advice and changed the forum index page, but how to change the sidebar width on all the other pages in bbpress, i.e., topics list page (https://weliveinus.com/forums/forum/%e4%b9%90%e5%b1%85%e7%94%9f%e6%b4%bb/)? They are still too wide now and I want to have same sidebar width on all bbpress pages.
Thank you!
Never mind I solved this. Thanks!
For the sidebar width, I followed your advice and changed the forum index page, but how to change the sidebar width on all the other pages in bbpress, i.e., topics list page (https://weliveinus.com/forums/forum/%e4%b9%90%e5%b1%85%e7%94%9f%e6%b4%bb/)? They are still too wide now and I want to have same sidebar width on all bbpress pages.
Sorry I didn’t figure out this one.
Hi,
I checked and I think that you solved it https://i.imgur.com/C3KopBk.png, or on what page is the issue?
Thank you!
on this page you posted, the width of sidebar is too wide. I want to set it at 25%. Also on this page https://snipboard.io/Qqs1v6.jpg https://weliveinus.com/forums/forum/%e4%b9%90%e5%b1%85%e7%94%9f%e6%b4%bb/
Hello,
Please delete the code for width and use this code -> .bbpress .td-pb-span8, .forum-archive .td-pb-span8 {
width: 75%;
}
.bbpress .td-pb-span4,.forum-archive .td-pb-span4 {
width: 25%;
}
.bbpress .td-pb-span4 .td-ss-main-sidebar, .forum-archive .td-pb-span4 .td-ss-main-sidebar{
width: 100%!important;
}
Thank you!
Hi, there is a weird problem on this page https://weliveinus.com/forums/ The breadcrumbs have a negative margin and the top part is cut even after I set it as below. It used to be fine but somehow went bad this morning.
#bbpress-forums .bbp-breadcrumb a, #bbpress-forums .bbp-breadcrumb .bbp-breadcrumb-current {
font-size: 14px;
font-weight:600;
color: #C3C3C3;
margin: 300px 0 20px 0;
}
Hello,
Please add this code
.td-page-title
{
margin-top: 9px;
}
Thank you!
Hi, the width on desktop is good but it’s too narrow on the cellphones. Please see the below screenshots of the forum pages.
The first one is the forum index (left side of the page) and the second one is the widget (right side). It looks I can’t make a mobile page either. Can you help me to fix this?
Hello,
The problem is caused by the code provided above, please set it here https://i.imgur.com/Ofk8Cg0.png and delete it from custom css
Thank you!
thank you so much! Problem solved! There is another issue here:
this navigation menu (or header) is normal on desktop (https://snipboard.io/pLj3Se.jpg) but it becomes two rows on mobile version and the first item appears as much bigger size on the first row (https://snipboard.io/z3vbFX.jpg). Same issue happens with other bbpress pages. URL is https://weliveinus.com/forums
Hi,
Please set this code in advanced code css for phone #bbpress-forums li.bbp-header li.bbp-forum-info
{
display: inline-block;
width: auto;
}
#bbpress-forums .bbp-header ul.forum-titles li.bbp-forum-freshness
{
display: inline-block;
width: auto;
}
Thank you!
Thank you! This solved the issue. I tried the same way to solve the similar issue here but it didn’t work. Can you let me know why? https://snipboard.io/3TASzH.jpg The code I’m using is:
#bbpress-forums li.bbp-body li.bbp-forum-info
{
display: inline-block;
width: auto;
}
#bbpress-forums .bbp-body li.bbp-forum-freshness
{
display: inline-block;
width: auto;
}
Also, do you know why the font size of the first menu item is bigger than the rest?
Hello,
Please try to use this code css
#bbpress-forums li.bbp-body li.bbp-forum-freshness
{
width: auto;
margin-top: -22px;
}
Thank you!
