Home Forums WoodMart support forum Customize bbpress with woodmart template

Customize bbpress with woodmart template

Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • #32344

    Oriol Duarri
    Participant

    Hi, how I can customize the forum page with woodmart child?
    On your xtemos page you are using a header imagen on forum page with a search tool and breadcrumbs on it, how we can do the same?

    Screenshot attached below

    Thanks!

    Attachments:
    You must be logged in to view attached files.
    #32436

    Artem Temos
    Keymaster

    Hello,

    We can provide you the code from our xtemos website.

    1. This is for the search form in the page title. Add it to the functions.php file in the child theme

    // **********************************************************************// 
    // ! Page title function
    // **********************************************************************// 
    add_action( 'woodmart_after_header', 'woodmart_page_title', 10 );
    function woodmart_page_title() {
    	global $wp_query, $post;
    
    	// Remove page title for dokan store list page
    
    	if( function_exists( 'dokan_is_store_page' )  && dokan_is_store_page() ) {
    		return '';
    	}
    
    	$page_id = 0;
    
    	$disable     = false;
    	$page_title  = true;
    	$breadcrumbs = woodmart_get_opt( 'breadcrumbs' );
    
    	$image = '';
    
    	$style = '';
    
    	$page_for_posts    = get_option( 'page_for_posts' );
    	$page_for_shop     = get_option( 'woocommerce_shop_page_id' );
    	$page_for_projects = woodmart_tpl2id( 'portfolio.php' );
    
    	$title_class = 'page-title-';
    
    	$title_color = $title_type = $title_size = 'default';
    
    	// Get default styles from Options Panel
    	$title_design = woodmart_get_opt( 'page-title-design' );
    
    	$title_size = woodmart_get_opt( 'page-title-size' );
    
    	$title_color = woodmart_get_opt( 'page-title-color' );
    
    	$shop_title = woodmart_get_opt( 'shop_title' );
    	$shop_categories = woodmart_get_opt( 'shop_categories' );
    
    	// Set here page ID. Will be used to get custom value from metabox of specific PAGE | BLOG PAGE | SHOP PAGE.
    	$page_id = woodmart_page_ID();
    
    	if( $page_id != 0 ) {
    		// Get meta value for specific page id
    		$disable = get_post_meta( $page_id, '_woodmart_title_off', true );
    
    		$image = get_post_meta( $page_id, '_woodmart_title_image', true );
    
    		$custom_title_color = get_post_meta( $page_id, '_woodmart_title_color', true );
    		$custom_title_bg_color = get_post_meta( $page_id, '_woodmart_title_bg_color', true );
    
    		if( $image != '' ) {
    			$style .= "background-image: url(" . $image . ");";
    		}
    
    		if( $custom_title_bg_color != '' ) {
    			$style .= "background-color: " . $custom_title_bg_color . ";";
    		}
    
    		if( $custom_title_color != '' && $custom_title_color != 'default' ) {
    			$title_color = $custom_title_color;
    		}
    	}
    
    	if( $title_design == 'disable' ) $page_title = false;
    
    	if( ! $page_title && ! $breadcrumbs ) $disable = true;
    
    	if( $disable ) return;
    
    	$title_class .= $title_type;
    	$title_class .= ' title-size-'  . $title_size;
    	$title_class .= ' color-scheme-' . $title_color;
    	$title_class .= ' title-design-' . $title_design;
    
    	// Heading for pages
    	if( is_singular( 'page' ) && ( ! $page_for_posts || ! is_page( $page_for_posts ) ) ):
    		$title = get_the_title();
    
    		?>
    			<div class="page-title <?php echo esc_attr( $title_class ); ?>" style="<?php echo esc_attr( $style ); ?>">
    				<div class="container">
    					<header class="entry-header">
    						<?php if ( woodmart_woocommerce_installed() && ( is_cart() || is_checkout() ) ): ?>
    							<?php woodmart_checkout_steps(); ?>
    						<?php else: ?>
    							<?php if( $page_title ): ?><h1 class="entry-title"><?php echo esc_html( $title ); ?></h1><?php endif; ?>
    							<?php if( $breadcrumbs ) woodmart_breadcrumbs(); ?>
    						<?php endif ?>
    					</header><!-- .entry-header -->
    				</div>
    			</div>
    		<?php
    		return;
    	endif;
    	
    	// Heading for forums
    	if( is_bbpress() ):
    		$title = get_the_title();
    		?>
    			<div class="page-title <?php echo esc_attr( $title_class ); ?>" style="<?php echo esc_attr( $style ); ?>">
    				<div class="container">
    					<header class="entry-header">
    						<?php if ( woodmart_woocommerce_installed() && ( is_cart() || is_checkout() ) ): ?>
    							<?php woodmart_checkout_steps(); ?>
    						<?php else: ?>
    							<?php if( $page_title ): ?><h1 class="entry-title"><?php echo 'SUPPORT FORUM'; ?></h1><?php endif; ?>
    						<?php endif ?>
    						<div class="forum-search-inheading">
    							<p><?php _e('Search topic or reply') ?></p>
    							<?php bbp_get_template_part( 'form', 'search' ); ?>
    						</div>
    						<?php if( $breadcrumbs ) bbp_breadcrumb(); ?>
    					</header><!-- .entry-header -->
    				</div>
    			</div>
    		<?php
    		return;
    	endif;
    
    	// Heading for blog and archives
    	if( is_singular( 'post' ) || woodmart_is_blog_archive() ):
    
    		$title = ( ! empty( $page_for_posts ) ) ? get_the_title( $page_for_posts ) : esc_html__( 'Blog', 'woodmart' );
    
    		if( is_tag() ) {
    			$title = esc_html__( 'Tag Archives: ', 'woodmart')  . single_tag_title( '', false ) ;
    		}
    
    		if( is_category() ) {
    			$title = '<span>' . single_cat_title( '', false ) . '</span>'; 
    		}
    
    		if( is_date() ) {
    			if ( is_day() ) :
    				$title = esc_html__( 'Daily Archives: ', 'woodmart') . get_the_date();
    			elseif ( is_month() ) :
    				$title = esc_html__( 'Monthly Archives: ', 'woodmart') . get_the_date( _x( 'F Y', 'monthly archives date format', 'woodmart' ) );
    			elseif ( is_year() ) :
    				$title = esc_html__( 'Yearly Archives: ', 'woodmart') . get_the_date( _x( 'Y', 'yearly archives date format', 'woodmart' ) );
    			else :
    				$title = esc_html__( 'Archives', 'woodmart' );
    			endif;
    		}
    
    		if ( is_author() ) {
    			/*
    			 * Queue the first post, that way we know what author
    			 * we're dealing with (if that is the case).
    			 *
    			 * We reset this later so we can run the loop
    			 * properly with a call to rewind_posts().
    			 */
    			the_post();
    
    			$title = esc_html__( 'Posts by ', 'woodmart' ) . '<span class="vcard"><a class="url fn n" href="' . esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ) . '" title="' . esc_attr( get_the_author() ) . '" rel="me">' . get_the_author() . '</a></span>';
    
    			/*
    			 * Since we called the_post() above, we need to
    			 * rewind the loop back to the beginning that way
    			 * we can run the loop properly, in full.
    			 */
    			rewind_posts();
    		}
    
    		if( is_search() ) {
    			$title = esc_html__( 'Search Results for: ', 'woodmart' ) . get_search_query();
    		}
    
    		?>
    			<div class="page-title <?php echo esc_attr( $title_class ); ?> title-blog" style="<?php echo esc_attr( $style ); ?>">
    				<div class="container">
    					<header class="entry-header">
    						<?php if( $page_title ): ?><h1 class="entry-title"><?php echo ( $title ); ?></h1><?php endif; ?>
    						<?php if( $breadcrumbs && !is_search() ) woodmart_breadcrumbs(); ?>
    					</header><!-- .entry-header -->
    				</div>
    			</div>
    		<?php
    		return;
    	endif;
    
    	// Heading for portfolio
    	if( is_singular( 'portfolio' ) || woodmart_is_portfolio_archive() ):
    
    		$title = get_the_title( $page_for_projects );
    
    		if( is_tax( 'project-cat' ) ) {
    			$title = single_term_title( '', false );
    		}
    
    		?>
    			<div class="page-title <?php echo esc_attr( $title_class ); ?> title-blog" style="<?php echo esc_attr( $style ); ?>">
    				<div class="container">
    					<header class="entry-header">
    						<?php if( $page_title ): ?><h1 class="entry-title"><?php echo esc_html( $title ); ?></h1><?php endif; ?>
    						<?php if( $breadcrumbs ) woodmart_breadcrumbs(); ?>
    					</header><!-- .entry-header -->
    				</div>
    			</div>
    		<?php
    		return;
    	endif;
    
    	// Page heading for shop page
    	if( woodmart_is_shop_archive()
    		&& ( $shop_categories || $shop_title )
    	 ):
    
    		if( is_product_category() ) {
    
    			$cat = $wp_query->get_queried_object();
    
    			$cat_image = woodmart_get_category_page_title_image( $cat );
    
    			if( $cat_image != '') {
    				$style = "background-image: url(" . $cat_image . ")";
    			}
    		}
    
    		if( is_product_category() || is_product_tag() ) {
    			$title_class .= ' with-back-btn';
    		}
    
    		if( ! $shop_title ) {
    			$title_class .= ' without-title';
    		}
    
    		?>
    			<?php if ( apply_filters( 'woocommerce_show_page_title', true ) && ! is_singular( "product" ) ) : ?>
    				<div class="page-title <?php echo esc_attr( $title_class ); ?> title-shop" style="<?php echo esc_attr( $style ); ?>">
    					<div class="container">
    						<div class="nav-shop">
    
    							<div class="shop-title-wrapper">
    								<?php if ( is_product_category() || is_product_tag() ): ?>
    									<?php woodmart_back_btn(); ?>
    								<?php endif ?>
    
    								<?php if ( $shop_title ): ?>
    									<h1><?php woocommerce_page_title(); ?></h1>
    								<?php endif ?>
    							</div>
    							
    							<?php if( ! is_singular( "product" ) && $shop_categories ) woodmart_product_categories_nav(); ?>
    
    						</div>
    					</div>
    				</div>
    			<?php endif; ?>
    
    		<?php
    		
    		return;
    	endif;
    }

    2. This part is for styling, add it to the style.css file

    /** ------------------------------------------------------------------------------------------------
    * BB Page title
    * ------------------------------------------------------------------------------------------------ */
    
    .bbpress div.bbp-breadcrumb {
    	float: none;
    	text-align: center;
    }
    .bbpress div.bbp-breadcrumb a {
    	color: white;
    }
    .bbpress div.bbp-breadcrumb p {
    	color: rgba(255,255,255,0.9);
    }
    .bbpress div.bbp-breadcrumb:after{
    	display: none;
    }
    .bbpress div.bbp-breadcrumb{
    	margin-bottom: 0;
    }
    .bbpress div.bbp-breadcrumb p{
    	margin-bottom: 0;
    }
    .forum-search-inheading #bbp-search-form {
    	position: relative;
    	max-width: 450px;
    	margin: 0 auto;
    }
    .forum-search-inheading #bbp-search-form input[type="text"] {
    	background-color: transparent;
    	border:2px solid rgba(255, 255, 255, 0.7);
    	color: white;
    	font-size: 16px;
    	letter-spacing: 0.3px;
    	padding-right: 55px;
    }
    .forum-search-inheading #bbp-search-form input[type="text"]:focus {
    	border-color:white;
    }
    .forum-search-inheading #bbp_search_submit {
    	position: absolute;
    	right: 0px;
    	top: 50%;
    	transform: translateY(-50%);
    	background-color: transparent !important;
    	border:none;
    	font-size: 0px;
    	text-align: center;
    	width: 50px;
    	padding: 0;
    	color: rgba(255,255,255,0.9);
    }
    .forum-search-inheading #bbp_search_submit:before {
    	content: "\f125";
    	font-size: 20px;
    	line-height: 30px;
    	font-family: "woodmart-font";
    	transition: opacity .2s ease;
    	-webkit-transition: opacity .2s ease;
    }
    .forum-search-inheading #bbp_search_submit:hover,
    .forum-search-inheading #bbp_search_submit:focus {
    	background-color: transparent;
    	color: white;
    	outline: none;
    	opacity: 0.8;
    }
    .forum-search-inheading #bbp_search_submit{
        background-color: #96040f;
        border-color: #96040f;
        color: #ffffff;
        text-decoration: none;
    }
    .forum-search-inheading {
    	margin-bottom: 20px;
    }
    .title-size-default .entry-title, .title-size-default h1{
    	font-size: 48px;
    	font-weight: 400;
    	font-family: Lato;
    	margin-bottom: 7px;
    	text-transform: uppercase;
    }

    3. Create a file woodmart-child/bbpress/form-search.php with the following code

    <form role="search" method="get" id="bbp-search-form" action="<?php bbp_search_url(); ?>">
    	<div>
    		<label class="screen-reader-text hidden" for="bbp_search"><?php _e( 'Search for:', 'bbpress' ); ?></label>
    		<input type="hidden" name="action" value="bbp-search-request" />
    		<input tabindex="<?php bbp_tab_index(); ?>" type="text" value="<?php echo esc_attr( bbp_get_search_terms() ); ?>" name="bbp_search" id="bbp_search" />
    		<button type="submit" id="bbp_search_submit" value="<?php esc_attr_e( 'Search', 'bbpress' ); ?>"><?php esc_attr_e( 'Search', 'bbpress' ); ?></button>
    	</div>
    </form>

    Regards

    #32503

    Oriol Duarri
    Participant

    WOW!

    Really thanks guys, you’re so cool! 😉
    I will need just a few fixes more, please, see the following screenshot: http://prntscr.com/hyfjuz

    #32511

    Artem Temos
    Keymaster

    Here is a code to delete these elements

    #bbpress-forums .bbp-search-form, #bbpress-forums .bbp-breadcrumb{
    	display: none;
    }

    As for the search form, it seems that you didn’t create the file we sent you. Or you didn’t activate the child theme.

    #32518

    Oriol Duarri
    Participant

    Hi,

    Were I have to submit this code in order to got it working? I introduced this code at the top of style.css of child theme but no changes have been done on the forum page

    I have the child theme working and I’ve created the file too

    I attach screenshots

    Attachments:
    You must be logged in to view attached files.
    #32527

    Artem Temos
    Keymaster

    Could you please provide us your FTP access so we can check what is wrong there?

    #32528

    Oriol Duarri
    Participant

    And we’re I can change this colors? I’m looking for it but I’m being unable to do it for myself, I don’t have knowledge on css code

    Really thanks!

    Attachments:
    You must be logged in to view attached files.
    #32534

    Oriol Duarri
    Participant

    Here I give to you FTP access,

    In order to set you on the whitelist of the firewall I will need your IP and the country where are you connecting from,

    I wait for the info,
    Thanks!

    #32543

    Eric Watson
    Participant

    Could you please provide us your admin access also?

    #32553

    Oriol Duarri
    Participant

    There’s an admin for you

    #32554

    Eric Watson
    Participant

    #32556

    Oriol Duarri
    Participant

    IP added on whitelist, now you may connect without problems, if you can’t connect, please, give me the name of the country which are you connecting from

    #32557

    Eric Watson
    Participant

    My country

    #32558

    Oriol Duarri
    Participant

    Country added to the whitelist, try to connect now

    Thanks!

    #32563

    Artem Temos
    Keymaster

    You can set your page title background in Theme Settings -> Page heading http://prntscr.com/hyg8el
    And here is a code to change the color

    .title-size-default .entry-title, .title-size-default h1{
    	color: #fff;
    }

    Regards

    #32569

    Oriol Duarri
    Participant

    Hi,

    I added the color at style.css but I don’t see any changes, can you check it please?

    style.css with the color code on title: http://prntscr.com/hygrfq

    changes we’re needing to do for finish: https://prnt.sc/hygsgx

    Really thanks!

    #32582

    Artem Temos
    Keymaster

    You need to clear your browser cache to see the changes https://prnt.sc/hyhmi9

    #32596

    Oriol Duarri
    Participant

    Great!!

    Really thanks ppl, your awesome guys

    Problem solved
    Thanks!

    #32598

    Artem Temos
    Keymaster

    Great, you are welcome!

Viewing 19 posts - 1 through 19 (of 19 total)