How to Add Layout Box Shadow in Websites that Generated by PHPMaker 9.0.2

Now we are going to add the box shadow in layout of websites that generated by PHPMaker. Please note that the following customization depends on the customization I created in this article: How to Make a Fixed Width Site Using PHPMaker version 9.0.1, so if you want to implement the following customization below, then you have to implement the customization in that article above.

After implementing this customization, then you will see the box shadow at the right and the bottom of the main content box. Your web application will look professional and more beautiful since it has the box shadow. All we have to do is customizing PHPMaker template file, so we can re-use the template for the future projects.

Updated on July 22, 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 5, 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 29, 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.

[hidepost]

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

   /* template layout */
   .ewLayout {
     width: <?php echo (MS_TOTAL_WIDTH); ?>px;
     height: 100%;
   }
   

   then replace it with the following code:

   /* template layout */
   .ewLayout {
     width: <?php echo (MS_TOTAL_WIDTH); ?>px;
     height: 100%;
      -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
     border-radius: 5px
     -moz-box-shadow: 8px 7px 8px #888;
     -webkit-box-shadow: 8px 7px 8px #888;
     box-shadow: 8px 7px 8px #888;
   }
   

2. Finally, re-generate your script files using PHPMaker as always.

[/hidepost]