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(); ?>

[@robin-w Moderator 9 years, 8 months ago]

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 9 years, 8 months ago]

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 9 years, 8 months ago]

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

[@davidnsfw Participant 9 years, 8 months ago]

Welcome.

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

[@robin-w Moderator 9 years, 8 months ago]

try adding

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

to your style.css

Functions files and child themes – explained !

[@davidnsfw Participant 9 years, 8 months ago]

I have added this code but it does not help.

[@robkk Moderator 9 years, 8 months ago]

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 9 years, 8 months ago]

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

[@robkk Moderator 9 years, 8 months ago]

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 9 years, 8 months ago]

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

[@robkk Moderator 9 years, 8 months ago]

@davidnsfw

alright

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

[@davidnsfw Participant 9 years, 8 months ago]

Do you mean CSS Stylesheet Editor?

[@robkk Moderator 9 years, 8 months ago]

@davidnsfw

yeah , a place where you can drop CSS code snippets

[@davidnsfw Participant 9 years, 8 months ago]

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

[@robkk Moderator 9 years, 8 months ago]

@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 9 years, 8 months ago]

It works now, many thanks.

[@robkk Moderator 9 years, 8 months ago]

@davidnsfw

thats great

[@anhduy304 Participant 7 years ago]

@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 7 years ago]

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