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.

Answer 1

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.

Answer 2

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" />