WordPress.org

1. SunilDVR
   Member
   Posted 4 years ago #

   Hi all,

   I am using the Mandigo theme, and I'm trying to set up various custom templates for my Pages.

   I've worked from the original Page template, and have tried to strip it to its bare minimum before customizing it the way I want to. The idea is to be able to remove the sidebar, and add lots of random stuff, to certain Pages.

   It all works fine, except for one very frustrating problem:

   When using my custom templates, the entire "content" section is ~10pixels or so to the right of where it is using the Default Template - in Firefox, but not in IE.

   You can see this in action by pointing Firefox at http://www.sunil.org.uk - Home and Blog are using the default templates. From one of these pages, click on "Photos" - you will see the page "jump" to the right and stay there as the customised template loads. Similarly, clicking on "Home" or "Blog" makes it return to normal.

   If you repeat the test in IE7, this does not happen.

   I've tried tracking down the problem by working my way through the original Page.php (and, by extension, Sidebar.php) and adding bits of it to my customised template, until it stopped "breaking".

   The thing which finally made it stop doing this was from Sidebar.php:

   <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar 1')) : ?>

   When the "if" loop was left in my customised template (even when it was empty), the problem no longer occured.

   However, that code also includes the standard "Widgetised" dynamic sidebar - which is amongst the things I do not wish to include on my customised template.

   So:

   1) I have a sneaking suspicion that this is a stylesheet problem - the problem doesn't occur in IE, but does in Firefox, and it's to do with layout.

   2) I have no idea why "including" the default sidebar using the code above stops the problem, but it isn't a "valid" solution in this case (as I don't want it showing up).

   3) I have tried to get my head around the dynamic sidebar widgets, but as I'm already new to WordPress, I'm struggling to understand the interplay between the different elements of it enough to figure out what's causing this behaviour.

   Could anyone explain what's happening, and how to avoid it or work around it?

   Many thanks,

   Sunil

2. SunilDVR
   Member
   Posted 4 years ago #

   UPDATE

   In case anyone has a similar problem in future - this one is much simpler than it looks (always the way)!

   This issue is caused by the fact that Firefox does display vertical scrollbars where the page content is smaller than the viewport.

   In Mandigo, including the sidebar with any real amount of content on it makes the page long enough to require scrollbars.

   In my case, my custom page template was not as long as this, and therefore the scrollbars didn't appear...

   The fact that the content is centred between the edges of the viewport means that when scrollbars appear/disappear, the content shifts by half the width of the scrollbar.

   The simplest fix I have found for this is documented here, and is a simple CSS rule which should scale regardless of the resolution of the site:

   html { height: 100.02%; }

   This forces the page to be very fractionally longer than the viewport, so the scrollbars will appear - but without any "wasted" space as it's only .02% longer than the viewport itself.

   In Mandigo, you can put

   <style type="text/css"> html { height: 100.02%; } </style>

   into Presentation->HTML Inserts for this to work across your site.

   Sunil

3. shaws1777
   Member
   Posted 3 years ago #

   I have been trying to make a custom page template for mandigo theme on certain pages since I do not want the sidebars on certain pages.....do you have the code and instructions for this?

4. t0mmmmmmm
   Member
   Posted 3 years ago #

   shaws1777, see http://wiki.onehertz.com/WordPress/Mandigo/FAQ/How_do_I_make_sidebars_disappear_on_a_particular_page

5. drexnefex
   Member
   Posted 3 years ago #

   for version 1.32, here's code for a Sidebar1 Only Template and a Sidebar2 Only Template:

   <?php
   /*
   Template Name: Sidebar 1 Template
   */
   ?>
   
   <?php
   	global $dirs;
   
   	get_header();
   
   	$tag_posttitle_single = get_option('mandigo_tag_posttitle_single');
   ?>
   	<td id="content" class="narrowcolumn">
   
   	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
   		<div class="post" id="post-<?php the_ID(); ?>">
   		<?php if (!get_option('mandigo_no_animations')): ?>
   			<span class="switch-post">
   				<a href="javascript:toggleSidebars();" class="switch-sidebars"><img src="<?php echo $dirs['www']['icons']; ?>bullet_sidebars_hide.png" alt="" class="png" /></a><a href="javascript:togglePost(<?php the_ID(); ?>);" id="switch-post-<?php the_ID(); ?>"><img src="<?php echo $dirs['www']['icons']; ?>bullet_toggle_minus.png" alt="" class="png" /></a>
   			</span>
   		<?php endif; ?>
   		<<?php echo $tag_posttitle_single; ?> class="posttitle"><?php the_title(); ?></<?php echo $tag_posttitle_single; ?>>
   			<div class="entry">
   				<?php the_content('<p class="serif">'. __('...Read the rest of this page','mandigo') .' &raquo;
   '); ?>
   
   				<?php link_pages('<strong>'. __('Pages','mandigo') .':</strong> ', '
   ', 'number'); ?>
   
   			<div class="clear"></div>
   			</div>
   		</div>
   	<?php edit_post_link('<img src="'. $dirs['www']['scheme'] .'images/edit.gif" alt="" /> '. __('Edit this page','mandigo'), '', '
   '); ?>
   	<?php endwhile; endif; ?>
   
   	</td>
   
   <?php
   
   		if (get_option('mandigo_1024') && get_option('mandigo_3columns')) include (TEMPLATEPATH . '/sidebar2.php');
   
   	get_footer(); 
   
   ?>

   and Sidebar2

   <?php
   /*
   Template Name: Sidebar 2 Template
   */
   ?>
   
   <?php
   	global $dirs;
   
   	get_header();
   
   ?>
   	<td id="content" class="narrowcolumn">
   
   	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
   		<div class="post" id="post-<?php the_ID(); ?>">
   		<?php if (!get_option('mandigo_no_animations')): ?>
   			<span class="switch-post">
   				<a href="javascript:toggleSidebars();" class="switch-sidebars"><img src="<?php echo $dirs['www']['icons']; ?>bullet_sidebars_hide.png" alt="" class="png" /></a><a href="javascript:togglePost(<?php the_ID(); ?>);" id="switch-post-<?php the_ID(); ?>"><img src="<?php echo $dirs['www']['icons']; ?>bullet_toggle_minus.png" alt="" class="png" /></a>
   			</span>
   		<?php endif; ?>
   
   			<div class="entry">
   				<?php the_content('<p class="serif">'. __('...Read the rest of this page','mandigo') .' &raquo;
   '); ?>
   
   				<?php link_pages('<strong>'. __('Pages','mandigo') .':</strong> ', '
   ', 'number'); ?>
   
   			<div class="clear"></div>
   			</div>
   		</div>
   	<?php edit_post_link('<img src="'. $dirs['www']['scheme'] .'images/edit.gif" alt="" /> '. __('Edit this page','mandigo'), '', '
   '); ?>
   	<?php endwhile; endif; ?>
   
   	</td>
   
   <?php
   	if (!get_option('mandigo_nosidebars')) {
   		include (TEMPLATEPATH . '/sidebar.php');
   }
   
   	get_footer();
   ?>

Topic Closed

This topic has been closed to new replies.