Modifying The Template Code Coloring!

Ever wanted to change the colors you see for the Template markup in your template and its associated child pages? Been frustrated with trying to make this happen? So have we!

There is a bug using the Preferences Panel > Code Coloring category for the template markup that prevents any changes you have made from taking effect. There is also no visual display for the changes that you request through DMX's interface for either template or library markup.

This tutorial goes into more depth than our book did in Section I, Chapter 3, and illustrates how to modify the color scheme for template related markup in templates and associate child pages. We will also describe how to modify the preview contents of the Edit Coloring Scheme dialog so that you can see library and template markup for html documents.

The associated files:

Colors.xml
CodeColoring.xml

Their location:

Please read the Multi-user Configuration API errata for information on where the files are located on your machine. The documentation is located here.

The Colors.xml file

There are three template related lines that we need to be concerned about (because the standard Dreamweaver MX UI for changing these doesn't actually change them). These lines are:

This file needs to be modified by hand because there is a bug in the Edit Color Code dialog box that prevents changes for template markup being made to this file.

Note: Make a backup of this file in case you make any mistakes and corrupt it!

Breaking these down:

The ID's:

ID	Description
CodeColor_TemplateText	Viewable in a child page (Code view only), provides the coloring for the entire locked area of a template, leaving the editable regions alone.
CodeColor_TemplateCommentText	Viewable in the Template (Code view only), provides the coloring for the opening and closing template markup.
CodeColor_TemplateCommentAttr	Viewable in the Template (Code view only), provides the coloring for the Template markup attributes.

Attributes of the syntaxColor xml tag:

Attribute	Value(s)	Description
text	#XXXXXX\|Named Colors	Affects the text color of the item being changed. Use RGB colors such as #999999 or optionally, named colors such as Blue.
bgColor	#XXXXXX\|Named Colors	Affects the background color of the item being changed. Use RGB colors such as #999999 or optionally, named colors such as Blue. If this attribute is null or not present, then the default background color for the document type is used (White by default).
bold	true\|false\|null	Affects the text of the item being changed (If attribute is not present then the default is false)
italic	true\|false\|null	Affects the text of the item being changed (If attribute is not present then the default is false)
underline	true\|false\|null	Affects the text of the item being changed (If attribute is not present then the default is false)

The ColorCoding.xml file:

This file needs to be modified by hand to show the desired color schemes inside the Edit Color Code dialog box.

Original Edit Coloring Scheme Preview Field

Note: Make a backup of this file in case you make any mistakes and corrupt it!

Open the file Colors.xml in Notepad, Dreamweaver, Homesite or any text
editing application.
Look for (around line 30) -
<sampleText doctypes="HTML,LibraryItem">
<![CDATA[
<td><p><a href="link">Plain Text </a>
<img src="image" width=15>
<script>

</script><style> headline {font-size: 24pt;} </style>
<form action="page.cgi">
<input type="submit" value="Press Me">
</form>
Text]]>
</sampleText>
Replace this part -

</form>
Text]]>
</sampleText>

with this -

</form>
Text

Library Content


Template region content
]]>
</sampleText>

so that the modified version looks like this -

< sampleText doctypes="HTML,LibraryItem">
<![CDATA[
<td><p><a href="link">Plain Text </a>
<img src="image" width=15>
<script>

</script><style> headline {font-size: 24pt;} </style>
<form action="page.cgi">
<input type="submit" value="Press Me">
</form>
Text

Library Content


Template region content
]]>
</sampleText>
Save the file.
Close the file.
If Dreamweaver MX is running, shut it down and restart it for the changes to take effect.
To see the changes in Dreamweaver MX, select Edit > Preferences
Select the Code Coloring Category.
In the Document Type listing, choose HTML
Click the Edit Coloring Scheme button
You should now see the following in the Preview area of the dialog:

<td><p><a href="link">Plain Text </a>
<img src="image" width=15>
<script>

</script><style> headline {font-size: 24pt;} </style>
<form action="page.cgi">
<input type="submit" value="Press Me">
</form>
Text

Library Content


Template region content

Note: The template markup stays colored as standard HTML comments. Also, the changes made in the UI, in this case, Background Color = #FFCCCC, does not have any visual effect in the Preview field, however, the library Background Color change to #CCFFFF can be previewed without issue.

Now you can make changes to the Library Item Style and you will be able to see them visually. Note that the Template syntax in the Preview area still does not reflect the changes in the styles that you make in the dialog or that you may have made in Colors.xml (this is another bug probably related to the first bug mentioned above!).

More information:

Dreamweaver MX Errata (Extending)

Extensible Code Coloring