Time Slips: Changing the Icon
From PikaDocs
By Brian Lawlor & Mark Sawyer
Legal Services of Northern California (http://www.lsnc.net/)
In a related article, we showed how to make changes to the "red flag" icon that appears at the top of Pika case record pages. You can adapt the techniques illustrated there to make a similar change to the "time slip" clock icon that appears on the right side of every case search result screen, including the one that generates the case list:
Clicking on this handy icon brings up the Time Slip screen. The clock icon is a 16x16 pixel GIF (http://en.wikipedia.org/wiki/Gif) image -- a standard icon size -- located in the /images/ subdirectory. Memorably, it is called "stopwatch.gif."
The code for the clock icon is located in two HTML files: at line 88 of the case_list.html file and line 45 of the search_screen.html file. Both files are located in the /subtemplates/ subdirectory, and both include the same image code:
<img style="border: #CCCCCC 2px outset; background-color: #CCCCCC;"
src="%%[base_url]%%/images/stopwatch.gif" alt="Record Time" />
In an XHTML page, images are page elements (http://en.wikipedia.org/wiki/HTML_element). In this code, IMG (http://www.htmldog.com/reference/htmltags/img/) is the XHTML tag (http://htmldog.com/guides/htmlbeginner/tags/) that declares the image within the markup and here contains several style attributes: border (http://www.htmldog.com/reference/cssproperties/border/) (with a specified color, width and outset "button" effect) and background (http://www.htmldog.com/reference/cssproperties/background/) properties affecting the presentation of the icon image:
style="border: #CCCCCC 2px outset; background-color: #CCCCCC;"
Now that you know what they are, get rid of them! You should remove all of these embedded style attributes in the image code in both HTML files. With these style attributes removed the code for the IMG tag should now look like this:
<img src="%%[base_url]%%/images/stopwatch.gif" alt="Record Time" />
Now substitute a new icon, using the same Extract ... Convert ... Upload technique illustrated in the tutorial on warning flags. Be sure that the file name of your new icon image matches the file name in the IMG tag, above, i.e., stopwatch.gif. For example, you could used the "time document" image in the icon-rich shell32.dll file commonly located in the C:\WINDOWS\system32\ subdirectory:
To see how this works, here's a screenshot from the Sky Pika redesign (http://www.openpika.org/archives/2005/01/sky_pika_alpha.html) showing how the new image displays in a case list generated within Pika, with the image's ALT attribtue (http://www.htmldog.com/reference/htmltags/img/) changed to "Record time on this case" ...
Related articles:
