Are you tired of seeing the boring standard submit buttons in your web applications that generated by PHPMaker? Currently, PHPMaker generates submit buttons without adding the certain style so it is still using the standard button style just like we saw in Windows Standard button style. Now, you will never see that boring buttons again! This following modification will customize your submit buttons in websites that generated by PHPMaker. By implementing the customization below, then you will see the hover and pressed effects on the button when users are hovering mouse and clicking on it. Have you ever seen the submit button in the Login Facebook page? Well, this customization will make the look of your submit buttons similar to that.
When user clicks on the submit button or presses Enter key (no matter in which page it is located), then it will automatically be disabled by system (of course, in order to prevent the double submission). If, for example, in a edit or add page, the validation return false value after this button is clicked, then this button will be automatically enabled again (as the proper condition that we want), so that user will be able to click the button again. The most important thing about the disabled status, this customization has included the style for disabled state. You will see that the color and the state of button is truly disabled. You will see the beauty of the disabled button, just like you usually see in a real world.
This customization is every useful if you want to change the style of submit buttons without having to replace all input syntax -- that usually used for button in a html form -- become using button or a href link syntax. Yes, many css button techniques in Internet I had found were using the a href link and button syntax. Most of them are not using or optimizing the existing input type syntax. Moreover, they don't handle about how to create disabled style in the css file! So, this following customization I created will optimize the using of the input type syntax. Also, you don't need much effort to customize the submit buttons as you probably doing until now. Besides that, this will make the look of your web applications become more beautiful and professional for your users.
Actually, only a small customization, yet so powerful. Generally, you simply insert the class="msButton" and the disabling technique codes in your input type which has button type, and then define the related css code. You never thought about the result, including myself. Now, what are you waiting for? Get the best advantage from this customization right now!
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.
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]
-
First of all, make sure you have not opened your PHPMaker project (.pmp) file. Open your C:\Program Files\PHPMaker 9\themes\ew.css file, and find this code:
/*END_SYSTEM_STYLES*/
before that line, please insert the following code:
input.msButton:active { -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); background: #2E5481; border: solid 1px #203E5F; } [disabled] { padding: 3px 14px; background: #DEDEDE; color: #CACACA; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border: solid 1px #CACACA; text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.4); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(255, 255,255, 0.2); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(255, 255, 255, 0.2); -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; } input.msButton:hover { background: #356094; border: solid 1px #2A4E77; text-decoration: none; cursor: pointer; } input.msButton{ padding: 3px 14px; background: #4479BA; color: #FFF; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border: solid 1px #20538D; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }
-
Make sure you have closed your PHPMaker application. Open your C:\Program Files\PHPMaker 9\scr\phpcodebase.xml file, and find this code:
phpcodebase.xml file and not adding the code in the Client Scripts -> Table-Specific -> Add/Copy Page and Edit Page -> Startup Script of all tables, is to simplify the customization. Imagine if you have many tables!
- Open your \Script\add-script.php file, and find this code: [code lang="php"] ->CurrentAction <> "F") { // Confirm page ?> [/code] before the first line of that code, please insert the following code: [code lang="php"] [/code]
- Still in that \Script\add-script.php file, find again this code: [code lang="php"] ->CurrentAction <> "F") { // Confirm page ?> " /> " /> " /> " /> [/code] then replace it with the following code: [code lang="php"] ->CurrentAction <> "F") { // Confirm page ?> " onclick="this.form.a_add.value='F';this.className='msButton:disabled';" /> " onclick="this.form.a_add.value='X';this.className='msButton:disabled'" /> " onclick="this.className='msButton:disabled'" /> " onclick="this.className='msButton:disabled'" /> [/code]
- Open your \Script\changepwd.php file, and find this code: [code lang="php"] " /> [/code] then replace it with the following code: [code lang="php"] " onclick="this.className='msButton:disabled'" /> [/code]
- Still in that \Script\changepwd.php file, find again this code: [code lang="php"]