Skip to:
Content
Pages
Categories
Search
Top
Bottom

Trying to make forum full width


  • bsilverop
    Participant

    @bsilverop

    Hi All,

    I’m having some trouble getting my forum pages to be full width. If I use the shortcode to embed a forum and set my page template to “Full Width”, it works fine. But then if you click another forum topic it goes back to what looks like half width. I have tried copying my full-width.php (twenty fourteen) and calling it bbpress.php and forum.php, but it seems to have no impact. I have also tried adding some CSS, but also seemed to have no impact:

    .bbpress-forums .col-2cl .main {
    background: none repeat-y right 0;
    padding-right: 0px;
    }

    I’m kind of at a loss as to why the forum pages are still not full width, so would appreciate any suggestions. Thanks,

Viewing 25 replies - 1 through 25 (of 34 total)

  • Robin W
    Moderator

    @robin-w

    are you using the twentyfourteen theme?


    bsilverop
    Participant

    @bsilverop

    Robin W, yes I am using twenty fourteen.


    marandaicgiyim
    Participant

    @marandaicgiyim

    i have the problem with you,am looking for a solution.


    Robin W
    Moderator

    @robin-w

    my twentyfourteen theme doesn’t have a full-width.php.

    Suggest you make a copy of page.php – rename it bbpress.php

    then remove

    get_sidebar();

    near the end

    and save it and let us know if that works


    bsilverop
    Participant

    @bsilverop

    Thanks for the update. I have a file called full-width.php in wp-content/themes/twentyfourteen/page-templates. And I apologize, I don’t think I was clear in my original post. I want the forum to extend the width of the page beyond the content sidebar on the right side of the page. I do want the left sidebar to remain.

    I modified the copy of bbpress.php taken from page.php, and I removed

    <?php get_sidebar( 'content' ); ?>

    I was already hiding the content sidebar on forum pages, so the result there is the same. The forum is cut short where the content sidebar on the left normally appears.

    I tested the full width page template on one of my pages to make sure it extends beyond the content sidebar on the right, and it does. I am hoping to get the forum to do the same. Thanks again,


    Robin W
    Moderator

    @robin-w

    can you post some links please so that we can see the problem


    bsilverop
    Participant

    @bsilverop

    I created a temp user so you can see what this looks like. Here’s the link:

    http://todaystechblog.com/

    Log in as RobinW/RobinW and click the Forum on the left side of the page. The forums visibility are all set to Private.

    Thanks for looking,


    Robin W
    Moderator

    @robin-w

    sorry it didn’t like that login


    bsilverop
    Participant

    @bsilverop

    Sorry for that, I re-added the user and it’s working.


    Robin W
    Moderator

    @robin-w

    ok, in your theme css add this at the bottom

    #bbpress-forums .content-area {
    width: 150% !important;
    }

    My css is lousy, so if this doesn’t work, come back !


    bsilverop
    Participant

    @bsilverop

    Thanks for looking in to it on the server. I added what you suggested to the CSS but it seemed to have no impact. I’ve done some other CSS customizations to increase the font size, so I removed those to eliminate the possibility that some of my other changes are preventing this from working. But modifying the width did not change the behavior. Thanks again,


    Robin W
    Moderator

    @robin-w

    try just

    .content-area {
    width: 150% !important;
    }

    but that might muck up other areas of the site


    bsilverop
    Participant

    @bsilverop

    It did indeed muck up other areas of the site. But I combined the two you sent and this seems to work:

    #bbpress-forums {
    	width: 150% !important;
    }

    Can you see any reason why this wouldn’t be ideal? The only thing I’ve noticed so far is that when testing on a large monitor, the footer has a lot of empty space at the bottom (only on the forum pages). Otherwise it looks to be working ok on my laptop, I’m just concerned it might not for others. Thanks again!


    Robkk
    Moderator

    @robkk

    change the width from 150% to just 100%, if you go to a smaller screen size the forums are cut-off.

    use this and see if it works

    @media screen and (min-width: 1008px)
    .bbpress .site-content {
    margin-right: 0;
    margin-left: 182px;
    }

    Robin W
    Moderator

    @robin-w

    @robkk – I was hoping you might join in here, you css is so much better than mine !!!


    bsilverop
    Participant

    @bsilverop

    Thanks for the feedback. I added the @media screen CSS suggested above, but the forum width reverts back to the way it was before. But yes, you’re right. When I go to another screen size the forum size changes.


    Robkk
    Moderator

    @robkk

    @robin-w 🙂


    @bsilverop
    well you can try adding !important to it too, or removing the @media screen and (min-width: 1008px)

    i just took it right off of inspect element.

    but for sure keep the margin-right:at zero pixels because that is where your old sidebar use to be.

    if all still doesnt work change .bbpress to #bbpress-forums

    reply back if you havent got it yet.


    bsilverop
    Participant

    @bsilverop

    Thanks, removing @media screen and (min-width: 1008px) and adding !important seems to have worked. The forum now resizes to fit the page if you go to a smaller screen size. I appreciate the help from both @robin-w and @robkk. I didn’t expect support like this, I really am grateful. Thanks again!

    Solution:

    1) Copy page.php and rename bbpress.php. Remove <?php get_sidebar( 'content' ); ?> as I want to extend beyond the content sidebar.

    2) Add CSS:

    #bbpress-forums {
    	font-size: inherit !important;
    	width: 100% !important;
    }
    
    .bbpress .site-content {
    	margin-right: 0 !important;
    	margin-left: 182px !important;
    }

    Robkk
    Moderator

    @robkk

    @bsilverop

    well i just checked and its almost there,

    you have space on the left whenever you go to a smaller screen size so you probably need to bring back the @media statement so there is space for the left sidebar when it reaches 1008px but none when its on a smaller than 1008px.

    #bbpress-forums {
    	font-size: inherit !important;
    	width: 100% !important;
    }
    
    @media screen and (min-width: 1008px)
    .bbpress .site-content {
    	margin-right: 0 !important;
    	margin-left: 182px !important;
    }
    
    .bbpress .site-content {
    	margin-right: 0 !important;
    	margin-left: 0 !important;
    }

    i think your full width forum should be done now


    bsilverop
    Participant

    @bsilverop

    I didn’t notice this before, but the problem seems to be that when I try and save anything with the @media statement, it ends up saving it like what’s shown below (notice the missing margin-right and margin-left) no matter how many times I fill in the missing lines and re-save. I suppose it’s an issue with the CSS plugin (JetPack Custom CSS), but from what I understand that file is stored in the database and generated dynamically and cannot be modified directly. So I’m not too sure how I can add this otherwise.

    @media screen and (min-width: 1008px)
    .bbpress .site-content {
    	
    }

    Robkk
    Moderator

    @robkk

    try this and make sure its above the other .bbpress .site-content {

    @media screen and (min-width: 1008px) {
    .bbpress .site-content {
    	margin-right: 0 !important;
    	margin-left: 182px !important;
    }

    bsilverop
    Participant

    @bsilverop

    Thanks. I’m just using one .bbpress .site-content because I’m keeping the right sidebar. Whenever I use the @media screen piece, it just chops off what’s below it. But yes, it does seem like it’s needed. The first other person to test said that the title of the page is cut off just a little bit on the left side, where as on my end it seems like there’s plenty of space.

    This is all the custom CSS if it makes a difference:

    .site,
    .site-header {
    	max-width: 100%;
    }
    
    .bbpress-forums .col-2cl .main {
    	background: none repeat-y right 0;
    	padding-right: 0;
    }
    
    .site-content .entry-header,
    .site-content .entry-content,
    .site-content .entry-summary,
    .site-content .entry-meta, .page-content {
    	max-width: 100%;
    }
    
    .form-allowed-tags {
    	display: none;
    }
    
    div.bbp-breadcrumb, div.bbp-topic-tags {
    	font-size: inherit !important;
    }
    
    #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 {
    	font-size: inherit !important;
    }
    
    #bbpress-forums {
    	font-size: inherit !important;
    	width: 100% !important;
    }
    
    .bbpress .site-content {
    	margin-right: 0 !important;
    	margin-left: 182px !important;
    }

    And this is it after I add the @media screen tag (notice it just cuts off the rest):

    
    .site,
    .site-header {
    	max-width: 100%;
    }
    
    .bbpress-forums .col-2cl .main {
    	background: none repeat-y right 0;
    	padding-right: 0;
    }
    
    .site-content .entry-header,
    .site-content .entry-content,
    .site-content .entry-summary,
    .site-content .entry-meta, .page-content {
    	max-width: 100%;
    }
    
    .form-allowed-tags {
    	display: none;
    }
    
    div.bbp-breadcrumb, div.bbp-topic-tags {
    	font-size: inherit !important;
    }
    
    #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 {
    	font-size: inherit !important;
    }
    
    #bbpress-forums {
    	font-size: inherit !important;
    	width: 100% !important;
    }
    
    @media screen and (min-width: 1008px) {

    Robkk
    Moderator

    @robkk

    alright this should be your entire css now

    if the @media queries still do not work try just adding them into your child themes style.css file.

    if it still doesnt work when you put the media queries in your style.css make sure you are not using @import and instead using this in your child themes functions.php

    add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);
    function enqueue_child_theme_styles() {
        wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
        wp_enqueue_style( 'child-style', get_stylesheet_uri(), array('parent-style')  );
    }

    more info here https://codex.wordpress.org/Child_Themes

    and also contact jetpacks plugin support and see if there is a problem or if i made another mistake or something

    .site,
    .site-header {
    	max-width: 100%;
    }
    
    .bbpress-forums .col-2cl .main {
    	background: none repeat-y right 0;
    	padding-right: 0;
    }
    
    .site-content .entry-header,
    .site-content .entry-content,
    .site-content .entry-summary,
    .site-content .entry-meta, 
    .page-content {
    	max-width: 100%;
    }
    
    .form-allowed-tags {
    	display: none;
    }
    
    div.bbp-breadcrumb, 
    div.bbp-topic-tags {
    	font-size: inherit !important;
    }
    
    #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 {
    	font-size: inherit !important;
    }
    
    #bbpress-forums {
    	font-size: inherit !important;
    }
    
    @media screen and (min-width: 1008px) {
            .bbpress .site-content {
    	margin-right: 0 !important;
    	margin-left: 182px !important;
    	}
    }
    
    @media screen and (min-width: 1080px) {
    	.bbpress .site-content {
    		margin-left: 222px;
    	}
    }
    
    @media screen and (min-width: 673px) {
            .bbpress .site-content {
    		margin-right: 0;
    	}
    }

    you can see i removed the width:100% on the #bbpress-forums css code , its because it didnt really do anything.


    Robkk
    Moderator

    @robkk

    this css code i forgot to add , put it before the media queries

    .bbpress .hentry {
        margin: 0px auto 48px;
        max-width: 100%;
    }

    bsilverop
    Participant

    @bsilverop

    Thanks so much again for looking at this. I just got done adding the CSS from your previous comment and it looked good to me (although it always has, it’s only on smaller monitors or screen sizes where it doesn’t I suppose). But then I added the last bit from your most recent comment and the forum page extends too far to the left in to the left sidebar. I’ve left it that way if you want to have a look, but perhaps that last piece is intended only if I want full width (without any sidebars at all)? Thanks again,

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