Moving the Sidebar Menu to the Left Side 
Wednesday, August 15, 2007, 03:36 PM
Posted by Administrator
Did you know that users are more likely to click on advertisements on the left side of the page? Our brains are used to reading from left to right, so we naturally look towards the left side of a page without thinking.

So, my objective today was to move the Sidebar menu from the right side of the page to the left side. Conveniently, in the themes/modern/themes.php file, there is a line:

$theme_vars[ 'menu_align' ] = 'left'; // Valid values are 'left' or 'right'

It looks like it should be a simple affair to move the menu, right? All I have to do is change the 'left' to a 'right' and I'll be in business. So, that's exactly what I do. I modify the variable, refresh the page, and...

nothing.

I check out the Simple PHP Blog forums and in all the threads and posts I see, it appears my method should be correct even though it is not working. What's the problem?

It turns out that the newest version of the Simple PHP Blog software that I am using, 0.5.0.1, doesn't appear to have the code to easily handle a right/left switch (at least for the modern theme). I had to add a bit of code to get it to work.

In the themes/modern/themes.php file, I replaced the following code:

    // Begin Page Layout HTML
    ?>
    <body>
      <div id="page">
        <div id="header"><img src="<?php echo( $img_path ); ?>header750x100.jpg" alt="" border="0" /></div>
        <?php if ( $blog_config['blog_enable_title'] ) { echo('<div id="title">' . $blog_config[ 'blog_title' ] . '</div>'); } ?>
        <div id="innerpage">
          <div id="content">
            <?php page_content(); ?>
          </div>
          <div id="sidebar">
            <?php theme_menu(); ?>
          </div>
        </div>
        <div id="footer">
          <?php echo($blog_config[ 'blog_footer' ]); ?> - <?php echo( page_generated_in() ); ?>
        </div>
      </div>
    </body>
    <?php
    // End Page Layout HTML
}

with the following code:
    // Begin Page Layout HTML
    ?>
    <body>
      <div id="page">
        <div id="header"><img src="<?php echo( $img_path ); ?>header750x100.jpg" alt="" border="0" /></div>
        <?php if ( $blog_config['blog_enable_title'] ) { echo('<div id="title">' . $blog_config[ 'blog_title' ] . '</div>'); } ?>
        <div id="innerpage">

	<?php if ( $theme_vars[ 'menu_align' ] == 'right' ) { ?>
          <div id="content">
	    <td width="<?php echo( $theme_vars[ 'content_width' ] ); ?>" >
              <?php page_content(); ?>
    	    </td>
          </div>
          <div id="sidebar">
	    <td width="<?php echo( $theme_vars[ 'menu_width' ] ); ?>" >
              <?php theme_menu(); ?>
            </td>
          </div>
	<?php } ?>

	<?php if ( $theme_vars[ 'menu_align' ] == 'left' ) { ?>
          <div id="sidebar">
	    <td width="<?php echo( $theme_vars[ 'menu_width' ] ); ?>" >
	      <?php theme_menu(); ?>
    	    </td>
          </div>
          <div id="content">
	    <td width="<?php echo( $theme_vars[ 'content_width' ] ); ?>" >
              <?php page_content(); ?>
            </td>
          </div>
	<?php } ?>

        </div>
        <div id="footer">
          <?php echo($blog_config[ 'blog_footer' ]); ?> - <?php echo( page_generated_in() ); ?>
        </div>
      </div>
    </body>
    <?php
    // End Page Layout HTML
  }

and now the Sidebar menu moves to the left! Now I can switch the location of the menu with ease, by modifying the $theme_vars[ 'menu_align' ] variable.
3 comments ( 508 views )   |  0 trackbacks   |  permalink   |   ( 3 / 28 )

<<First <Back | 1 | 2 | 3 | 4 | 5 | Next> Last>>