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:
- accept
- add
- addblankrow
- alert-small
- analysis
- anchor
- asterisk_orange
- attach
- basket
- box
- bug
- camera
- cancel
- car
- cart
- cd
- change
- chart_bar
- chart_pie
- clock
- collapse
- comment
- comments
- copy
- cursor
- cut
- date
- delete
- detail
- edit
- error
- exclamation
- expand
- exportcsv
- exportdoc
- exportemail
- exporthtml
- exportpdf
- exportxls
- exportxml
- eye
- favgreen
- female
- film
- find
- first
- firstdisab
- form
- gear
- group
- heart
- help
- helpcircle
- home
- horizontal
- hourglass
- house
- info
- info2
- inlinecopy
- inlineedit
- insert
- key
- language
- last
- lastdisab
- leftbar
- lightbulb
- link
- loading
- lock
- login
- logout
- magnifier
- mainbar
- male
- menu
- money
- monitor
- mouse
- music
- next
- nextdisab
- pencil
- pill
- plugin
- prev
- prevdisab
- question
- reference
- register
- report
- rightbar
- rosette
- rss
- ruby
- settings
- sortdown
- sortup
- sport_8ball
- sport_basketball
- sport_football
- sport_golf
- sport_raquet
- sport_shuttlecock
- sport_soccer
- sport_tennis
- star
- staryellow
- stats
- status_offline
- status_online
- tag
- tag_blue
- telephone
- television
- theme
- thunder
- tick
- time
- tux
- tv
- tyre
- update
- user
- user_female
- userblue
- userprofile
- users
- vertical
- view
- warn
- weather_clouds
- weather_cloudy
- weather_lightning
- weather_rain
- weather_snow
- weather_sun
- 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.
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?
Found the problem. I had missed one of the new extensions.
Sorry for the confusion.
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.