Hi,

I'm a big fan of having everything in my websites in exactly the same style. Is it possible to add custom items to the presets? Or can a custom design only be creatd bij editing the chosen style after it has been put an a page, ie edit the CSS-file in the styles Folder?

Kind regards, Patrick

Hello Patrick,

You are free to extend and change the predefined CSS Styles that are set with Form Designer. Those styles are an option. However you are able to put in your own css file.
To do so you need to add your css file with any images it uses to 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\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\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

styles folder is located in CSS Form Designer folder.
Be sure no to duplicate styles names.
So create your own folder in styles directory and name it shortly.
Insert your css file with all images that this style uses in newly created folder and name the css file with following convention:
form_yourstylename.css. Be sure that your style name is same as its folder. For example - ../CSS Form Designer/styles/blah/form_blah.css.
Now you need to extend the formDesigner.htm with your new style.
go to dialogs folder and open formDesigner.htm in DW. In Code view go to the top of the page if you are not there and after all <link> tags for css add new link to your css. In general copying one of exiting links and edit it will do the job with minimum risk of messing up the paths.
After that go to line 466 /line numbers may vary/ looking for a select input element that should look like :

          <select onchange="jQuery('form').attr('class', jQuery(this).val());">
        	<option>blue</option>
                <option selected="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.

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

Disclaimer 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.

Hi Miro,

Thanks very much for your extensive reply! I will give it a try. I understand that making these changes is at my own risk!

Kind regards, Patrick

Hi all,

Just wanted to let you know that adding a custom preceed is very easy with the steps as descriped above.
I only ran into one thing different from what was described. The location of formDesigner.htm (using CS4) could not be found at:

C:\Documents and Settings\CurrentUser\Application Data\Adobe\Dreamweaver version\Configuration\shared\DMXzone\CSS Form Designer\dialogs\formDesigner.htm

but at:

C:\Documents and Settings\CurrentUser\Application Data\Adobe\Dreamweaver version\en-US\Configuration\shared\DMXzone\CSS Form Designer\dialogs\formDesigner.htm

Kind regards, Patrick