I have installed bbPress forums into my Genesis/Dynamik Website Builder parent/child theme and it works nicely. However I have some confusion on how to alter the CSS of the bbPress forums.
The general site settings have a black background with white font used. The white font is displaying on the bbPress forum pages, but not the black background.
This will be a question for those who are familiar with Genesis/Dynamik Website Builder.
I have put the following code into the Genesis/Dynamik Custom CSS field but it still displays with the default light background colors in bbPress posts.
#bbpress-forums div.odd, #bbpress-forums ul.odd {
background-color: #222222;
}
#bbpress-forums div.even, #bbpress-forums ul.even {
background-color: #444444;
}
Any assistance would be greatly appreciated.
Thanks,
Jason Davis
I’m afraid that doesn’t work either. I think it would look better if it could get removed in the source and not hidden with CSS.
I asked the theme developer and he told me it is a core-function, nothing to do with the theme Im using. I have my developing site under the following URL http://dala.se/forum – where you could see the “Reply To”.
I have tracked it down to the following files:
/wp-content/plugins/bbpress/includes/topics/template.php
Row: 1789-1806
function bbp_topic_last_reply_title( $topic_id = 0 ) {
echo bbp_get_topic_last_reply_title( $topic_id );
}
/**
* Return the title of the last reply inside a topic
*
* @param int $topic_id Optional. Topic id
* @uses bbp_get_topic_id() To get the topic id
* @uses bbp_get_topic_last_reply_id() To get the topic last reply id
* @uses bbp_get_reply_title() To get the reply title
* @uses apply_filters() Calls 'bbp_get_topic_last_topic_title' with
* the reply title and topic id
* @return string Topic last reply title
*/
function bbp_get_topic_last_reply_title( $topic_id = 0 ) {
$topic_id = bbp_get_topic_id( $topic_id );
return apply_filters( 'bbp_get_topic_last_topic_title', bbp_get_reply_title( bbp_get_topic_last_reply_id( $topic_id ) ), $topic_id );
}
/wp-content/plugins/bbpress/includes/replies/template.php
Row: 471-491
function bbp_reply_title( $reply_id = 0 ) {
echo bbp_get_reply_title( $reply_id );
}
/**
* Return the title of the reply
*
* @since bbPress (r2553)
*
* @param int $reply_id Optional. Reply id
* @uses bbp_get_reply_id() To get the reply id
* @uses get_the_title() To get the reply title
* @uses apply_filters() Calls 'bbp_get_reply_title' with the title and
* reply id
* @return string Title of reply
*/
function bbp_get_reply_title( $reply_id = 0 ) {
$reply_id = bbp_get_reply_id( $reply_id );
return apply_filters( 'bbp_get_reply_title', get_the_title( $reply_id ), $reply_id );
}
But tracking it further just lead me to a WP core file and function:
/wp-includes/post-template.php
Row: 102
Go in your css and find and add this display none!!
#bbpress-forums fieldset.bbp-form legend {
display: none;
}
I want to style the bbpress colors, but I am not seeing my changes when I add custom CSS to my Genesis child theme (Dynamik Website Builder).
It is odd because I am using Firebug to isolate which parameters need to be changed, I can alter them within the firebug window and see them change to what I’d like to happen… then when I put that code in Genesis>Dynamik Custom>CSS (my child theme’s area to add to the CSS) it does not display.
Things like this have no effect:
#bbpress-forums div.odd, #bbpress-forums ul.odd {
background-color: #222222;
}
#bbpress-forums div.even, #bbpress-forums ul.even {
background-color: #444444;
}
Any advice?
Hi, I want to edit the way the subforums on the homepage is displayed, so that it looks sort of like an ipb/phpbb forum. I have been able to edit the css and move the code around. But I want to know, is there a way to get the subforum’s description & freshness displayed on the homepage?
I’ve googled A LOT and seems like everyone is looking for this. I found this post, but the solution on there doesn’t seem to be working anymore…
http://bbpress.org/forums/topic/customising-bbp_list_forums-last-poster-block/page/2/#post-137229
I am using a modification of the Recent Activity widget for a horizontal display, rather than on a vertical sidebar. The only modification I have to it are scritly CSS based:
http://creepypastanetwork.com/
As you can see, the recent forum activity (under the main navigation) is not in the correct order from left being most recent to right being least recent of the five.
Any ideas as to why?
Thanks – The CSS worked perfectly.
The view source on the subforum view is http://pastebin.com/YDU3fNqm
I always edit with notepad++, always have. In fact, the edits performed on the other site were done in the same way.
I keep thinking a plugin has caused this behaviour, but can’t track it down. As the issue exists on every theme that I upload to the site.
Ah well, it’s sorted now and I thank you very very much for your efforts and help. It is much appreciated 🙂
Thanks
Dave
I went to clan.wolflan.com and your source code looks like some paragraphs were added by your editor as I see some <p> and </p> in weird places. What software did you use to edit loop-single-forum.php or your functions.php ?
I was not able to check because some of your forums are private, but what’s the html source code for the list of subforums ? (I mean in the browser) Is there a <br /> between the list of subforums ? Because, when I watch your screenshot, subforums are not separated by a comma, so I guess the function did his job, but your code may be broken because you used WordPress editor or an other editor that deleted the <br />.
Anyway, in your case, the simplest solution may be using some CSS. And as you said, simple stuff first ! You wouldn’t need to change any php template. You may try something like that in your style.css or Custom CSS if you use Jetpack :
#bbpress-forums .bbp-forums-list li {
display: block;
}
If it works, I don’t know what was the problem with the bbp_list_forums() function, but you will not need to use it and you can delete the custom loop-single-forum.php that you copied to your theme’s directory if you had not made other edits.
Go to bbpress.css and find:
#bbpress-forums div.bbp-forum-author img.avatar, #bbpress-forums div.bbp-topic-author img.avatar, #bbpress-forums div.bbp-reply-author img.avatar {
border: 1px solid #CCCCCC;
}
For a page you write, you can choose the type of layout you want given that your theme offers that. However, bbPress runs on a page created on the fly, three is no page called “forums” unless you create one and then use shortcodes to bring up the forum.
Every theme has a CSS file which can be edited within WordPress. Go to Appearance/Editor and your theme CSS should load. I edited my theme’s CSS and added the code I gave in my previous post.
I ended up adding a new CSS rule to my theme’s CSS file, luckily bbPress uses a unique class on the page. Adding the following removed the sidebar from my theme, which is based on Genesis:
body.bbpress .sidebar {
display: none ! important;
width: 0px;
}
body.bbpress #content {width: 920px;}
Keep in mind that the content width of 920px is based on my theme’s container and you may need to adjust it to suit your needs.
Here is my installation:
http://www.psri.us/forums
Find this in your bbpress.css file:
#bbpress-forums ul.bbp-lead-topic, #bbpress-forums ul.bbp-topics, #bbpress-forums ul.bbp-forums, #bbpress-forums ul.bbp-replies, #bbpress-forums ul.bbp-search-results
Within that, there will be font-size: 12px. Change the pixel number to a higher value.
The bbPress.css will be located in your bbPress folder in your plugins. If you don’t have the bbPress.css in your theme, copy that file and put it into a folder called “css” directly with of your theme files.
After weeks trying to find something that would work, I found the code on wordpress forums to remove completely gravatars (and redirects it was causing.. )
here is it:
function bp_remove_gravatar ($image, $params, $item_id, $avatar_dir, $css_id, $html_width, $html_height, $avatar_folder_url, $avatar_folder_dir) {
$default = get_stylesheet_directory_uri() .'/images/mystery-man.jpg';
if( $image && strpos( $image, "gravatar.com" ) ){
return '<img src="' . $default . '" alt="avatar" />';
} else {
return $image;
}
}
add_filter('bp_core_fetch_avatar', 'bp_remove_gravatar', 1, 9 );
function remove_gravatar ($avatar, $id_or_email, $size, $default, $alt) {
$default = get_stylesheet_directory_uri() .'/images/mystery-man.jpg';
return "<img alt='{$alt}' src='{$default}' height='{$size}' width='{$size}' />";
}
add_filter('get_avatar', 'remove_gravatar', 1, 5);
function bp_remove_signup_gravatar ($image) {
$default = get_stylesheet_directory_uri() .'/images/mystery-man.jpg';
if( $image && strpos( $image, "gravatar.com" ) ){
return '<img src="' . $default . '" alt="avatar" width="60" height="60" />';
} else {
return $image;
}
}
add_filter('bp_get_signup_avatar', 'bp_remove_signup_gravatar', 1, 1 );
As I am now planning to disable buddypress completely. I am looking for an easy way to let users upload their avatars in bbpress, anyone tried it already?
If I could use divs or something, I could do it, but using only CSS I don’t know how I would do that. Can you help?
Thanks.
You can use the following css,
th.bbp-forum-info {
text-align: left;
width: 85%;
}
th.bbp-forum-topic-count, td.bbp-forum-topic-count {
text-align: center;
width: 5%;
}
th.bbp-forum-reply-count, td.bbp-forum-reply-count {
text-align: center;
width: 5%;
}
th.bbp-forum-freshness, td.bbp-forum-freshness {
text-align: center;
width: 5%;
}
~ Matt
It was my theme, so if anyone finds this page via a search engine, it probably isn’t to do with bbppress itself, more likely your theme CSS messing it up a bit. Every theme is different so your problem might be different that mine. But don’t go messing round with BBpress, that seems fine, I went though most of the code and Css for it! lol
Your going to have to use $args['separator'] = ' '; (Either a blank space or empty) and then use some CSS to style the bbp-forum-list element.
I am having trouble trying to resize my forums table cells widths.
The “topics” and “posts” cells that only contain a number don’t need to be the same width as the “forum” and “freshness” cells that contain words and wrap to the next line.
When I look at the table through firebug I just see “.article th, .article td” which is part of my sytle.css and not bbpress.
Any ideas how I can make the cells widths change?
Here is an example of 1 forum I am talking about http://lifeafterlondon.com/forums-2/
Many thanks
Wordpress version: 3.6
bbPress 2.3.2
Site url: http://www.rubycore-ng.com/blog/forum/
I wanted to create a custom bbPress theme, i followed the instructions here:’ Step-by-Step Guide to Creating a Custom bbPress Theme’. Having copied the following assets from the bbpress>template>default folder to my child theme:
1-bbpress folder
2-extras folder
3-js folder
4-bbpress-functions.php
I am still unable to override the styles in the default bbpress.css file.
I would appreciate clues on how to approach this.
Regards.
Hello,
I just set up a basic forum:
http://www.sugarboxing.com/forum/
I would like to ask you gimme some tips on where can I look for solutions to my problems.
I do not mind you writing the solution here, but caring of your time, this is not really expected. Just links would do just fine:
My problems:
Basically I want my forum look more like this one:
http://www.rosstraining.com/forum/ (this gues use phpBB though).
I want
1. all forums (main and single) pages be without a sidebar
2. I want to change the skin somehow, please suggest where can I get some neat custom css I guess
3. I want all sub-forums listed line by line, not like now when they clustered in a line separated by commas
4. Maybe some extra plugins suggstions
I use WP Mantra theme just in case
Thanks in advance!
In your bbpress.css file you’ll find something like this:
#bbpress-forums p.bbp-topic-meta img.avatar, #bbpress-forums ul.bbp-reply-revision-log img.avatar, #bbpress-forums ul.bbp-topic-revision-log img.avatar, #bbpress-forums div.bbp-template-notice img.avatar, #bbpress-forums .widget_display_topics img.avatar, #bbpress-forums .widget_display_replies img.avatar, #bbpress-forums p.bbp-topic-meta img.avatar {
border: 3px double #DDDDDD;
float: none;
margin-bottom: -7px;
}
Add display: inline; to it, and that’ll fix it up for ya.
Hi.
Somehow I managed to make my submit button disappear, while adjusting my child theme. Now it’s not possible to create a new topic nor reply to existing topics. You can submit by hitting return, but of course this is not very handy.
If I change to the parent theme the button is visible. But surely, I want to keep my child theme.
I’ve gone through all the adjusted css and it doesn’t seem as if any buttons has been set to “display:none”.
Can someone please tell me how I get my submit button back?
You can view the test forum here
I’m using WordPress 3.6 and bbpress Version 2.3.2
My child theme is based on Magazine Basic