How to Make a Fixed Width Site Using PHPMaker version 9.0.1

As we know, PHPMaker by default generates your web application site which has the width of it by using an approach a hundred percent of your screen width. If you want to limit the maximum width of your site, for example 1040 pixels, then this modification is definitely for you.

The reason why I prefer the fixed width site rather than the hundred percent width of screen is since I don't want to make the web application which has the header width is less than the maximum width of the main table. You will see this condition whenever you resize the browser's window become smaller. Moreover if you do not use the Scrolling Table extension, than your web application layout will look broken. See what I mean?

So we will customize PHPMaker template file in order to make your web application has the fixed width. In other words, we will not customize the generated website at all. Actually, this customization is similar to the customization I made for PHPMaker version 8. You can see that article from the Related Posts section below. Still remember about it?

However, even they are similar to each other, there are some improvement and adjustment for the naming of constants I use in this article. Actually, this new naming convention starts from this version 9. In addition, you will know which constants that come from PHPMaker itself, and which one do not, so you will be able to distinguish quickly the constants that located in your configuration file.

Updated on May 29, 2012: This customization has been implemented in PHPMaker version 9.0.2, it matches to each other, and as a result, it works properly.

Updated on July 21, 2012: This customization has been implemented in PHPMaker version 9.0.3, it matches to each other, and as a result, it works properly.

Updated on September 4, 2012: This customization has been implemented in PHPMaker version 9.0.4, it matches to each other, and as a result, it works properly.

Updated on November 26, 2012: This customization has been implemented in PHPMaker version 9.1.0, it matches to each other, and as a result, it works properly.

Updated on February 9, 2013: This customization has been implemented in PHPMaker version 9.2.0, it matches to each other, and as a result, it works properly.

Updated on June 17, 2013: This customization below has been handled by using MasinoFixedWidthSite extension. You don’t need to implement the customization below if you use my extensions together with the original PHPMaker Template and Extension files.

[hidepost]

1. Open your /Script/template.php file, and find this code:

   <!--##=SYSTEMFUNCTIONS.FavIcon()##-->
   

   after that line, please insert the following code:

   <?php // Begin of modification  Fixed Width Site, by Masino Sinaga, April 28, 2012 ?>
   <?php if (@$_GET&#91;"export"&#93; == "") { ?> 
   <?php $bordercolor = ""; ?>
   <style>
   html {
     height: auto;
     border-left: 1px solid <?php echo $bordercolor; ?>;
     border-right: 1px solid <?php echo $bordercolor; ?>;
     border-top: 1px solid <?php echo $bordercolor; ?>;
     border-bottom: 1px solid <?php echo $bordercolor; ?>;
     width: <?php echo (MS_TOTAL_WIDTH); ?>px;
     display: block;
     margin-left: auto;
     margin-right: auto;
     margin-top: 10px;
     margin-bottom: 10px;    
   }
   
   body {
     background-color: inherit; /* background color */
     color: inherit; /* text color */
     margin: 0; /* top right bottom left */
     width: <?php echo (MS_TOTAL_WIDTH); ?>px;
     height: auto;
     display: block;
   }
   
   /* template layout */
   .ewLayout {
     width: <?php echo (MS_TOTAL_WIDTH); ?>px;
     height: 100%;
   }
   
   .ewContentTable {
     width: <?php echo (MS_TOTAL_WIDTH); ?>px;
     height: 100%;
     clear: left;
   }
   
   .ewMenuColumn {
     width: <?php echo MS_VERTICAL_MENU_WIDTH; ?>px;
   }
   
   </style>
   <?php } ?>
   <?php // End of modification Fixed Width Site, by Masino Sinaga, April 28, 2012 ?>
   

2. Open your /Script/ewcfg.php file, and find this code:

   // General
   

   before that line, please insert the following code:

   // Begin of modification Fixed Width Site, by Masino Sinaga, April 28, 2012
   define("MS_SCROLL_TABLE_WIDTH", 890, TRUE); // The width size of the scroll table
   define("MS_VERTICAL_MENU_WIDTH", 150, TRUE); // Vertical menu width
   define("MS_TOTAL_WIDTH", MS_SCROLL_TABLE_WIDTH + MS_VERTICAL_MENU_WIDTH + 20, TRUE);
   // End of modification Fixed Width Site, by Masino Sinaga, April 28, 2012 
   

[/hidepost]