How to Add Our New Style into Theme of PHPMaker 9.0.1

The most powerful and flexible of PHPMaker is the ability to add our own new style into the Theme menu section of PHPMaker 9. For example, I recently always create the web application which has the outline border of the Main Area and the Search Panel, then instead of overriding the existing style, I can easily create and add my own new style into the core of Theme and the related files which are being used by PHPMaker to generate the related .css file. In addition, this new style also will appear in the Theme preview of PHPMaker application, so that you are able to define the related color to each Theme you are creating or using it.

Here is the step-by-step tutorial how you can add your own new style into PHPMaker theme easily and quickly, so you are able to use this new template in all of your PHPMaker projects. In this tutorial, I will show you how to add the new style for the border of your Main Area of your web application, Search Panel, and the Pagination Panel. As a result, this customization also will change the look of Theme preview in your PHPMaker application that you can access it from HTML tab.

Please note that this article is related to How to Implement Multiple Themes in the Websites that Generated by PHPMaker 9.0.1. After implementing the customization below, please continue to the article which I gave the link above.

Updated on May 30, 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 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 28, 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]

Download Themes for PHPMaker version >= 9.0.1 and version < 9.1.0 file or Themes for PHPMaker >= 9.1.0, and then extract the content of this file into your C:\Program Files\PHPMaker 9\themes. Actually, all of those files in that zip file contains the modification that we have done in the step four, five, and six below. So, if you have replaced all the files in that themes sub-directory above, then you don't need to do the step number three until four below. The following step below is only to give you the idea about the changes that we have done in those files above.

If you have implemented How to Make a Fixed Width Site Using PHPMaker version 9.0.1 then open your \Script\template.php and find this code:

<?php if (@$_GET&#91;"export"&#93; == "") { ?>

before that line, please insert the following 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";
} else {
  $bordercolor = "#FF6600";
}
?>

Still in that \Script\template.php file, find again this code (avoid this step if you do not find the code):
```
<?php $bordercolor = ""; ?>
```
then remove that code, yes, just remove that code as we don't need it anymore; replaced by the code in the previous step above.

Open your C:\Program Files\PHPMaker 9\themes\theme.xml file, and find this code:

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

after that line, make sure you have already had 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 C:\Program Files\PHPMaker 9\themes\ew.css file, and find this code:

html, body {
	height: 100%;
}

then make sure that code above has been replace with the following code:

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

Still in that C:\Program Files\PHPMaker 9\themes\ew.css file, find again this code:

/*END_SYSTEM_STYLES*/

before that line, please insert the following code (important: just skip this step if the following code below are already exists in that ew.css file):

/* 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;
}

Please note, that code actually derived from user custom style that I created and overrided the existing style. Starting today, we want to add it so that style code will be the part of system style. So, important to do: you have to delete the related code from CSS Editor of PHPMaker that you can access it from: HTML tab -> Styles sub-tab -> Edit styles button.

Warning: Please always backup those files (theme.xml, ew.css, and the others .xml files) in that C:\Program Files\PHPMaker 9\themes sub-directory, just in case if you instal the latest PHPMaker, you will not lose the modification you have done above. Or, if you hesitate what you should do, simply keep that theme.zip file that you have downloaded it from the step number one above. If you upgraded your PHPMaker application to the latest version, then you have to replace all files in C:\Program Files\PHPMaker 9\themes sub-directory. Don't forget also to backup your existing files in that location, just in case you have the problems after replacing it.

[/hidepost]

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