How to Synchronize CSS in PHP Report Maker 5.1 in order to Compatible with PHPMaker 9.0.2

If you are generating report pages using PHP Report Maker, then you will find that the cascading style sheet (.css) file that generated by it will be located under your /phprptcss sub-directory of the web applications. In other words, PHP Report Maker will use the separate .css files than PHPMaker uses; which is located under /phpcss sub-directory of the web application.

So we will synchronize the code in .css file that belongs to PHP Report Maker, especially if you have implemented the similar customization I made regarding this. Please note that the following customization is related with the modification I made in these article:
- How to Add Our New Style into Theme of PHPMaker 9.0.1
- How to Implement Multiple Themes in the Websites that Generated by PHPMaker 9.0.1
- How to Make a Fixed Width Site Using PHPMaker version 9.0.1

[hidepost]

Open your C:\Program Files\PHP Report Maker 5\theme\ew.css file, and find this code:

html {
	height: 100%;
}

then replace it with the following code:

html {
	height: auto;
	display: block;
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}

Still in that C:\Program Files\PHP Report Maker 5\themes\ew.css file, find again this code:

/*END_SYSTEM_STYLES*/

before that line, please insert the following code:

/* announcement */
.msAnnouncement {
    font-family: Tahoma; /* font name */
    font-size: 8pt; /* font size */    
    background-color: #98FB98;
    background: #98FB98 url(../phpimages/info.gif) 5px 5px no-repeat;
    padding: 0.5em;
    padding-left: 25px;
    border-left: 1px solid #98FB98;
    border-right: 1px solid #98FB98;
    border-top: 1px solid #98FB98;
    border-bottom: 1px solid #98FB98;
    display: block;  
}
/* announcement */


/* maintenance */
.msMaintenance {
    font-family: Tahoma; /* font name */
    font-size: 8pt; /* font size */    
    background-color: #FFCCCC;
    background: #FFCCCC url(../phpimages/info.gif) 5px 5px no-repeat;
    padding: 0.5em;
    padding-left: 25px;
    border-left: 1px solid #FFCCCC;
    border-right: 1px solid #FFCCCC;
    border-top: 1px solid #FFCCCC;
    border-bottom: 1px solid #FFCCCC;
    display: block;
}
/* maintenance */

/* Begin of modification Customize Page Title Style, by Masino Sinaga, May 1, 2012 */
.ewTitle{
    background-color: <!--##=ew_CssInherit(PROJ.GetV("ThemePageTitleBackColor"))##-->; /* background color */  
    border-left: 1px solid <!--##=ew_CssInherit(PROJ.GetV("ThemePageTitleBorderColor"))##-->; /* border color */
    border-right: 1px solid <!--##=ew_CssInherit(PROJ.GetV("ThemePageTitleBorderColor"))##-->; /* border color */
    border-top: 1px solid <!--##=ew_CssInherit(PROJ.GetV("ThemePageTitleBorderColor"))##-->; /* border color */
    border-bottom: 1px solid <!--##=ew_CssInherit(PROJ.GetV("ThemePageTitleBorderColor"))##-->; /* border color */
    padding: 0.5em;
    text-align: left;
    font-family: <!--##=ew_CssInherit(PROJ.GetV("ThemePageTitleFontName"))##-->; /* font name */
    font-size: <!--##=ew_CssInherit(PROJ.GetV("ThemePageTitleFontSize"))##-->pt; /* font size in pt */
    color: <!--##=ew_CssInherit(PROJ.GetV("ThemePageTitleFontColor"))##-->; /* font color */   
    font-weight: bold;
    display: block;
    vertical-align:top;
}
/* End of modification Customize Page Title Style, by Masino Sinaga, May 1, 2012 */

/* Begin of modification Customizing Search Panel, by Masino Sinaga, for customize search panel, May 1, 2012 */
.msSearchPanel {
    background-color: <!--##=ew_CssInherit(PROJ.GetV("ThemeSearchPanelBackColor"))##-->; /* background color */    
    border-left: 1px solid <!--##=ew_CssInherit(PROJ.GetV("ThemeSearchPanelBorderColor"))##-->; /* border color */
    border-right: 1px solid <!--##=ew_CssInherit(PROJ.GetV("ThemeSearchPanelBorderColor"))##-->; /* border color */
    border-top: 1px solid <!--##=ew_CssInherit(PROJ.GetV("ThemeSearchPanelBorderColor"))##-->; /* border color */
    border-bottom: 1px solid <!--##=ew_CssInherit(PROJ.GetV("ThemeSearchPanelBorderColor"))##-->; /* border color */
    padding: 0.5em;
    text-align: left;
    font-family: <!--##=ew_CssInherit(PROJ.GetV("ThemeSearchPanelFontName"))##-->; /* font name */
    font-size: <!--##=ew_CssInherit(PROJ.GetV("ThemeSearchPanelFontSize"))##-->pt; /* font size in pt */
    color: <!--##=ew_CssInherit(PROJ.GetV("ThemeSearchPanelFontColor"))##-->; /* font color */
    display: block;
    vertical-align:top;
}
/* End of modification Customizing Search Panel, by Masino Sinaga, for customize search panel, May 1, 2012 */

 /* Begin of modification Customize Navigation/Pager Panel, by Masino Sinaga, May 2, 2012 */
.msPagination {
    background-color: <!--##=ew_CssInherit(PROJ.GetV("ThemePaginationPanelBackColor"))##-->; /* background color */
    border-left: 1px solid <!--##=ew_CssInherit(PROJ.GetV("ThemePaginationPanelBorderColor"))##-->; /* border color */
    border-right: 1px solid <!--##=ew_CssInherit(PROJ.GetV("ThemePaginationPanelBorderColor"))##-->; /* border color */
    border-top: 1px solid <!--##=ew_CssInherit(PROJ.GetV("ThemePaginationPanelBorderColor"))##-->; /* border color */
    border-bottom: 1px solid <!--##=ew_CssInherit(PROJ.GetV("ThemePaginationPanelBorderColor"))##-->; /* border color */
    padding: 0.5em;
    text-align: left;
    font-family: <!--##=ew_CssInherit(PROJ.GetV("ThemePaginationPanelFontName"))##-->; /* font name */
    font-size: <!--##=ew_CssInherit(PROJ.GetV("ThemePaginationPanelFontSize"))##-->pt; /* font size in pt */
    color: <!--##=ew_CssInherit(PROJ.GetV("ThemePaginationPanelFontColor"))##-->; /* font color */
    display: block;    
    vertical-align:top;
}
/* End of modification Customize Navigation/Pager Panel, by Masino Sinaga, May 2, 2012 */

#breadcrumb
{
    font: 8pt Tahoma, Helvetica, sans-serif;
    background-image:url(../phpimages/bc_bg.png);
    background-repeat:repeat-x;
    height:22px;
    line-height:22px;
    color:#9b9b9b;
    /* border:solid 1px #cacaca; */
    border-left: 1px solid #cacaca;
    border-right: 1px solid #cacaca;
    border-top: 1px solid #cacaca;
    /* border-bottom: 1px solid #9F9F9F; */
    overflow:hidden;
    margin:0px;
    padding:0px;
}
#breadcrumb li
{
    list-style-type:none;
    float:left;
    padding-left:1px;
}
#breadcrumb a
{
    height:22px;
    display:block;
    background-image:url(../phpimages/bc_separator.png);
    background-repeat:no-repeat;
    background-position:right;
    padding-right: 10px;
    text-decoration: none;
    color:#454545;
}
.home
{
    border:none;
    margin: 3px 0px;
}

#breadcrumb a:hover
{
    color:#35acc5;
}

Open your C:\Program Files\PHP Report Maker 5\theme\theme.xml file, and find this code:

	<!-- Note: id name must be unique and must start with "Theme". -->

after that line, please insert the following code:

  <category name="Site Body Line">
    <style name="Background color" id="ThemeSiteBackColor" type="Color" />
    <style name="Border color" id="ThemeSiteBorderColor" type="Color" />
  </category>
  <category name="Site Search Panel">
    <style name="Background color" id="ThemeSearchPanelBackColor" type="Color" />
    <style name="Border color" id="ThemeSearchPanelBorderColor" type="Color" />
    <style name="Font color" id="ThemeSearchPanelFontColor" type="Color" />
    <style name="Font name" id="ThemeSearchPanelFontName" type="Font" />
    <style name="Font size (pt)" id="ThemeSearchPanelFontSize" type="Integer" min="8" max="15" default="2" />  
  </category>
  <category name="Site Pagination Panel">
    <style name="Background color" id="ThemePaginationPanelBackColor" type="Color" />
    <style name="Border color" id="ThemePaginationPanelBorderColor" type="Color" />
    <style name="Font color" id="ThemePaginationPanelFontColor" type="Color" />
    <style name="Font name" id="ThemePaginationPanelFontName" type="Font" />
    <style name="Font size (pt)" id="ThemePaginationPanelFontSize" type="Integer" min="8" max="15" default="2" />  
  </category>
  <category name="Page Title">
    <style name="Background color" id="ThemePageTitleBackColor" type="Color" />
    <style name="Border color" id="ThemePageTitleBorderColor" type="Color" />
    <style name="Font color" id="ThemePageTitleFontColor" type="Color" />
    <style name="Font name" id="ThemePageTitleFontName" type="Font" />
    <style name="Font size (pt)" id="ThemePageTitleFontSize" type="Integer" min="8" max="15" default="2" />
  </category>

Open your \Script\rpt-template.php file, and find this code:
```
<link rel="stylesheet" type="text/css" href="<?php echo EWRPT_PROJECT_STYLESHEET_FILENAME ?>" />
```
then remove that code. Yes, just remove that code. We will use this code from the PHPMaker side. In other words, we will modify the \Script\template.php file in PHPMaker template side.
Open your \Script\template.php file, and find this code:
```
<link rel="stylesheet" type="text/css" href="<?php echo EW_PROJECT_STYLESHEET_FILENAME ?>" />
```
then replace it with the following code:
```
<?php global $page_type;
if ($page_type=='REPORT') { ?>
<link rel="stylesheet" type="text/css" href="<?php echo EWRPT_PROJECT_STYLESHEET_FILENAME ?>">
<?php } else { ?>
<link rel="stylesheet" type="text/css" href="<?php echo EW_PROJECT_STYLESHEET_FILENAME ?>">
<?php } ?>
```
this code will detect which page is currently opened when user visit the certain page. If the type of the page is "REPORT", then the custom style sheet that belongs to report page will be loaded, otherwise the custom style sheet that belongs to the page other than report will be loaded.

Still in that \Script\template.php file, and find this code:

<?php
if ( (@EW_PROJECT_STYLESHEET_FILENAME=="phpcss/theme-black.css") ||  
    (@EW_PROJECT_STYLESHEET_FILENAME=="phpcss/theme-white.css") ) {
    $bordercolor = "#9F9F9F";
} elseif (@EW_PROJECT_STYLESHEET_FILENAME=="phpcss/theme-blue.css") {
    $bordercolor = "#2647A0"; // OK
} elseif (@EW_PROJECT_STYLESHEET_FILENAME=="phpcss/theme-dark.css") {
  $bordercolor = "#000084";
} elseif (@EW_PROJECT_STYLESHEET_FILENAME=="phpcss/theme-darkglass.css") {
    $bordercolor = "#4E4F51";
} elseif (@EW_PROJECT_STYLESHEET_FILENAME=="phpcss/theme-glass.css") {
  $bordercolor = "#10A3BC";
} elseif (@EW_PROJECT_STYLESHEET_FILENAME=="phpcss/theme-gray.css") {
  $bordercolor = "#708090";
} elseif (@EW_PROJECT_STYLESHEET_FILENAME=="phpcss/theme-green.css") {
  $bordercolor = "#3A7A25";
} elseif (@EW_PROJECT_STYLESHEET_FILENAME=="phpcss/theme-maroon.css") {
  $bordercolor = "#620000";
} elseif (@EW_PROJECT_STYLESHEET_FILENAME=="phpcss/theme-olive.css") {
  $bordercolor = "#718961";
} elseif (@EW_PROJECT_STYLESHEET_FILENAME=="phpcss/theme-professional.css") {
  $bordercolor = "#40546A";
} elseif (@EW_PROJECT_STYLESHEET_FILENAME=="phpcss/theme-purple.css") {
  $bordercolor = "#3E3276";
} elseif (@EW_PROJECT_STYLESHEET_FILENAME=="phpcss/theme-red.css") {
  $bordercolor = "#B1174D";
} elseif (@EW_PROJECT_STYLESHEET_FILENAME=="phpcss/theme-sand.css") {
  $bordercolor = "#755233";
} elseif (@EW_PROJECT_STYLESHEET_FILENAME=="phpcss/theme-silver.css") {
  $bordercolor = "#9C9AB7";
} elseif (@EW_PROJECT_STYLESHEET_FILENAME=="phpcss/theme-white.css") {
  $bordercolor = "#DCDCDC";
} elseif (@EW_PROJECT_STYLESHEET_FILENAME=="phpcss/theme-default.css") {
  $bordercolor = "#FF6600";
}
?>

then replace it with the following code:

<?php 
if ( (@EW_PROJECT_STYLESHEET_FILENAME=="phpcss/theme-black.css") || (@EW_PROJECT_STYLESHEET_FILENAME=="phpcss/theme-white.css") ||
    (@EWRPT_PROJECT_STYLESHEET_FILENAME=="phprptcss/theme-black.css") || (@EWRPT_PROJECT_STYLESHEET_FILENAME=="phprptcss/theme-white.css")	) {
	$bordercolor = "#9F9F9F";
} elseif (@EW_PROJECT_STYLESHEET_FILENAME=="phpcss/theme-blue.css" || @EWRPT_PROJECT_STYLESHEET_FILENAME=="phprptcss/theme-blue.css") {
	$bordercolor = "#2647A0"; // OK
} elseif (@EW_PROJECT_STYLESHEET_FILENAME=="phpcss/theme-dark.css" || @EWRPT_PROJECT_STYLESHEET_FILENAME=="phprptcss/theme-dark.css") {
  $bordercolor = "#000084";
} elseif (@EW_PROJECT_STYLESHEET_FILENAME=="phpcss/theme-darkglass.css" || @EWRPT_PROJECT_STYLESHEET_FILENAME=="phprptcss/theme-darkglass.css") {
	$bordercolor = "#4E4F51";
} elseif (@EW_PROJECT_STYLESHEET_FILENAME=="phpcss/theme-glass.css" || @EWRPT_PROJECT_STYLESHEET_FILENAME=="phprptcss/theme-glass.css") {
  $bordercolor = "#10A3BC";
} elseif (@EW_PROJECT_STYLESHEET_FILENAME=="phpcss/theme-gray.css" || @EWRPT_PROJECT_STYLESHEET_FILENAME=="phprptcss/theme-gray.css") {
  $bordercolor = "#708090";
} elseif (@EW_PROJECT_STYLESHEET_FILENAME=="phpcss/theme-green.css" || @EWRPT_PROJECT_STYLESHEET_FILENAME=="phprptcss/theme-green.css") {
  $bordercolor = "#3A7A25";
} elseif (@EW_PROJECT_STYLESHEET_FILENAME=="phpcss/theme-maroon.css" || @EWRPT_PROJECT_STYLESHEET_FILENAME=="phprptcss/theme-maroon.css") {
  $bordercolor = "#620000";
} elseif (@EW_PROJECT_STYLESHEET_FILENAME=="phpcss/theme-olive.css" || @EWRPT_PROJECT_STYLESHEET_FILENAME=="phprptcss/theme-olive.css") {
  $bordercolor = "#718961";
} elseif (@EW_PROJECT_STYLESHEET_FILENAME=="phpcss/theme-professional.css" || @EWRPT_PROJECT_STYLESHEET_FILENAME=="phprptcss/theme-professional.css") {
  $bordercolor = "#40546A";
} elseif (@EW_PROJECT_STYLESHEET_FILENAME=="phpcss/theme-purple.css" || @EWRPT_PROJECT_STYLESHEET_FILENAME=="phprptcss/theme-purple.css") {
  $bordercolor = "#3E3276";
} elseif (@EW_PROJECT_STYLESHEET_FILENAME=="phpcss/theme-red.css" || @EWRPT_PROJECT_STYLESHEET_FILENAME=="phprptcss/theme-red.css") {
  $bordercolor = "#B1174D";
} elseif (@EW_PROJECT_STYLESHEET_FILENAME=="phpcss/theme-sand.css" || @EWRPT_PROJECT_STYLESHEET_FILENAME=="phprptcss/theme-sand.css") {
  $bordercolor = "#755233";
} elseif (@EW_PROJECT_STYLESHEET_FILENAME=="phpcss/theme-silver.css" || @EWRPT_PROJECT_STYLESHEET_FILENAME=="phprptcss/theme-silver.css") {
  $bordercolor = "#9C9AB7";
} elseif (@EW_PROJECT_STYLESHEET_FILENAME=="phpcss/theme-white.css" || @EWRPT_PROJECT_STYLESHEET_FILENAME=="phprptcss/theme-white.css") {
  $bordercolor = "#DCDCDC";
} elseif (@EW_PROJECT_STYLESHEET_FILENAME=="phpcss/theme-default.css" || @EWRPT_PROJECT_STYLESHEET_FILENAME=="phprptcss/theme-default.css") {
  $bordercolor = "#FF6600";
} else { // default border color is below, same with in theme-default
  $bordercolor = "#FF6600";
}
?>

Open your PHP Maker project (.pmp) file using PHPMaker application, then go to Server Events -> Global -> All Pages -> Page Loading function", and then insert this following code in the beginning of the function:
```
  global $page_type;
  $page_type = 'TABLE';
```
Open your PHP Report Maker project (.prp) file, then go to Server Events -> Global -> All Pages -> Page Loading function, and then insert this following code in the beginning of the function:
```
  global $page_type;
  $page_type = 'REPORT';
```
Download this themes-cssreport.zip file, and then extract it to your \Script\phprptcss sub-directory of your PHP Report Maker template.
Download this themes-phpreportmaker.zip file, and then extract it to your C:\Program Files\PHP Report Maker 5\themes sub-directory of your PHP Report Maker installation (Warning: It is strongly recommended to backup your existing files before doing this step!). This file includes the customization in .css files that belongs to PHP Report Maker installation.
Re-generate all of your script files using PHPMaker and PHP Report Maker.

[/hidepost]

How to Synchronize CSS in PHP Report Maker 5.1 in order to Compatible with PHPMaker 9.0.2

Demo Website

Another Demo

Demo Explanation

Categories

Articles based on version

Leave a Reply Cancel reply

Demo Website

Another Demo

Demo Explanation

Categories

Articles based on version