Template 3rd Party Tags

Are you tired of seeing the same old icon in design view of your template or child pages, when you have template expressions or passthrough expressions? Read this tutorial and we will show you how to customize these icons to display a unique image for each of the expression types (passthrough and expression), as well as to provide a starting point PNG file for you to follow or use.

NOTE: We could also teach you about modifying the Property Inspector (PI) icon, but we are satisfied with the currently used icon (again, the same as above) so it makes no difference to use in the PI's. We'll give you a hint though, check this folder path: C:\Program Files\Macromedia\Dreamweaver MX\Configuration\Inspectors and look for the filename: template_expr.gif (the same PI is used for both passthrough and non-passthrough Expressions).

TemplateTags*.mxp Replacement Icons
Version	Dimensions	Dimensions
TemplateTags1	19 x 18	27 x 18
TemplateTags2	19 x 18	19 x 18
TemplateTags3	18 x 18	18 x 18
TemplateTags4	18 x 18	18 x 18
TemplateTags5	77 x 20	83 x 20

NOTE: These are available as a downloadable PNG at the end of this tutorial.

Warning: Each of these is mutually exclusive, so if you have one of them installed and want to change for another, you MUST uninstall the previous version FIRST. If you do not, then the last one installed will be the only functional one.

Troubleshooting:

There shouldn't be any problems encountered except for actual display issues which are listed below. Use this for possible resolution to any display issue you may be having.

Dreamweaver MX BUG: If installing on a multi-user aware OS (Windows 2000, Windows XP, OSX) then the third party template tags will not function. If you go to the users ThirdPartyTags folder and copy templatetags.xml and the two image files to the system Configuration folder then they work fine. This is a confirmed bug by Macromedia.

Problem	Resolution
Can't see icons 1:	The icons only display in templates or nested templates.
Can't see icons 2:	- Select View » Visual Aids - Ensure there is no check beside Hide All - Ensure there is a check beside Invisible Elements
Can't see icons 3:	- Select Edit » Preferences... - Select the Invisible Elements Category - Ensure there is a check in Visual Server Markup Tags - Click OK if any changes made

Creating your own

Even though we have created 5 different versions for you, you may decide that you want to customize the look yourself of either the default image, the images from any of the extensions above, or create your own unique images to use. This area will describe to you how to go about doing that.

This discussion assumes you are not on a multi-user aware OS, if you are, please check the Macromedia tutorial: Multiple-user Configuration API for possible file locations.

What are the specs for the image?

Currently, the original image is 18 pixels x 18 pixels and GIF formatted. You could make the images literally any size you want as long as you modify the appropriate image dimensions in Tags.xml as discussed below.

What are the names of the images?

TemplateExpr.gif - Default image included with Dreamweaver MX installation.

Where are the images located?

Check this folder:
C:\Program Files\Macromedia\Dreamweaver MX\Configuration\ThirdPartyTags

What controls the image display characteristics?

Check this folder:
C:\Program Files\Macromedia\Dreamweaver MX\Configuration\ThirdPartyTags

Open the file named Tags.xml in a text editor (***Make a backup first!).

NOTE: This is the file that controls a majority of the icons that you see on various pages if you have them enabled. Our extensions above do not touch this file at all, but rather make a new xml file that goes into the same directory and takes precedence.

Change these 2 lines (lines 2 and 3 in our Tags.xml file):
From this:
<tagspec tag_name="dwtemplatepassthrough" start_string="@@@(" end_string=")@@@" detect_in_attribute="true" icon="TemplateExpr.gif" icon_width="18" icon_height="18"></tagspec>
<tagspec tag_name="dwtemplate" start_string="@@(" end_string=")@@" detect_in_attribute="true" icon="TemplateExpr.gif" icon_width="18" icon_height="18"></tagspec>

To this:
<tagspec tag_name="dwtemplatepassthrough" start_string="@@@(" end_string=")@@@" detect_in_attribute="true" icon="TemplatePassX.gif" icon_width="18" icon_height="18"></tagspec>
<tagspec tag_name="dwtemplate" start_string="@@(" end_string=")@@" detect_in_attribute="true" icon="TemplateExprX.gif" icon_width="18" icon_height="18"></tagspec>
(where the X is the version of the icon you want to use as exported from the png file referenced in the downloads at the bottom of this tutorial)

Once the modifications are completed, restart Dreamweaver MX, open the site you created for the templateIconsSite.zip download below, open the templates and the new images will be used in place of the original images. If you can't see the icons, please see the troubleshooting section above.

Downloads:

Source file containing the sample images: TemplateIcons.png
Demo template to see the icons with: TemplateIconsSite.zip