I Love PHPMaker

... because it gets even more powerful and flexible!!

  • About
  • Terms and Conditions
  • Membership Options
  • Sitemap
  • Downloads
    • PHPMaker Extensions Download
    • PHPMaker Projects Download
    • PHP Report Maker Extensions Download
I Love PHPMaker » PHPMaker Extensions » Implementing CSS Sprites in Web Applications that Generated by PHPMaker 9.2.0
Moving “About Us” Link from Footer to Menu in Websites that Generated by PHPMaker 9.2.0
The Custom Language Phrases in Masino Extensions 9.2.0 Now Has Been Separated into the Language Files

September 6, 2013

Implementing CSS Sprites in Web Applications that Generated by PHPMaker 9.2.0

As we have already known, CSS Sprites has the ability to reduce the HTTP requests and the bandiwdth usage of your web applications. You are strongly recommended to implement it for your web applications, moreover if you are using some icons or small picture. Instead of downloading all the pictures several time from the web server, then that would be better if we combine all the icons into one picture and simply download it once or two (perhaps the other picture such as logo or the animation picture) from the web server. Unfortunately, PHPMaker has not implemented CSS Sprites, yet. Even until version 10! So I pleased to announce you that I have successfully added this ability for the web applications that generated by PHPMaker 9.2.0 by customizing some of my extensions that I created a few months ago. Honestly, I have been waiting so long to implement CSS Sprites to empower PHPMaker. And now, it really came true! 🙂

Perhaps, you must be asking a question by yourself: What's new regarding the implementation of CSS Sprites for the web applications that generated by PHPMaker?

First, you don't need to create the sprites picture by yourself, since I have included the most used icons and combining them into one picture file, of course, with the .css file, too. All the icons that used by PHPMaker such as icons for displaying Printer Friendly, Export to Excel, Export to Word, Export to HTML, Export to CSV, Export to XML, Send to Email, First Record or Page, Previous Record or Page, Next Record or Page, Last Record or Page, Sort Up, Sort Down, Expand, Collapse, and so forth, have been included. I also added some other icons that usually useful for you in the sprites picture.

Secondly, I have provided the classes name that related to the icons in the related .css file so that you can use it easily and quickly. For example, if you want to display the Edit icon, then you can simply use the sprite edit prefix class, or if you want to display the Next icon, then you can use the sprite next prefix class. This class syntax also has been tested either for displaying the icons on the menu items and also on the grid, above the grid, in the record and page navigation. They all are working nicely.

Thirdly, all the changes have been implemented through the extensions I created. No need to customize the PHPMaker template. In other words, you are still be able to generate the web applications without using CSS Sprites technique by using the default template that shipped within PHPMaker, and then feel the difference of the loading time between those pages that use CSS Sprites and those that do not. If I were you, then I decide today to start moving out to use the CSS Sprites for all the web applications that generated by PHPMaker. There is no reason anymore not to use CSS Sprites in my web applications!

Can't wait to try? Well, you can re-download all the extensions that I just updated on September 5, 2013 from this link. The changes that related to the sprites customization have been implemented for 9 extensions as follows: MasinoGraphical, MasinoLogin, MasinoForgotPwd, MasinoRegister, MasinoChangePwd, MasinoSearchPanel, MasinoFixedWidthSite, MasinoPreviewRow, and MasinoHeaderFooter. Just for your information, the sprites files itself (.gif and .css) can be found in MasinoFixedWidthSite extension. So make sure you have downloaded the latest version of MasinoFixedWidthSite and enable it in your project.

Lastly, I just also updated PHPMaker 9.2.0 Demo Project Files so that you can see the example of usage of CSS Sprites for Menu items and Server Events from the project file. You will see at least two technique to use the class for displaying the icon, either as the part of the a href or as the certain independent tag.

Here is some example of CSS Sprites usage that you can easily enter from Multi-Language Property Editor of PHPMaker. This will output the menu items that contain the small icon followed by the menu text:

<i class='sprite car prefix'></i> Cars
<i class='sprite users prefix'></i> Customers
<i class='sprite menu prefix'></i> Menu Position
<i class='sprite horizontal prefix'></i> Top (Horizontal)
<i class='sprite vertical prefix'></i> Left (Vertical)
<i class='sprite theme prefix'></i> Themes/Colors
<i class='sprite help prefix'></i> Help (Categories)

Here is some example of CSS Sprites usage which will be a part of href tag and will be shown only as images:

<a href="customersadd.php" class="sprite form prefix" title="Add Customers"></a>
<a href="settingslist.php" class="sprite settings prefix" title="Settings"></a>

Finally, here is all the classes that already provided in the .css file:

  1. accept
  2. add
  3. addblankrow
  4. alert-small
  5. analysis
  6. anchor
  7. asterisk_orange
  8. attach
  9. basket
  10. box
  11. bug
  12. camera
  13. cancel
  14. car
  15. cart
  16. cd
  17. change
  18. chart_bar
  19. chart_pie
  20. clock
  21. collapse
  22. comment
  23. comments
  24. copy
  25. cursor
  26. cut
  27. date
  28. delete
  29. detail
  30. edit
  31. error
  32. exclamation
  33. expand
  34. exportcsv
  35. exportdoc
  36. exportemail
  37. exporthtml
  38. exportpdf
  39. exportxls
  40. exportxml
  41. eye
  42. favgreen
  43. female
  44. film
  45. find
  46. first
  47. firstdisab
  48. form
  49. gear
  50. group
  51. heart
  52. help
  53. helpcircle
  54. home
  55. horizontal
  56. hourglass
  57. house
  58. info
  59. info2
  60. inlinecopy
  61. inlineedit
  62. insert
  63. key
  64. language
  65. last
  66. lastdisab
  67. leftbar
  68. lightbulb
  69. link
  70. loading
  71. lock
  72. login
  73. logout
  74. magnifier
  75. mail
  76. mainbar
  77. male
  78. menu
  79. money
  80. monitor
  81. mouse
  82. music
  83. next
  84. nextdisab
  85. pencil
  86. pill
  87. plugin
  88. prev
  89. prevdisab
  90. print
  91. question
  92. reference
  93. register
  94. report
  95. rightbar
  96. rosette
  97. rss
  98. ruby
  99. settings
  100. sortdown
  101. sortup
  102. sport_8ball
  103. sport_basketball
  104. sport_football
  105. sport_golf
  106. sport_raquet
  107. sport_shuttlecock
  108. sport_soccer
  109. sport_tennis
  110. star
  111. staryellow
  112. stats
  113. status_offline
  114. status_online
  115. tag
  116. tag_blue
  117. telephone
  118. television
  119. theme
  120. thunder
  121. tick
  122. time
  123. tux
  124. tv
  125. tyre
  126. update
  127. user
  128. user_female
  129. userblue
  130. userprofile
  131. users
  132. vertical
  133. view
  134. warn
  135. weather_clouds
  136. weather_cloudy
  137. weather_lightning
  138. weather_rain
  139. weather_snow
  140. weather_sun
  141. zoom

As you can see, there are hundreds icons combined into only one picture. Did I mention the sprite file size that used for this CSS Sprites? Well, it is only approximately 25 KB in .gif file. Can you imagine this sprite file which has the file size only 25 KB contains the hundreds icon in it? However, I also included the sprite image file in .png format which has the size approximately 74 KB. Again, just wanted to remind you that the sprites files (.css and .gif) can be found in MasinoFixedWidthSite.

Article by Masino Sinaga / PHPMaker Extensions / css, CSS Sprites, MasinoChangePwd, MasinoFixedWidthSite, MasinoForgotPwd, MasinoGraphical, MasinoHeaderFooter, MasinoLogin, MasinoPreviewRow, MasinoRegister, MasinoSearchPanel, PHPMaker 9.2.0, PHPMaker Demo Project 3 Comments

Moving “About Us” Link from Footer to Menu in Websites that Generated by PHPMaker 9.2.0
The Custom Language Phrases in Masino Extensions 9.2.0 Now Has Been Separated into the Language Files

Comments

  1. keithh0427 says

    September 8, 2013 at 8:02 am

    Masino,

    Can’t seem to see any of the sprites and, consequently, cannot edit, view, help, etc. since there is nothing to link to.

    I am seeing the sprites file and changed the css to look at the png rather than the gif but neither seemed to work.

    I uploaded the *entire* project to the server, but still cannot see any of the sprite images.

    Any ideas what I still need to check?

    Log in to Reply
  2. keithh0427 says

    September 8, 2013 at 9:23 am

    Found the problem. I had missed one of the new extensions.

    Sorry for the confusion.

    Log in to Reply
    • Masino Sinaga says

      September 8, 2013 at 11:46 am

      Thanks for confirming about it. I just updated the article by adding an additional information regarding the location of the sprites files; it is inside the MasinoFixedWidthSite extension.

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Recent Posts

  • A New PHPMaker 2021 Project File Is Released
  • PHPMaker 2021 Demo Project File Is Released
  • Masino Extensions for PHPMaker 2021 Is Released!
  • A New PHPMaker 2020 Project File Is Released
  • PHPMaker 2020 Demo Project File Is Released
  • Masino Extensions for PHPMaker 2020 Is Released!
  • Inventory Stock Management Project, Why Should You Have It?
  • A New PHPMaker 2019 Project File Is Released!
  • PHPMaker 2019 Demo Project File Is Released!
  • Masino Extensions for PHPMaker 2019 Is Released!

Search

Recent Comments

  • saleh alayafi on A Case Study: Hiding Certain Fields Based on the Selected Value in ComboBox in Add Pages of the Websites that Generated by PHPMaker 9.2.0
  • Masino Sinaga on A Case Study: Hiding Certain Fields Based on the Selected Value in ComboBox in Add Pages of the Websites that Generated by PHPMaker 9.2.0
  • saleh alayafi on A Case Study: Hiding Certain Fields Based on the Selected Value in ComboBox in Add Pages of the Websites that Generated by PHPMaker 9.2.0
  • Masino Sinaga on A Case Study: Hiding Certain Fields Based on the Selected Value in ComboBox in Add Pages of the Websites that Generated by PHPMaker 9.2.0
  • Masino Sinaga on A Case Study: Hiding Certain Fields Based on the Selected Value in ComboBox in Add Pages of the Websites that Generated by PHPMaker 9.2.0

Demo Website

  • Demo of I Love PHPMaker 2021 (MasinoExtensions).
  • Indonesia Post Offices.
  • Stock Inventory Management.
  • Demo of PHPMaker + PHP Report Maker

Another Demo

The following template are not available in this site (must be purchased separately)

  • PHPMaker v2018 Horizontal Vertical Template.
  • PHPMaker v2017 Horizontal Vertical Template.

Demo Explanation

Stock Inventory Management is the good project for your reference, since it uses the real example in the real world. Many useful features you can use from this project, such as how to add the Thousand and Decimal separator character, and also how to calculate multiple row in Grid-Add when End-Users are entering data into the Grid-Add mode.

Categories

  • Customize Template (103)
  • General (3)
  • PHP Report Maker (17)
  • PHP Report Maker Extensions (2)
  • PHPMaker Extensions (79)
  • Tips and Trick (72)

Articles based on version

  • PHPMaker 2021
  • PHPMaker 2020
  • PHPMaker 2019
  • PHPMaker 2018
  • PHPMaker 2017.0.7
  • PHPMaker 12.0.7
  • PHPMaker 11.0.6
  • PHPMaker 10.0.5
  • PHPMaker 9.2.0
  • PHPMaker 8.0.3
  • PHP Report Maker 12

(c) I Love PHPMaker 2010 - 2019 by Masino Sinaga | WordPress | Log in | Back to top