• One of my websites that uses the Continuum theme I have the option when creating a page to choose to use the Full Width option under Template in the Page Attributes section. On another WordPress site I have that is not an option. It worked really well as I installed Mingle forums on the first site and was able to use the whole page to display the forum. I would like to be able to do this on the other website for just one page with the forum on it. How is this possible? Thanks!

Viewing 8 replies - 1 through 8 (of 8 total)
  • Hmm, looks like you’ll need to change the CSS. Do you have a link to the site without the full width? I might be able to point you in the right direction if I can visually see the problem.

    Thread Starter n3rdgazmcom

    (@n3rdgazmcom)

    http://thedrunkkoala.com/

    This would be the site. I will turn on the forums that I have disabled at the moment so you can see how it slims and tightens the whole scheme. I wouldn’t want it to be that way on the whole site…just for the forums. Thanks for your super fast response.

    Oh ok I see – you have the sidebar on the right which is taking up the space. Two things you can do:

    Here’s the quick-n-dirty way of doing it. If you’re not comfy doing this, let me know.

    1. Go into the admin
    2. Appearance > Editor
    3. Make sure you have “style.css” selected.
    4. Make a backup of this file onto your harddrive somewhere (copy/paste)
    5. At the VERY bottom add the following:

    .right { display: none; }
    .left, .page { width: 100%; }

    That will get things going for you. If you did this right now, it would work but affect the whole site. So in order to specifically target the forums, you’ll need to target it via PHP. Hard for me to say exactly where, but you’ll need to open up page.php and look for the line that says
    <div id="container" ... >
    and change it to:

    <div id="container" class="<?php blog_class(); ?>" ...>

    Now remember those two lines we added to the css file? Change them to this:

    page-id-### .right { display: none; }
    page-id-### .left, page-id-### .page { width: 100%; }

    where ### is the ID of the forums page.

    Backup before you do anything. You’re only messing with 2 files, so it’s easy to revert if it does break.

    Let me know what happens!

    Thread Starter n3rdgazmcom

    (@n3rdgazmcom)

    Here’s how it looks right now

    <?php get_header(); ?>
    <!--page.php-->
    
    	<div id="container" class="rounded-10">
    
    	<div class="left rounded-8">
    	<!--loop-->

    Once I enter in
    <div id="container" class="<?php blog_class(); ?>" ...>

    I see that the border encompasses the whole width of the page..but is collapsed on itself and hides the forums.

    a ‘clean’ way would be to make a page template, starting with a copy of page.php; http://codex.wordpress.org/Pages#Page_Templates

    – add the necessary code at the top; http://codex.wordpress.org/Pages#Creating_Your_Own_Page_Templates

    – remove the call of the sidebar; http://codex.wordpress.org/Function_Reference/get_sidebar

    – add a specific css class to the #container div; i.e. edit the line <div id="container" class="rounded-10"> and change it for example to: <div id="container" class="fullwidth rounded-10">

    – add new styles to style.css; example:

    #container.fullwidth .left { width: 1080px; }
    #container.fullwidth .left .page { width:1048px; }

    assign the new page template to the forum page.

    Thread Starter n3rdgazmcom

    (@n3rdgazmcom)

    Ok, I think I got close. I will copy/paste what I created. It showed up as a page under a template to be chosen. Right now when I click on the forum page it still shows the forum in it’s shortened width size but it did remove the sidebar. Any ideas on what i need to change?

    <?php
    /*
    Template Name: Forum
    */
    ?>
    <?php get_header(); ?>
    	<div id="container" class="fullwidth rounded-10">
    
    	<div class="left rounded-8">
    	<!--loop-->
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    
    	<div class="page pic rounded-8">
    
            <!--post title-->
    		<h2 id="post-<?php the_ID(); ?>"><?php the_title(); ?></h2>
            <!--post with more link -->
    		<?php the_content('<p class="serif">Read the rest of this page &raquo;</p>'); ?>
            <!--if you paginate pages-->
    		<?php //link_pages('<p><strong>Pages:</strong> ', '</p>', 'number'); ?>
    
    	<!--end of post and end of loop-->
    	<?php endwhile; endif; ?>
    
        <!--edit link-->
    	<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>
    	</div>
    </div>
    
    <!--page.php end-->
    <div class="left title rounded-8">
    <h1>
    
    <!-- category-title -->
    <?php global $post; $category = get_the_category($post->ID);  $category[0]->name; ?>
    
    <?php
    $categories = get_the_category(); //get all categories for this post
     $currentcat= $categories[0]->cat_ID;
    ?>
    </h1>
    
    <?php if($currentcat == 17 ){?>
    <h2>Most Popular Videos</h2>
    					<div class="popular">
    					<?php
    					$pc = new WP_Query('orderby=comment_count&cat=17&posts_per_page=10'); ?>
    
    					<?php while ($pc->have_posts()) : $pc->the_post(); ?>
    					<div class="popularposts">
    					<?php $feat_image=get_the_post_thumbnail(get_the_ID(),array(207,45));
    					 if($feat_image==null)
    					{
    						//$feat_image = catch_that_image(the_content());
    					} ?>
    
    					<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php echo $feat_image; ?>
    					<h2><?php the_title(); ?></h2></a><br/>
    					<?php echo '<span class="postext"><span class="views-icon"></span>'.getPostViews(get_the_ID()).'<span class="comments-icon"></span>'. get_comments_number(get_the_ID()).'</span>';?>
    																<!-- Code for Rating Starts-->
    <div class="ratingDiv1">
    <?php if(function_exists('the_ratings')) { the_ratings(); } ?>
    </div>
    <!-- Code for Rating Ends-->
    					</div>
    					<?php endwhile; ?>
    					</div>
    					<?php }else{ ?>
    
    					      <h2>Most Popular Pictures</h2>
    					<div class="popular">
    					<?php
    					$pc = new WP_Query('orderby=comment_count&cat=5&posts_per_page=10'); ?>
    
    					<?php while ($pc->have_posts()) : $pc->the_post(); ?>
    					<div class="popularposts">
    					<?php $feat_image=get_the_post_thumbnail(get_the_ID(),array(207,45));
    					 if($feat_image==null)
    					{	?>
    						<a href="<?php echo get_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>">
    					<img src="<?php echo catch_that_image($post->post_content) ?>" /> </a>
    					<?php
    					} ?>
    
    					<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php echo $feat_image; ?>
    					<h2><?php the_title(); ?></h2></a><br/>
    					<?php echo '<span class="postext"><span class="views-icon"></span>'.getPostViews(get_the_ID()).'<span class="comments-icon"></span>'.get_comments_number(get_the_ID()).'</span>';?>
    																<!-- Code for Rating Starts-->
    <div class="ratingDiv1">
    <?php if(function_exists('the_ratings')) { the_ratings(); } ?>
    </div>
    <!-- Code for Rating Ends-->
    					</div>
    					<?php endwhile; ?>
    					</div>
    					<?php } ?>
    
    		<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Bottom 1') ) : else : ?>
    		<?php endif; ?>
    
    		<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Bottom 2') ) : else : ?>
    		<?php endif; ?>
    	</div>
    
    	<div class="clear"></div>
    
    </div>
    <div id="container" class="<?php blog_class(); ?>" ...>
    
    <!-- END -->
    <!--include footer-->
    <?php get_footer(); ?>

    it looks ok; the forum is full width.

    possibly clear the browser cache, i.e. ‘reload’ the page a few times, or try to press ‘CTRL F5’ or check your browser’s instructions…

    Thread Starter n3rdgazmcom

    (@n3rdgazmcom)

    it looks ok; the forum is full width.

    possibly clear the browser cache, i.e. ‘reload’ the page a few times, or try to press ‘CTRL F5’ or check your browser’s instructions…

    Awesome. Thank you so much for helping me out. I really do appreciate it!

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Page Attributes Full Width’ is closed to new replies.