How to Beautify Your Search Panel in Website Created With PHPMaker 8.0.3

PHPMaker generates your pages that contain search panel using a standard style (not so eye-catching and not so beauty, I think). In addition, that search panel status will always using one condition based on the setting we chose when we generate the script files. If we want to use the default status whether collapsed or expanded, then we have to re-generate the related script files.

So this following modification will change the look of your search panel, so that it will look more eye-catching and more beauty by adding the colored background and the outlines around its box or section. Also, this following modification will give you the flexibility to decide; whether to use collapsed or expanded as the default status. You can simply adjusting the related constant from the configuration (ewcfg*.php) file. In other words, you don't have to re-generate your related script files that contain the search panel each time you want to switch from collapsed to expanded (and vice versa) for that search panel.

All we have to do is customizing PHPMaker template files. In other words, we will not modify the generated script files at all.

Please click on the following image to watch the demo:

[hidepost]

1. Open your ewcfg.php file, and find this code:

   // General
   

   before that line, insert this following code:

   // Begin of modification by Masino Sinaga, for customize search panel, August 27, 2011
   define("EW_SEARCH_PANEL_COLLAPSED", TRUE, TRUE); // Whether to collaps or expand the search panel
   // End of modification by Masino Sinaga, for customize search panel, August 27, 2011
   

2. Open your list-script.php file, and find this code:

   <!--## If PROJ.GetV("SearchPanelCollapsed") Then ##-->
   <script type="text/javascript">
   <!--
   ew_ToggleSearchPanel(<!--##=sPageObj##-->); // Init search panel as collapsed
   //-->
   </script>
   <!--## End If ##-->
   

   then replace it with this following code:

   <!--## If PROJ.GetV("SearchPanelCollapsed") Then ##-->
   
   <?php if (EW_SEARCH_PANEL_COLLAPSED) { ?>
   <script type="text/javascript">
   <!--
   ew_ToggleSearchPanel(<!--##=sPageObj##-->); // Init search panel as collapsed
   //-->
   </script>
   <?php } ?>
   
   <!--## Else ##-->
   
   <?php if (EW_SEARCH_PANEL_COLLAPSED) { ?>
   <script type="text/javascript">
   <!--
   ew_ToggleSearchPanel(<!--##=sPageObj##-->); // Init search panel as collapsed
   //-->
   </script>
   <?php } ?>
   
   <!--## End If ##-->
   

3. Open your list-script-search.php file, and find this code:

   <?php if ($<!--##=gsTblVar##-->->Export == "" && $<!--##=gsTblVar##-->->CurrentAction == "") { ?>
   <a href="javascript:ew_ToggleSearchPanel(<!--##=sPageObj##-->);" style="text-decoration: none;"><img id="<!--##=sPageObj##-->_SearchImage" src="<!--##=sImageFolder##-->collapse.gif" alt="" width="9" height="9" border="0"></a><span class="phpmaker">&nbsp;<!--##@Search##--></span><br />
   <div id="<!--##=sPageObj##-->_SearchPanel">
   <form name="<!--##=sFormNameBasicSearch##-->" id="<!--##=sFormNameBasicSearch##-->" class="ewForm" action="<?php echo ew_CurrentPage() ?>"<!--## If bExtendedBasicSearch Then ##--> onsubmit="return <!--##=sPageObj##-->.ValidateSearch(this);"<!--## End If ##-->>
   <input type="hidden" id="t" name="t" value="<!--##=gsTblVar##-->" />
   

   then replace it with this following code:

   <?php if ($<!--##=gsTblVar##-->->Export == "" && $<!--##=gsTblVar##-->->CurrentAction == "") { ?>
   <a href="javascript:ew_ToggleSearchPanel(<!--##=sPageObj##-->);" style="text-decoration: none;"><img id="<!--##=sPageObj##-->_SearchImage" src="phpimages/collapse.gif" alt="" width="9" height="9" border="0"></a><span class="phpmaker">&nbsp;<!--##@Search##--></span><br>
   <div id="<!--##=sPageObj##-->_SearchPanel">
   <form name="<!--##=sFormNameBasicSearch##-->" id="<!--##=sFormNameBasicSearch##-->" class="searchpanel" action="<?php echo ew_CurrentPage() ?>"<!--## If bExtendedBasicSearch Then ##--> onsubmit="return <!--##=sPageObj##-->.ValidateSearch(this);"<!--## End If ##-->>
   <input type="hidden" id="t" name="t" value="<!--##=gsTblVar##-->" />
   

4. Still in the list-script-search.php file, find again this code:

   	<!--## If bBasicSearch Then ##-->
   <div id="xsr_<!--##=RowCnt+2##-->" class="ewCssTableRow">
   	<label><input type="radio" name="<?php echo EW_TABLE_BASIC_SEARCH_TYPE ?>" id="<?php echo EW_TABLE_BASIC_SEARCH_TYPE ?>" value=""<?php if ($<!--##=gsTblVar##-->->getSessionBasicSearchType() == "") { ?> checked="checked"<?php } ?> /><!--##@ExactPhrase##--></label>&nbsp;&nbsp;<label><input type="radio" name="<?php echo EW_TABLE_BASIC_SEARCH_TYPE ?>" id="<?php echo EW_TABLE_BASIC_SEARCH_TYPE ?>" value="AND"<?php if ($<!--##=gsTblVar##-->->getSessionBasicSearchType() == "AND") { ?> checked="checked"<?php } ?> /><!--##@AllWord##--></label>&nbsp;&nbsp;<label><input type="radio" name="<?php echo EW_TABLE_BASIC_SEARCH_TYPE ?>" id="<?php echo EW_TABLE_BASIC_SEARCH_TYPE ?>" value="OR"<?php if ($<!--##=gsTblVar##-->->getSessionBasicSearchType() == "OR") { ?> checked="checked"<?php } ?> /><!--##@AnyWord##--></label>
   </div>
   	<!--## End If ##-->
   

   then remove all of that code. Yes, again, remove all of that code. Don't worry, we will move some part of that code to another lines!

5. Still in the list-script-search.php file, find this code:

   <div id="xsr_<!--##=RowCnt+1##-->" class="ewCssTableRow">
   	<!--## If bBasicSearch Then ##-->
   

   after the last line of that code, insert this following code:

   	<label><input type="radio" name="<?php echo EW_TABLE_BASIC_SEARCH_TYPE ?>" id="<?php echo EW_TABLE_BASIC_SEARCH_TYPE ?>" value=""<?php if ($<!--##=gsTblVar##-->->getSessionBasicSearchType() == "") { ?> checked="checked"<?php } ?> /><!--##@ExactPhrase##--></label>&nbsp;&nbsp;<label><input type="radio" name="<?php echo EW_TABLE_BASIC_SEARCH_TYPE ?>" id="<?php echo EW_TABLE_BASIC_SEARCH_TYPE ?>" value="AND"<?php if ($<!--##=gsTblVar##-->->getSessionBasicSearchType() == "AND") { ?> checked="checked"<?php } ?> /><!--##@AllWord##--></label>&nbsp;&nbsp;<label><input type="radio" name="<?php echo EW_TABLE_BASIC_SEARCH_TYPE ?>" id="<?php echo EW_TABLE_BASIC_SEARCH_TYPE ?>" value="OR"<?php if ($<!--##=gsTblVar##-->->getSessionBasicSearchType() == "OR") { ?> checked="checked"<?php } ?> /><!--##@AnyWord##--></label>
   

6. Next step, we will add our new style to the .css file that will be generated by PHPMaker. This will beautify your search panel by adding colored background and outlined around its panel. From your PHPMaker application, go to HTML tab, then click on Styles sub-tab, and then click on Edit Styles button. You will see a CSS Editor window afterwards. Scroll down to the bottom of that textbox, and find this code:

   /*END_USER_STYLES*/
   

   before that line, insert this following code:

   .searchpanel { 
     background-color: #EDEDEB;    
     padding: 0.5em;    
     border-left: 1px solid #9F9F9F;    
     border-right: 1px solid #9F9F9F;    
     border-top: 1px solid #9F9F9F;    
     border-bottom: 1px solid #9F9F9F;    
     text-align: left;     
     font-family: tahoma; /* font name */    
     display: block;  
     vertical-align:top;
   }
   

[/hidepost]