Skip to:
Content
Pages
Categories
Search
Top
Bottom

Make the forum pages full-width


  • davidnsfw
    Participant

    @davidnsfw

    I tried making my forums page full-width, but didn’t manage, so if you could help, it would be great.

    Here is my page.php file:

    <?php get_header(); ?>
    <div id="body-wrapper">
    	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    	<div id="content-wrapper">
    		<div id="content">
    			<div id="post-header">
    				<h1 class="story-title" itemprop="name"><?php the_title(); ?></h1>
    			</div><!--post-header-->
    			<div id="content-main">
    				<div id="content-main-inner">
    				<div id="post-area" itemscope itemtype="http://schema.org/Article" <?php post_class(); ?>>
    					<?php $mvp_featured_img = get_option('mvp_featured_img'); if ($mvp_featured_img == "true") { ?>
    						<?php if(get_post_meta($post->ID, "mvp_video_embed", true)): ?>
    							<?php echo get_post_meta($post->ID, "mvp_video_embed", true); ?>
    						<?php else: ?>
    							<?php $mvp_show_hide = get_post_meta($post->ID, "mvp_featured_image", true); if ($mvp_show_hide == "hide") { ?>
    							<?php } else { ?>
    								<?php if (  (function_exists('has_post_thumbnail')) && (has_post_thumbnail())  ) { ?>
    								<div id="featured-image" class="post-section" itemscope itemtype="http://schema.org/Article">
    									<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'post-thumb' ); ?>
    									<img itemprop="image" src="<?php echo $thumb['0']; ?>" />
    								</div><!--featured-image-->
    								<?php if(get_post_meta($post->ID, "mvp_photo_credit", true)): ?>
    								<div id="featured-caption" class="post-section">
    									<?php echo get_post_meta($post->ID, "mvp_photo_credit", true); ?>
    								</div><!--featured-caption-->
    								<?php endif; ?>
    								<?php } ?>
    							<?php } ?>
    						<?php endif; ?>
    					<?php } ?>
    					<div id="content-area" class="post-section">
    						<?php the_content(); ?>
    						<?php wp_link_pages(); ?>
    					</div><!--content-area-->
    				</div><!--post-area-->
    				</div><!--content-main-inner-->
    			</div><!--content-main-->
    			<?php endwhile; endif; ?>
    			<?php get_sidebar(); ?>
    		</div><!--content-->
    	</div><!--content-wrapper-->
    </div><!--body-wrapper-->
    <?php get_footer(); ?>
Viewing 19 replies - 1 through 19 (of 19 total)

  • Robin W
    Moderator

    @robin-w

    yes take out the line

    <?php get_sidebar(); ?>

    about 5 line sup from the bottom.

    BUT you need this to be a bbpress.php file in the right directory as per and don’t delete the page.php file – that runs the rest of your site !

    Step by step guide to setting up a bbPress forum – Part 1


    davidnsfw
    Participant

    @davidnsfw

    Welcome.

    Thanks, now there is no sidebar.

    But I want to make the forum wider,

    here is screenshot https://i.imgur.com/gAv9v1h.png

    Is it possible?

    Also, do you know how to change the title of the main forum, it is “Forums Archive – site name” by default.


    Robin W
    Moderator

    @robin-w

    We’d need a link to your site to fix those


    davidnsfw
    Participant

    @davidnsfw

    Welcome.

    http://bit.ly/1NQj9fO Slightly NSFW


    Robin W
    Moderator

    @robin-w

    try adding

    .bbpress #content-main {
    width: 96%;
    }

    to your style.css

    Functions files and child themes – explained !


    davidnsfw
    Participant

    @davidnsfw

    I have added this code but it does not help.


    Robkk
    Moderator

    @robkk

    Slightly NSFW

    i laughed at this.


    @davidnsfw
    add !important after 96% like this

    .bbpress #content-main {
    width: 96% !important;
    }

    and see if that works.


    davidnsfw
    Participant

    @davidnsfw

    I have added it, but I do not see any change.


    Robkk
    Moderator

    @robkk

    These two Custom CSS rules should help.

    put them anywhere you can put custom CSS

    child themes style.css file
    jetpacks custom CSS module
    a standalone custom css plugin.

    .bbpress .post-section {
      margin: 0 2% 20px 2%;
      width: 96%;
    }
    
    .bbpress #content-main {
      width: 100%;
      margin-right: 0;
    }

    if this does not work try this CSS for a test

    if the links in your forum turn red the CSS is working.

    .bbpress a {
      color: red;
    }

    if the links are red and my above CSS rules for full width arent working i probably have to redo the CSS rules i gave you above to include more div classes which will be super annoying.


    davidnsfw
    Participant

    @davidnsfw

    I really appreciate your help but can you please explain this step by step?


    Robkk
    Moderator

    @robkk

    @davidnsfw

    alright

    do you have a Custom CSS area like the options i put above??


    davidnsfw
    Participant

    @davidnsfw

    Do you mean CSS Stylesheet Editor?


    Robkk
    Moderator

    @robkk

    @davidnsfw

    yeah , a place where you can drop CSS code snippets


    davidnsfw
    Participant

    @davidnsfw

    Ok, so if you can explain this process step by step.


    Robkk
    Moderator

    @robkk

    @davidnsfw

    alright since i think your site has jetpack installed

    make sure you have the custom css module activated in jetpack .

    now go to appearance > edit css

    copy this code into your custom css editor.

    .bbpress .post-section {
      margin: 0 2% 20px 2%;
      width: 96%;
    }
    
    .bbpress #content-main {
      width: 100%;
      margin-right: 0;
    }

    hit save

    check and see if it works

    if the code does work, reply back on here that it works now.

    if the code doesnt work i need to see if any Custom CSS on bbPress would show . so copy and replace my old CSS code that you just previously pasted

    with this code

    .bbpress a {
      color: red;
    }

    now see if your links on your forum are red

    if it turns red, reply back here that your links are red and that i need to add more classes to your original CSS so i could make your forum full width.


    davidnsfw
    Participant

    @davidnsfw

    It works now, many thanks.


    Robkk
    Moderator

    @robkk

    @davidnsfw

    thats great


    anhduy304
    Participant

    @anhduy304

    @robkk Hi,I am following your instruction but this code

    .bbpress a {
      color: red;
    }

    turns red.Could you tell me which classes should I add to have a full width forum ?


    Robin W
    Moderator

    @robin-w

    @anhduy304 – it is site specific, give us a link to your site

Viewing 19 replies - 1 through 19 (of 19 total)
  • You must be logged in to reply to this topic.
Skip to toolbar