Custom Full-width Template – Sidebar Getting Pushed Down

Have you asked the theme developer/vendor about this?

They don’t offer direct support for customizing themes, and their user forum is’t very active. I was hoping it was just a general coding issue someone could resolve here. The only difference between the two templates are the file names and the name at the top of each template. I was wondering if that was causing a conflict because I wasn’t calling the right php file or something.

I can’t see anything on the page you linked to (members only) so that makes it hard to say much :).

Sidebar issues are often due to unclosed or extra div tags – so validating the HTML is a good place to start.

https://validator.w3.org/

Also, using a browser tool such as Firebug can be helpful in looking for errors and looking at the CSS – which can cause this kind of problem.

Thanks, WPyogi. I’ll check out the validator. The page should be publicly viewable now.

Nothing showed up in the validator. Any chance you could look at the template code and see anything wrong?

<?php
if ( ! defined( 'ABSPATH' ) ) exit;
/**
 * Template Name: Sales
 *
 * This template is a full-width version of the page.php template file. It removes the sidebar area.
 *
 * @package WooFramework
 * @subpackage Template
 */
	get_header();
	global $woo_options;
?>

	<div id="content" class="page col-full">

    	<?php woo_main_before(); ?>

		<section id="main" class="fullwidth">

        <?php
        	if ( have_posts() ) { $count = 0;
        		while ( have_posts() ) { the_post(); $count++;
        ?>
                <article <?php post_class(); ?>>

					<header>
						<h1><?php the_title(); ?></h1>
					</header>

                    <section class="entry">
	                	<?php the_content(); ?>
	               	</section><!-- /.entry -->

					<?php edit_post_link( __( '{ Edit }', 'woothemes' ), '<span class="small">', '</span>' ); ?>

                </article><!-- /.post -->

			<?php
					} // End WHILE Loop
				} else {
			?>
				<article <?php post_class(); ?>>
                	<p><?php _e( 'Sorry, no posts matched your criteria.', 'woothemes' ); ?></p>
                </article><!-- /.post -->
            <?php } ?>  

		</section><!-- /#main -->

		<?php woo_main_after(); ?>

    </div><!-- /#content -->

<?php get_footer(); ?>

When you make a new template, you generally need to add (or fix existing) CSS so that it applies to that template so try adding this to your CSS:

body.page-template-template-sales-php #main {
  width: 65%;
  float: left;
  }

You may need to make further spacing adjustments to that.

Does that go in the custom.css? I just added this bit of code to the template which sizes the margins correctly, but still displays the sidebar (which I don’t want anyway) below the footer.

<div id="primary" class="page" style="width:600px; margin-left: 250px;">

Yes, the CSS would go in custom CSS. I would not recommend adding inline CSS to any template file – it’s really not ideal to do it that way. Are you trying to do something other than the above? Maybe I misunderstood – are you trying to remove the sidebar completely on that page?

I’m trying to remove the sidebar completely, center the text, and increase the margins. Aside from the sidebar still appearing, if you look at the page now, it’s aligned the way I want it after I added the above code to the custom template. Can you tell I’m pretty much fumbling around in the dark here? ??

LOL – that makes two of us fumbling – as I thought you just wanted the sidebar on the side of the page – so my bad! Let me look at that again from the top :)!

I want NO sidebar and the margins larger. I didn’t want to adjust the main full width template because I wanted to create a specific page template just for this one specific need.

Try removing this from the template:

<?php woo_main_after(); ?>

I THINK that’s generating the sidebar – but this is why we really don’t support commercial themes here – as we don’t know how they are put together :).

Yes! That did it! Do you still think the best way for me to center the text is by setting the width and left margin, or is there a better way to center it?

If it’s fixed width, you should be able to use margin: 0 auto;
auto on the side margins centers elements so long as the element is less wide than the containing element.

I’d still suggest always avoiding the use of inline CSS. You can target the CSS to that template/page by using the template specific class in the CSS – try:

body.page-template-template-sales-php #primary {
  width: 600px;
  margin: 0 auto;
  }