WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Custom Full-width Template - Sidebar Getting Pushed Down (18 posts)

  1. Michael K.
    Member
    Posted 1 year ago #

    I created a duplicate of the full-width template in Hustle because I wanted to adjust the margins to create a narrower sales page. However, before I could even modify the margins or page width, as soon as I activated my new template, it pushed the sidebar below the footer. If I switch back to the normal full-width template, no sidebar appears. Both are duplicate .php files in every way except for title. Here's the page I'm having troubles with: http://www.resilientmamas.com/sales-page/

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Have you asked the theme developer/vendor about this?

  3. Michael K.
    Member
    Posted 1 year ago #

    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.

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

    http://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.

  5. Michael K.
    Member
    Posted 1 year ago #

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

  6. Michael K.
    Member
    Posted 1 year ago #

    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(); ?>
  7. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

  8. Michael K.
    Member
    Posted 1 year ago #

    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;">

  9. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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?

  10. Michael K.
    Member
    Posted 1 year ago #

    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? :)

  11. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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 :)!

  12. Michael K.
    Member
    Posted 1 year ago #

    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.

  13. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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 :).

  14. Michael K.
    Member
    Posted 1 year ago #

    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?

  15. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

  16. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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;
      }
  17. Michael K.
    Member
    Posted 1 year ago #

    Thanks. I just needed to change #primary to #main and it worked.

  18. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Cool - good work and the site looks very nice too :)!

Topic Closed

This topic has been closed to new replies.

About this Topic