Adding a custom option to CSS Form Designer presets Support

Question:

---

How can I add my own option to the custom presets (predefined CSS Styles)?

Answer:

---

CSS Form Designer contains a number of predefined CSS Styles. These styles have been created as initial options. With very little editing you are able to add your own style to the list of presets. To do so you need to add your css file and any images it uses to the styles folder and extend formDesigner.htm located in your Dreamweaver Configuration folder:

For winXP:
DW CS3 +:
C:\Documents and Settings\CurrentUser\Application Data\Adobe\Dreamweaver version\en-US\Configuration\shared\DMXzone\CSS Form Designer\dialogs\formDesigner.htm
DW 8 -:
C:\Documents and Settings\CurrentUser\Application Data\Macromedia\Dreamweaver version\Configuration\shared\DMXzone\CSS Form Designer\dialogs\formDesigner.htm

For Vista:
DW CS3+:
C:\Users\CurrentUser\AppData\Roaming\Adobe\Dreamweaver version\en-US\Configuration\shared\DMXzone\CSS Form Designer\dialogs\formDesigner.htm
DW 8-:
C:\Users\CurrentUsers\AppData\Roaming\macromedia\Dreamweaver version\Configuration\shared\DMXzone\CSS Form Designer\dialogs\formDesigner.htm

For MAC:
DW CS3+:
MacDrive:Users:CurrentUser:Library:Application Support:Adobe: Dreamweaver version:Configuration:shared: DMXzone:CSS Form Designer: dialogs:formDesigner.htm
DW 8-:
MacDrive:Users:CurrentUser:Library:Application Support:Macromedia: Dreamweaver version:Configuration:shared: DMXzone:CSS Form Designer: dialogs:formDesigner.htm

The styles folder is located in the CSS Form Designer folder.

First you will start by creating the custom style. Open the styles folder. Create a new folder in the styles folder and name it shortly!

Note: Be sure no to duplicate styles names!

Now choose the style that comes the closest to the style you are about to create. Copy the content of that styles' folder and paste it in your newly created folder. Edit the name for the css file that has just been copied. The name of this file should be the same as its folder preceeded bij form_.

For example: /CSS Form Designer/styles/myownstyle/form_myownstyle.css

Now you need to extend the formDesigner.htm with your new style. Go to the dialogs folder and open formDesigner.htm in Dreamweaver. In Code view go to the top of the page if you are not there and after all <link> tags add a new link to your newly created css file. In general copying one of the existing links, pasting and editing it will do the job with a minimum risk of messing up the paths.

<title>CSS Form Designer</title>
<link type="text/css" rel="stylesheet" href="dialog.css" />
<link href="../styles/blue/form_blue.css" rel="stylesheet" type="text/css" />
<link href="../styles/clean/form_clean.css" rel="stylesheet" type="text/css" />
<link href="../styles/clear/form_clear.css" rel="stylesheet" type="text/css" />
<link href="../styles/dark/form_dark.css" rel="stylesheet" type="text/css" />
<link href="../styles/fancy/form_fancy.css" rel="stylesheet" type="text/css" />
<link href="../styles/universal/form_universal.css" rel="stylesheet" type="text/css" />
<link href="../styles/myownstyle/form_myownstyle.css" rel="stylesheet" type="text/css" />

After that go to line 466 (line numbers may vary) and look for a select input element that should look like this:

<select jQuery(this).val());"> 
lt;option>blue</option> 
      <optionselected="selected">clean</option> 
      <option>clear</option> 
      <option>dark</option> 
      <option>fancy</option> 
      <option>universal</option> 
  </select> 

Copy an existing option and place it under the last one or wherever you like inside the Select and rename it after your css class => filename.

  <select jQuery(this).val());">
         <option>blue</option>
            <optionselected="selected">clean</option>
            <option>clear</option>
            <option>dark</option>
            <option>fancy</option>
            <option>universal</option>
            <option>myownstyle</option>
        </select>

Save formDesigner.htm and start/restart Dreamweaver. Now try applying your new style!

Note: To be sure that your css file will fit to CSS Form Designer, please use one of the predefined css files as a template.

Note: Please, note that any extends and changes in previously mentioned files and folders may result in a fault of the extension so it is up to you to deside are you going to do this extending. Note also that folders AppData, Application Data and Library are hidden by default and you need to reveal them in order to access them. Also note that you must have Administrators rights to do so.

Give it a try and see what happens! I'd really appreciate your feedback on your results! If you have any questions just let me know!