Dreamweaver Code Hints
As I’m sure a lot of people are aware, Macromedia’s Dreamweaver helps us all create rich web media quickly and easily, I would like to point out that I’m not referring to Dreamweaver’s built in WYSIWYG editor but rather some of the built in tricks that enable you to generate HTML and CSS with a few key presses.
The main feature that allows for rapid code generation is “Code Hints”, but quite often it can be a hinderance!
Here is how to customise your code hints to allow for a more powerful and graceful development platform:
Step 1: Find, Replace and Edit
First you need to take a copy of the old file, assuming your install is default you will find the code hints file in the following location.
C:\Program Files\Macromedia\Dreamweaver 8\Configuration\CodeHints\
Copy the “CodeHints.xml” and rename to “CodeHints.bkp” Dreamweaver will list any XML files that are in this directory so renaming without changing the extension is not adequate.
Now edit the origional file in a code editor (we choose to use Dreamweaver 
)
Step 2: The Padding Fix
When editing CSS in dreamweaver if you select the “padding” attribute you will notice the code hint “inherit” pop’s up. Because this is the only attribute defined its automatically selected meaning when you hit any key it pre-fills that value to screen. This is VERY aggravating when trying to write nicely tabbed code so here’s the fix.
Find the line starting with:
<menu pattern="padding:" additionaldismisschars=";:" allowwhitespaceprefix="true"...
Within this XML tag there is the following child element
<menuitem label="inherit" value="inherit" icon="shared/mm/images/hintMisc.gif" />
Before this tag add the following:
<menuitem label="auto" value="auto" icon="shared/mm/images/hintMisc.gif" />
This will mean you now have two values for this “Padding” definition and will prevent the issue mentioned earlier. You should also apply this fix to “padding-left” padding-right” padding-top” and “padding-bottom”. This will result in the following code:
<menu pattern="padding:" additionaldismisschars=";:" allowwhitespaceprefix="true" displayrestriction="css" allowmultiplevalues="true" description="padding-top || padding-right || padding-bottom || padding-left">
<menuitem label="auto" value="auto" icon="shared/mm/images/hintMisc.gif" />
<menuitem label="inherit" value="inherit" icon="shared/mm/images/hintMisc.gif" />
</menu>
<menu pattern="padding-bottom:" additionaldismisschars=";:" allowwhitespaceprefix="true" displayrestriction="css">
<menuitem label="auto" value="auto" icon="shared/mm/images/hintMisc.gif" />
<menuitem label="inherit" value="inherit" icon="shared/mm/images/hintMisc.gif" />
</menu>
<menu pattern="padding-left:" additionaldismisschars=";:" allowwhitespaceprefix="true" displayrestriction="css">
<menuitem label="auto" value="auto" icon="shared/mm/images/hintMisc.gif" />
<menuitem label="inherit" value="inherit" icon="shared/mm/images/hintMisc.gif" />
</menu>
<menu pattern="padding-right:" additionaldismisschars=";:" allowwhitespaceprefix="true" displayrestriction="css">
<menuitem label="auto" value="auto" icon="shared/mm/images/hintMisc.gif" />
<menuitem label="inherit" value="inherit" icon="shared/mm/images/hintMisc.gif" />
</menu>
<menu pattern="padding-top:" additionaldismisschars=";:" allowwhitespaceprefix="true" displayrestriction="css">
<menuitem label="auto" value="auto" icon="shared/mm/images/hintMisc.gif" />
<menuitem label="inherit" value="inherit" icon="shared/mm/images/hintMisc.gif" />
</menu>
Step 3: Ultra Quick Testing Borders
Most CSS developers find it handy to apply a border to elements from time to time to allow them to debug layouts or check specificity. The idea is that when you type “border:” the first code hint that appears is “debug” when you select this attribute Dreamweaver will automatically place in “1px solid red;” making fast work of debugging, to get this working you need to do the following:
Find the line starting with:
<menu pattern="border:" additionaldismisschars=";:" allowwhitespaceprefix="true" displayrestriction="css" allowmultiplevalues="true"...
Within this XML tag insert the following tag (before everything else):
<menuitem label="debug" value="1px solid red;" description="debug" icon="shared/mm/images/hintMisc.gif" />
Once this is complete you will be left with something that looks like the following:
<menu pattern="border:" additionaldismisschars=";:" allowwhitespaceprefix="true" displayrestriction="css" allowmultiplevalues="true" description="border-width || border-style || color">
<menuitem label="debug" value="1px solid red;" description="debug" icon="shared/mm/images/hintMisc.gif" />
<menuitem MMString:label="code_hints/pick_color" value="mm_menu_item:colorPicker" description="border-color" icon="shared/mm/images/hintColor.gif" />
<menuitem label="medium" value="medium" description="border-width" icon="shared/mm/images/hintMisc.gif" />
<menuitem label="thin" value="thin" description="border-width" icon="shared/mm/images/hintMisc.gif" />
<menuitem label="thick" value="thick" description="border-width" icon="shared/mm/images/hintMisc.gif" />
<menuitem label="dashed" value="dashed" description="border-style" icon="shared/mm/images/hintMisc.gif" />
<menuitem label="dotted" value="dotted" description="border-style" icon="shared/mm/images/hintMisc.gif" />
<menuitem label="double" value="double" description="border-style" icon="shared/mm/images/hintMisc.gif" />
<menuitem label="groove" value="groove" description="border-style" icon="shared/mm/images/hintMisc.gif" />
<menuitem label="hidden" value="hidden" description="border-style" icon="shared/mm/images/hintMisc.gif" />
<menuitem label="inset" value="inset" description="border-style" icon="shared/mm/images/hintMisc.gif" />
<menuitem label="none" value="none" description="border-style" icon="shared/mm/images/hintMisc.gif" />
<menuitem label="outset" value="outset" description="border-style" icon="shared/mm/images/hintMisc.gif" />
<menuitem label="ridge" value="ridge" description="border-style" icon="shared/mm/images/hintMisc.gif" />
<menuitem label="solid" value="solid" description="border-style" icon="shared/mm/images/hintMisc.gif" />
<menuitem label="inherit" value="inherit" icon="shared/mm/images/hintMisc.gif" />
</menu>
Step 4: Where’s the Zoom?
The “zoom:1″ CSS statement is often used as an IE6/7 specific clear fix. It’s not an official W3C supported property and isn’t in the Dreamweaver code hints list…..so lets add it.
First find the following:
<menu pattern="z-index:" additionaldismisschars=";:" allowwhitespaceprefix="true" displayrestriction="css">
<menuitem label="auto" value="auto" icon="shared/mm/images/hintMisc.gif" />
<menuitem label="inherit" value="inherit" icon="shared/mm/images/hintMisc.gif" />
</menu>
Under this XML tag paste this:
<menu pattern="zoom:" additionaldismisschars=";:" allowwhitespaceprefix="true" displayrestriction="css">
<menuitem label="1" value="1" icon="shared/mm/images/hintMisc.gif" />
<menuitem label="inherit" value="inherit" icon="shared/mm/images/hintMisc.gif" />
</menu>
Thus leaving you with:
<menu pattern="z-index:" additionaldismisschars=";:" allowwhitespaceprefix="true" displayrestriction="css">
<menuitem label="auto" value="auto" icon="shared/mm/images/hintMisc.gif" />
<menuitem label="inherit" value="inherit" icon="shared/mm/images/hintMisc.gif" />
</menu>
<menu pattern="zoom:" additionaldismisschars=";:" allowwhitespaceprefix="true" displayrestriction="css">
<menuitem label="1" value="1" icon="shared/mm/images/hintMisc.gif" />
<menuitem label="inherit" value="inherit" icon="shared/mm/images/hintMisc.gif" />
</menu>
Step 5: Min Height and Width
As in Step 2, you may notice that when using “min-height” or “min-width” Dreamweaver will default to the value of “inherit” (same goes for the “max” versions). To fix this find the following code:
<menu pattern="min-height:" additionaldismisschars=";:" allowwhitespaceprefix="true" displayrestriction="css">
<menuitem label="inherit" value="inherit" icon="shared/mm/images/hintMisc.gif" />
</menu>
<menu pattern="min-width:" additionaldismisschars=";:" allowwhitespaceprefix="true" displayrestriction="css">
<menuitem label="inherit" value="inherit" icon="shared/mm/images/hintMisc.gif" />
</menu>
And replace with
<menu pattern="min-height:" additionaldismisschars=";:" allowwhitespaceprefix="true" displayrestriction="css">
<menuitem label="inherit" value="inherit" icon="shared/mm/images/hintMisc.gif" />
<menuitem label="auto" value="auto" icon="shared/mm/images/hintMisc.gif" />
</menu>
<menu pattern="min-width:" additionaldismisschars=";:" allowwhitespaceprefix="true" displayrestriction="css">
<menuitem label="inherit" value="inherit" icon="shared/mm/images/hintMisc.gif" />
<menuitem label="auto" value="auto" icon="shared/mm/images/hintMisc.gif" />
</menu>
Step 6: Goodbye colour pallete
Something else I find a little annoying is the colour pallete popup which appears when you tab or press space after typing “color:” or any other attribute with “color” at the end. To remove this functionality for the “color” attribute you just search for the following code:
<menu pattern="color:" type="color" additionaldismisschars=";:" allowwhitespaceprefix="true" displayrestriction="css">
And remove the “type” attribute and it’s value completely, leaving you with:
<menu pattern="color:" additionaldismisschars=";:" allowwhitespaceprefix="true" displayrestriction="css">
This will leave you with a list of a few standard colours which is acceptable to me, you might want to alter this further though.
And you’re done!
Well you will be pleased to know that we’re done, simply restart Dreamweaver and give it a bash! If you have any problems or questions please get in touch!
If you have any suggestions on other code hints please let us know!