Warning Flags: Changing the Icon and Labels
From PikaDocs
By Brian Lawlor & Mark Sawyer
Legal Services of Northern California (http://www.lsnc.net/)
Let's just admit it upfront. In a perfect world, Pika users would flawlessly execute every intake, filling in every required field and thereby assuring client case records bask in the warm glow of inherent data integrity with guaranteed 100% LSC bomb-proof compliance. News flash: the chances of that perfect world existing are right up there with the prospect that your local field program will soon provide you with a defined benefit pension plan. Dream on.
Fortunately, Pika anticipates the real world, practical problem of users overlooking "blank" fields. Built into Pika is a handy "gotcha" feature: those ever pesky "red flags" that appear at the top of every case record page, immediately below the horizontal navigation bar, whenever certain required fields are left blank:
Want to change the appearance of the red flag icon or change the text label to the right of each icon? Read on....
Changing the Red Flag Icon
The red flag icon is actually a 16x16 pixel GIF (http://en.wikipedia.org/wiki/Gif) image -- a standard icon size -- located in the /images/ subdirectory. Cleverly, it is called "redflag.gif." The code for the red flag icon is located in two PHP files: at line 506 of the pika_cms.php file located in the Pika root directory ...
... and at line 669 of the pikaMisc.php file located in the /app/lib/ subdirectory ...
Handy information, but the truth is you can change the red flag icon without touching any HTML or PHP code. Basically, all you need to do is substitute a new GIF image of the same size for the default image to get a new look:
Of course, if you're image savvy you could create your own custom red flag icon in your favorite image or icon editor, save it as "redflag.gif," upload it to the /images/ subdirectory and you're good to go. But there is an easier way: use one of the innumerable 16x16 pixel icons that come with the Windows OS itself or other installed software programs. Here's how to do it:
- Extract: Use an image or icon editing program that enables you to extract or copy icon images from files containing icons. In this example, we extracted the icon images in the outlook.exe program file, shown on the left.
- Convert: One way or another you will need to convert the icon image to a JPG (http://en.wikipedia.org/wiki/Jpg) image or other high bit format. There are various ways of doing this, but here's how we did it: We saved the 16x16 pixel version of the Outlook "clipboard/checked" image as a JPG file. We then copied and pasted the JPG image into an image editor (e.g., Photoshop Elements, Paint Shop Pro, etc.), made the white background color transparent so the image background would not show regardless of the background color of the Pika pages, and then saved it as a GIF file named ... you guessed it ... "redflag.gif."
- Upload: Now upload the new GIF image to the Pika /images/ subdirectory and you've got your new "red flag" icon:
How to Change the Text Labels
To do this, you definitely have to edit a PHP file: case_screen.php located in the /modules/ subdirectory. But it is easy enough to do. There are eleven "warning" messages embedded in the case_screen.php file at lines 9, 14, 19, 39, 44, 59, 76, 86, 91, 111 and 116. For example, at line 9 you will see the warning message "Asset Info is Blank" ...
Edit the labels as you please.
An additional example of what you can accomplish with these modifications: Here is a screenshot from the Sky Pika redesign (http://www.openpika.org/archives/2005/01/sky_pika_alpha.html), in which we incorporated the new red flag icon image, above, and changed each of the warning messages to make them more concise:
Related articles:
