- This topic has 1 reply, 2 voices, and was last updated 5 years, 7 months ago by
.
Viewing 2 posts - 1 through 2 (of 2 total)
-
Posts
-
This is my bbPress forum – https://ofpad.com/community
I am trying to make it function like this support forum.
More specifically I am trying to add one specific features
The search bar along with the open support topics and forum profile buttons on the right of the search bar.
The screenshot is taken from this forum.
Here is what I have done so far to get to where I am now.
My bbPress CSS Code is the following:
#bbpress-forums .bbp-forums-list li { display: block; } #bbpress-forums fieldset.bbp-form { border: 0; padding: 0; } div.bbp-submit-wrapper { float: none; } .bbp-replies .bbp-header, .bbp-replies .bbp-footer , .bbp-topics .bbp-footer, .bbp-topic-started-in, .bbp-author-role { display: none; } .bbp-replies div.bbp-reply-header { border-top: 0; padding: 0; } li.bbp-body div.type-topic, li.bbp-body div.type-reply { margin-bottom: 30px; } .bbp-the-content-wrapper { margin-bottom: 20px; } #bbpress-forums li.bbp-body ul.forum, #bbpress-forums li.bbp-body ul.topic, #bbpress-forums li.bbp-header, #bbpress-forums li.bbp-footer { padding: 20px; } #bbpress-forums div.odd, #bbpress-forums ul.odd, #bbpress-forums div.even, #bbpress-forums ul.even { background-color: #fff; display: flex; padding: 0; border-radius: 5px; } #bbp-forum-0 .topic { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #bbp-forum-0 .topic .bbp-topic-title .bbp-topic-meta { display: none; } #bbpress-forums ul.even { background: rgba(245, 247, 249, 0.2); } #bbpress-forums div.bbp-forum-header, #bbpress-forums div.bbp-topic-header, #bbpress-forums div.bbp-reply-header { background-color: transparent; } .bbp-reply-author .staff { font-size: 14px; padding: 5px 10px; display: block; margin-top: 10px; font-weight: bold; border-radius: 5px; } #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 { border: 0; } li.bbp-body div.hentry { padding: 30px; border: 1px solid rgba(0,0,0,0.05); box-sizing: border-box; } #bbpress-forums li.bbp-header { /*background: transparent;*/ border: 0; } div.bbp-template-notice.info { display: none; } .bbp-pagination-count { display: none; } /* .bbp-search-form { display: none; } */ #bbp-your-profile .form-table, #bbp-your-profile .security-keys { display: none; } a.bbp-breadcrumb-home, a.bbp-breadcrumb-home + span{ display: none; } #new-post { margin: 0 auto; } .account-info ul { list-style-type: none; margin: 0; padding: 0; display: flex; } .account-info { font-size: 15px; margin-bottom: 40px; } .account-info ul li:first-child { flex-grow: 1; margin-right: 10px; } .account-info ul li:last-child { margin-left: 10px; } .account-info ul li a { font-size: 15px; color: #bacad6; } #bbp-search-form input[type="submit"] { font-size: 15px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; width: 84px; } #bbp-search-form input[type="text"] { font-size: 15px; background: #fff; border: 1px solid #bacad6; margin-right: -4px; border-right: 0; border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; width: calc(100% - 85px); } .bbpress .entry-header { overflow: hidden; } #new-post input[type="text"], #new-post input[type="url"], #new-post select, #new-post .wp-editor-container, textarea#bbp_reply_content, textarea#bbp_topic_content, textarea#bbp_forum_content { width: 100%; border-color: #bacad6; background-color: #fff; border-radius: 5px; box-sizing: border-box; } #new-post .quicktags-toolbar { border-top-left-radius: 5px; border-top-right-radius: 5px; } #new-post legend { font-size: 30px; margin-bottom: 10px; } #bbpress-results { padding: 40px; } .documenation-topics { margin-bottom: 40px; } #bbpress-forums li.bbp-body ul.topic:first-child { border-top-left-radius: 5px; border-top-right-radius: 5px; } #bbpress-forums li.bbp-body ul.topic:last-child { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } #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-radius: 50%; } div.bbp-forum-header, div.bbp-topic-header, div.bbp-reply-header { border-top: 0; } .bbp-meta { font-size: 12px; margin-bottom: 5px; } span.bbp-admin-links, span.bbp-admin-links a, .bbp-forum-header a.bbp-forum-permalink, .bbp-topic-header a.bbp-topic-permalink, .bbp-reply-header a.bbp-reply-permalink { color: #000; } #bbpress-forums div.bbp-forum-author, #bbpress-forums div.bbp-topic-author, #bbpress-forums div.bbp-reply-author { border-right: 1px solid rgba(0,0,0,0.05); width: 200px; padding: 40px; background: rgba(245, 247, 249, 0.2); } #bbpress-forums div.bbp-forum-content, #bbpress-forums div.bbp-topic-content, #bbpress-forums div.bbp-reply-content { width: calc(100% - 200px); margin: 0; padding: 40px; min-width: 0; } #bbpress-forums .bbp-forum-info .bbp-forum-content, #bbpress-forums p.bbp-topic-meta{ font-size: 14px; } .subscription-toggle { display: none; } .resolved, .topic-not-resolved, .topic-resolved { display: none; } .topic-resolved+a:before { color: #76b711; content: "RESOLVED"; font-size: 13px; font-weight: 700; border: 1px solid #76b711; padding: 3px 10px; float: right; border-radius: 5px; } .bbp-topic-pagination a { border-radius: 5px; padding: 5px 10px; vertical-align: middle; border-color: #efefef; } .bbp-topic-pagination a:hover { border-color: #bacad6; } .bbp-pagination-links { float: none; } .bbp-pagination-links a, .bbp-pagination-links span.current { min-width: 25px; height: 30px; line-height: 30px; text-align: center; border-radius: 5px; background: #fff; } .bbp-pagination-links a:hover, .bbp-pagination-links span.current { border: 1px solid #bacad6; background: #fff; } #bbpress-forums div.bbp-the-content-wrapper textarea.bbp-the-content { font-size: 15px; } .bbp-forum-header a.bbp-forum-permalink, .bbp-topic-header a.bbp-topic-permalink, .bbp-reply-header a.bbp-reply-permalink { float: none; margin-left: 10px; padding-left: 10px; border-left: 1px solid #ddd; } #bbpress-forums div.bbp-topic-content code, #bbpress-forums div.bbp-topic-content pre, #bbpress-forums div.bbp-reply-content code, #bbpress-forums div.bbp-reply-content pre { font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; } #bbpress-forums div.bbp-topic-content code, #bbpress-forums div.bbp-reply-content code { padding: .2rem .4rem; color: #bd4147; background-color: #f8f9fa; border-radius: .25rem; } #bbpress-forums div.bbp-topic-content pre code, #bbpress-forums div.bbp-reply-content pre code { padding: 0; font-size: inherit; color: inherit; background-color: transparent; border-radius: 0; } #bbpress-forums div.bbp-topic-content pre, #bbpress-forums div.bbp-reply-content pre { margin-top: 0; overflow: auto; -ms-overflow-style: scrollbar; display: block; font-size: 90%; color: #212529; padding: 20px; border-radius: 5px; border: 1px solid rgba(0,0,0,0.05); } #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 { border: 0; margin-bottom: -3px; border-radius: 50%; } .bbp-topic-started-by { display: none; } .bbp-pagination { float: none; clear: both; } .bbp-pagination-links a, .bbp-pagination-links span.current, .bbp-pagination-links span.dots { float: none; display: inline-block; } span.happy, span.unhappy { cursor: pointer; } span.happy { font-weight: bold; color: #5ea337; } span.unhappy { font-weight: bold; color: #444; } #bbpress-forums .status-closed, #bbpress-forums .status-closed a { color: #222; } #bbpress-forums .status-closed .bbp-reply-content a { color: #1e73be; } @media (max-width: 768px) { #bbpress-forums div.odd, #bbpress-forums ul.odd, #bbpress-forums div.even, #bbpress-forums ul.even { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } #bbpress-forums div.bbp-forum-author, #bbpress-forums div.bbp-topic-author, #bbpress-forums div.bbp-reply-author { float: none; width: auto; min-height: auto !important; margin: 0 !important; box-sizing: border-box; text-align: center !important; padding-left: 40px !important; } #bbpress-forums div.bbp-forum-content, #bbpress-forums div.bbp-topic-content, #bbpress-forums div.bbp-reply-content { margin-left: 0; } .account-info ul { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .account-info ul li:first-child { margin-right: 0; width: 100%; margin-bottom: 20px; } #bbpress-forums li.bbp-header { display: none; } li.bbp-forum-topic-count, li.bbp-topic-voice-count, li.bbp-forum-reply-count, li.bbp-topic-reply-count { float: none; width: 100%; text-align: left; } li.bbp-forum-freshness, li.bbp-topic-freshness { float: none; width: 100%; text-align: left; } li.bbp-forum-info, li.bbp-topic-title { float: none; width: 100%; margin-bottom: 20px !important; } li.bbp-topic-voice-count { display: inline-block; width: auto; } li.bbp-topic-voice-count:after { content: " Voices"; } li.bbp-topic-reply-count { display: inline-block; width: auto; } li.bbp-topic-reply-count:after { content: " Replies"; } li.bbp-topic-reply-count:before { content: " | "; } span.bbp-topic-started-by { display: none; } #bbpress-forums div.bbp-forum-content, #bbpress-forums div.bbp-topic-content, #bbpress-forums div.bbp-reply-content { width: 100%; box-sizing: border-box; } #bbpress-forums div.bbp-reply-author img.avatar { position: relative; margin-bottom: 20px; } #bbpress-forums .bbp-body div.bbp-reply-content { padding: 20px !important; } }I have also used the
Code Snippetplugin to add some PHP code to my functions.php file. Here is the PHP Code I have inserted://Removes the sub-forum topic and reply count function remove_counts() { $args['show_topic_count'] = false; $args['show_reply_count'] = false; $args['count_sep'] = ''; return $args; } add_filter('bbp_before_list_forums_parse_args', 'remove_counts' ); //Removes Breadcrumbs //add_filter( 'bbp_no_breadcrumb', '__return_true' ); //Change Breadcrumbs Text function change_bread_crumbs_text( $args = array() ) { $args['root_text'] = 'Community'; return $args; } add_filter( 'bbp_after_get_breadcrumb_parse_args', 'change_bread_crumbs_text' ); //Add descriptions to subforums function custom_list_forums( $args = '' ) { // Define used variables $output = $sub_forums = $topic_count = $reply_count = $counts = ''; $i = 0; $count = array(); // Parse arguments against default values $r = bbp_parse_args( $args, array( 'before' => '<ul class="bbp-forums-list">', 'after' => '</ul>', 'link_before' => '<li class="bbp-forum">', 'link_after' => '</li>', 'count_before' => ' (', 'count_after' => ')', 'count_sep' => ', ', 'separator' => ' ', 'forum_id' => '', 'show_topic_count' => true, 'show_reply_count' => true, ), 'list_forums' ); // Loop through forums and create a list $sub_forums = bbp_forum_get_subforums( $r['forum_id'] ); if ( !empty( $sub_forums ) ) { // Total count (for separator) $total_subs = count( $sub_forums ); foreach ( $sub_forums as $sub_forum ) { $i++; // Separator count // Get forum details $count = array(); $show_sep = $total_subs > $i ? $r['separator'] : ''; $permalink = bbp_get_forum_permalink( $sub_forum->ID ); $title = bbp_get_forum_title( $sub_forum->ID ); $content = bbp_get_forum_content($sub_forum->ID) ; // Show topic count if ( !empty( $r['show_topic_count'] ) && !bbp_is_forum_category( $sub_forum->ID ) ) { $count['topic'] = bbp_get_forum_topic_count( $sub_forum->ID ); } // Show reply count if ( !empty( $r['show_reply_count'] ) && !bbp_is_forum_category( $sub_forum->ID ) ) { $count['reply'] = bbp_get_forum_reply_count( $sub_forum->ID ); } // Counts to show if ( !empty( $count ) ) { $counts = $r['count_before'] . implode( $r['count_sep'], $count ) . $r['count_after']; } // Build this sub forums link $output .= $r['before'].$r['link_before'] . '<a href="' . esc_url( $permalink ) . '" class="bbp-forum-link">' . $title . $counts . '</a>' . $show_sep . $r['link_after'].'<div class="bbp-forum-content">'.$content.'</div>'.$r['after']; } // Output the list return $output ; } } add_filter('bbp_list_forums', 'custom_list_forums' ); // Change Forums in Index page table header to Communities function change_translate_text( $translated_text ) { if ( $translated_text == 'Forum' ) { $translated_text = 'Communities '; } return $translated_text; } add_filter( 'gettext', 'change_translate_text', 20 );How do I incorporate the search feature along with the buttons into my bbpress forum?
Thank you in advance for all the help.
Lead Developer
Here’s the function we’re using for the search bar:
add_action( 'generate_before_content', function() { if ( is_page( 'support' ) || ( function_exists( 'is_bbpress' ) && is_bbpress() ) ) : ?> <div class="account-info"> <ul> <li><?php echo do_shortcode( '[ bbp-search-form ]' ); ?></li> <?php if ( is_user_logged_in() ) : ?> <li><a class="button ghost" href="<?php echo site_url(); ?>/support/#new-post">Open Support Topic</a></li> <?php if ( function_exists( 'bbp_get_user_profile_url' ) ) : ?> <li><a class="button ghost" href="<?php echo bbp_get_user_profile_url( get_current_user_id() ); ?>">Forum Profile</a></li> <?php endif; ?> <?php else : ?> <li><a class="button ghost" href="<?php echo wp_login_url( get_permalink() ); ?>" title="Log in">Log In</a></li> <li><a class="button ghost" href="#" rel="nofollow" title="Our free support forum">Free Support</a></li> <?php endif; ?> </ul> </div> <?php endif; } );As for the toolbar, I think it may be this plugin: https://wordpress.org/plugins/gd-bbpress-tools/
Viewing 2 posts - 1 through 2 (of 2 total)
- You must be logged in to reply to this topic.