How to Add CSS3 Elements to DW CS6 Code Hints

Question

Ok, I spent quite a bit of time trying to research plugins and/or extensions that would allow Dreamweaver to hint the few commands of CSS3 that were not showing up.

I am posting the solution below.

Who would possibly mark this down? What kind of person doesn't like people helping others? Blows my mind. I tried to make sure the answer was nowhere else, I made a simple and very precise set of steps so that people could follow it. I made sure the tags were in the right categories. I made the title reflect the content. What more could you ask? Just a mark-down... no reason? If I have done something incorrect, say it. — Lee Gellie, Feb 27 '16 at 21:15

score 2 · Accepted Answer · answered Feb 27 '16 at 19:36

I FIGURED OUT A METHOD SO I WILL ANSWER MY OWN QUESTION but I thought it would be helpful to others that need to do the same. I personally am going to show how to add all the "flex" stuff on a windows computer.

STEP 1 - Locate the file

Use File Explorer to navigate to; /Program Files/Adobe/Adobe Dreamweaver CS6/configuration/CodeHints/ it may be in a /Program Files (x86)/ folder.

STEP 2 - Allow Access to CodeHints.xml

Right click on CodeHints.xml and click security tab. Go to your current user (usually Users (You\Users)) in the list and make sure it has "modify" enabled. If not, click Edit, select the current user in the popup and tick the Modify, then click OK at the bottom and OK again on the security tab.

STEP 3 - Add flex as a display: option in CodeHints.xml

Use an editor that can edit XML, such as Sublime, Dreamweaver or any text editor and search for display: - make sure you add the colon to the search.

There will be two results, you want the first one that starts <menu pattern="display:".

Add a new menu item of <menuitem label="flex" value="flex" icon="shared/mm/images/hintMisc.gif" /> anywhere between the opening and closing

STEP 4 - Add flex-* tags.

After the Closing </menu> of that display: block add:

<menu pattern="flex-wrap:" additionaldismisschars=";:" allowwhitespaceprefix="true" displayrestriction="css" allowmultiplevalues="true">
  <menuitem label="nowrap" value="nowrap" icon="shared/mm/images/hintMisc.gif" />
  <menuitem label="wrap" value="wrap" icon="shared/mm/images/hintMisc.gif" />
  <menuitem label="wrap-reverse" value="wrap-reverse" icon="shared/mm/images/hintMisc.gif" />
  <menuitem label="initial" value="initial" icon="shared/mm/images/hintMisc.gif" />
  <menuitem label="inherit" value="inherit" icon="shared/mm/images/hintMisc.gif" />
  <menuitem label="!important" value="!important" icon="shared/mm/images/hintFlag.gif" />
</menu>
<menu pattern="flex-shrink:" additionaldismisschars=";:" allowwhitespaceprefix="true" displayrestriction="css" allowmultiplevalues="true">
  <menuitem label="initial" value="initial" icon="shared/mm/images/hintMisc.gif" />
  <menuitem label="inherit" value="inherit" icon="shared/mm/images/hintMisc.gif" />
  <menuitem label="!important" value="!important" icon="shared/mm/images/hintFlag.gif" />
</menu>
<menu pattern="flex-basis:" additionaldismisschars=";:" allowwhitespaceprefix="true" displayrestriction="css" allowmultiplevalues="true">
  <menuitem label="auto" value="auto" icon="shared/mm/images/hintMisc.gif" />
  <menuitem label="initial" value="initial" icon="shared/mm/images/hintMisc.gif" />
  <menuitem label="inherit" value="inherit" icon="shared/mm/images/hintMisc.gif" />
  <menuitem label="!important" value="!important" icon="shared/mm/images/hintFlag.gif" />
</menu>
<menu pattern="flex-grow:" additionaldismisschars=";:" allowwhitespaceprefix="true" displayrestriction="css" allowmultiplevalues="true">
  <menuitem label="initial" value="initial" icon="shared/mm/images/hintMisc.gif" />
  <menuitem label="inherit" value="inherit" icon="shared/mm/images/hintMisc.gif" />
  <menuitem label="!important" value="!important" icon="shared/mm/images/hintFlag.gif" />
</menu>
<menu pattern="flex-direction:" additionaldismisschars=";:" allowwhitespaceprefix="true" displayrestriction="css" allowmultiplevalues="true">
  <menuitem label="row" value="row" icon="shared/mm/images/hintMisc.gif" />
  <menuitem label="row-reverse" value="row-reverse" icon="shared/mm/images/hintMisc.gif" />
  <menuitem label="column" value="column" icon="shared/mm/images/hintMisc.gif" />
  <menuitem label="column-reverse" value="column-reverse" icon="shared/mm/images/hintMisc.gif" />
  <menuitem label="initial" value="initial" icon="shared/mm/images/hintMisc.gif" />
  <menuitem label="inherit" value="inherit" icon="shared/mm/images/hintMisc.gif" />
  <menuitem label="!important" value="!important" icon="shared/mm/images/hintFlag.gif" />
</menu>
<menu pattern="flex-flow:" additionaldismisschars=";:" allowwhitespaceprefix="true" displayrestriction="css" allowmultiplevalues="true">
  <menuitem label="row" value="row" icon="shared/mm/images/hintMisc.gif" />
  <menuitem label="row-reverse" value="row-reverse" icon="shared/mm/images/hintMisc.gif" />
  <menuitem label="column" value="column" icon="shared/mm/images/hintMisc.gif" />
  <menuitem label="column-reverse" value="column-reverse" icon="shared/mm/images/hintMisc.gif" />
  <menuitem label="nowrap" value="nowrap" icon="shared/mm/images/hintMisc.gif" />
  <menuitem label="wrap" value="wrap" icon="shared/mm/images/hintMisc.gif" />
  <menuitem label="wrap-reverse" value="wrap-reverse" icon="shared/mm/images/hintMisc.gif" />
  <menuitem label="initial" value="initial" icon="shared/mm/images/hintMisc.gif" />
  <menuitem label="inherit" value="inherit" icon="shared/mm/images/hintMisc.gif" />
  <menuitem label="!important" value="!important" icon="shared/mm/images/hintFlag.gif" />
</menu>

STEP 5 - Add those labels to the hint list.

Search display: again and go the second one that is something like this <menuitem label="display" value="display:" icon="shared/mm/images/hintMisc.gif" />

Add below that entry:

<menuitem label="flex-wrap" value="flex-wrap:" icon="shared/mm/images/hintMisc.gif" />
<menuitem label="flex-basis" value="flex-basis:" icon="shared/mm/images/hintMisc.gif" />
<menuitem label="flex-direction" value="flex-direction:" icon="shared/mm/images/hintMisc.gif" />
<menuitem label="flex-flow" value="flex-flow:" icon="shared/mm/images/hintMisc.gif" />
<menuitem label="flex-grow" value="flex-grow:" icon="shared/mm/images/hintMisc.gif" />
<menuitem label="flex-shrink" value="flex-shrink:" icon="shared/mm/images/hintMisc.gif" />

again making sure that the icon path matches the others.

STEP 6 - Save and Restart Dreamweaver.

STEP 7 - Be happy your code hinting works!

Hope that helps someone out there.

score 2 · Answer 2 · answered Nov 08 '18 at 14:38

I'm adding a few more useful lines to the XML. Someone else might need it.

As in STEP 4 add:

<menu pattern="justify-content:" additionaldismisschars=";:" allowwhitespaceprefix="true" displayrestriction="css" allowmultiplevalues="true">
  <menuitem label="flex-start" value="flex-start" icon="shared/mm/images/hintMisc.gif" />
  <menuitem label="flex-end" value="flex-end" icon="shared/mm/images/hintMisc.gif" />
  <menuitem label="center" value="center" icon="shared/mm/images/hintMisc.gif" />
  <menuitem label="space-between" value="space-between" icon="shared/mm/images/hintMisc.gif" />
  <menuitem label="space-around" value="space-around" icon="shared/mm/images/hintMisc.gif" />
  <menuitem label="!important" value="!important" icon="shared/mm/images/hintFlag.gif" />
</menu>
<menu pattern="align-items:" additionaldismisschars=";:" allowwhitespaceprefix="true" displayrestriction="css" allowmultiplevalues="true">
  <menuitem label="flex-start" value="flex-start" icon="shared/mm/images/hintMisc.gif" />
  <menuitem label="flex-end" value="flex-end" icon="shared/mm/images/hintMisc.gif" />
  <menuitem label="center" value="center" icon="shared/mm/images/hintMisc.gif" />
  <menuitem label="baseline" value="baseline" icon="shared/mm/images/hintMisc.gif" />
  <menuitem label="stretch" value="stretch" icon="shared/mm/images/hintMisc.gif" />
  <menuitem label="!important" value="!important" icon="shared/mm/images/hintFlag.gif" />
</menu>
<menu pattern="align-content:" additionaldismisschars=";:" allowwhitespaceprefix="true" displayrestriction="css" allowmultiplevalues="true">
  <menuitem label="flex-start" value="flex-start" icon="shared/mm/images/hintMisc.gif" />
  <menuitem label="flex-end" value="flex-end" icon="shared/mm/images/hintMisc.gif" />
  <menuitem label="center" value="center" icon="shared/mm/images/hintMisc.gif" />
  <menuitem label="space-between" value="space-between" icon="shared/mm/images/hintMisc.gif" />
  <menuitem label="space-around" value="space-around" icon="shared/mm/images/hintMisc.gif" />
  <menuitem label="stretch" value="stretch" icon="shared/mm/images/hintMisc.gif" />
  <menuitem label="!important" value="!important" icon="shared/mm/images/hintFlag.gif" />
</menu>

As in STEP 5 add:

<menuitem label="justify-content" value="justify-content:" icon="shared/mm/images/hintMisc.gif" />
<menuitem label="align-items" value="align-items:" icon="shared/mm/images/hintMisc.gif" />
<menuitem label="align-content" value="align-content:" icon="shared/mm/images/hintMisc.gif" />

Thank you sir, for putting this up here. I've been looking all over for a way to update the code hinting in Dreamweaver CS6. I like this version and don't want to upgrade, but the lack of support for modern code is irritating. This is a huge help! — doggonemess, Dec 09 '19 at 15:21

How to Add CSS3 Elements to DW CS6 Code Hints

2 Answers2