How to-configure-dreamweaver-for-creating-drupal-theme
1. How To Configure Dreamweaver For Creating Drupal Theme?
Dreamweaver software from Adobe has been helpful in handling your CSS, template
and PHP. It also offers grammatical previews in some configurations with PHPTAL
and XTemplate.
In this post, we will walk you through the step-by-step process of configuring Dreamweaver for
creating Drupal Theme.
Make sure to set up locally the Drupal 7 so you can edit it in Dreamweaver CS6. To get started
with the configuration, you need to have these three important things:
1. DreamweaverCS6
2. XAMPP or MAMPP or WAMPP running on your personal computer
3. Drupal 7 or higher version running on your personal computer
Note: Though this tutorial is localized for Dreamweaver CS6, it functions similarly to CS4, CS5,
and CS5.5.
Setting up Drupal in Dreamweaver
Setting up Drupal server is simple and easy as common CMS systems are used along
the process. However, instances happen that you will get error message caused by
Dreamweaver bug. It’s fine. If you have done and accomplished these bugs and
issues, you are ready to design your customized themes.
Step 1. Go to your Dreamweaver CS6 and Select site, then New Site. This is for the setup of
your Drupal site. A Site setup window will appear in which you have to type in your preferred
server name. Whatever you like will do.
2. You will be asked of the local site folder destination. Select where your folder resides. Select
htdocs folder if the XAMPP server is exclusive for your Drupal server use. If ever you are
working on several sites, possible that your folder is htdocs sub folder.
Don’t forget to save.
Step 2. On the left of the Site setup window, click on the servers tab and select add new server
button.
Setup the “localhost” as server name. And set “Local/Network” under Connect Using. Once
done, 2 fill spaces are left and the rest would disappear. See photo below.
You will be again asked of the server folder. Select the server file folder similar with the folder
you selected on Step 1.
On the Web URL: Put http://localhost/ if the site isn’t installed as a sub- folder. If installed inside
the htdocs folder, put http://localhost/drupal/ in the field.
Step 3. Select the advanced tab on top of the pop out box and select PHP/MYSQL for the Server
Mode under the Testing Server.
Click save.
3. Step 4. Your server is now listed. Tick on the box under the Testing and make sure to untick the
box under remote. Click save and Dreamweaver will process. When done, the File panel will
appear with all the files from your Drupal server.
Click and open on the index.php. You will be asked to discover all related files. To discover,
click “discover and select “yes”. This is the step where most people get certain error message.
4. Let’s go to the live view. If ever you get 404 error message, remove the /index.php from your
web. See below.
The address http://localhost/drupal/ should remain. Once you reload the page, your page will
appear. Don’t mind the error message as it’s not really an error but a sort of trap during the
process.
You can now navigate, edit, and design your Drupal site inside the Dreamweaver.
Designers and developers can easily write module, install profiles, module install schema files,
template files, theme engines, and .info files.
Dreamweaver Configuration Tips
Use tabs as the default code preference rather than spaces. To edit this, follow below steps:
1. Locate the “Code Format” category by choosing Edit> Preferences
2. Tick the box beside “indent option and specify 2 “spaces.”
3. Set 2 for the “Tab size”
4. Save
If your code uses tabs instead of spaces, you can easily convert this through below steps:
1. Select all the codes. Or use the shortcute (CTRL+A)
5. 2. Right click your mouse and click on “Selection”
3. Select “Choose Tabs to spaces”
People have difficulty to figure out how to edit the coloring scheme. Change it through the
following steps below:
1.Go to Preference Page
2. Search for the PHP document type
3. Select on the Edit Coloring Scheme
4. Check the options and choose a higher contrast color for the PHP Script Bracket.
Choose dark blue or dark green not black.
Drupal coding standards don’t require PHP ending tag “?>” however, other
Dreamweaver demands for it. It is possible to develop the ending tag but make sure to
eliminate it before uploading, testing, or committing.
Remember to try your Dreamweaver as early as possible because the “Apply source formatting
command for PHP code of your Dreamweaver might not be on your standard.
Manual Configuration of Dreamweaver
You can also manually configure your Dreamweaver following these steps:
1. Go to Dreamweaver CS3 Edit Menu, then preferences.
2. Select “Open in Code View” in the File Types/ Editor Section.
3. Add the following extensions under Extensions.txt and MMDocumentTypes.xml
In extensions.txt
Find the line ending in
“ : All Documents”
Once you find it, you can already include the following:
TAL,XTMPL,MODULE,THEME,ENGINE,INFO,INC,INSTALL
If a line ends in : HTML Files, you can include TAL,XTMPL and if a line ends in : PHP
files, include MODULE,THEME,ENGINE,INFO,INC,INSTALL
6. In MMDocumentTypes.xml
You can also include tal and xtmpl file types to the file type descriptions. For instance,
documenttype id="HTML” can be changed to:
<documenttype id="HTML" internaltype="HTML"
winfileextension="htm,html,shtml,shtm,stm,tpl,lasso,xhtml,tal,xtmpl"
macfileextension="htm,html,shtml,shtm,tpl,lasso,xhtml,tal,xtmpl" file="Default.html"
writebyteordermark="false">
Do not forget to add . module, .theme, .engine to the perfect section. See below:
<documenttype id="PHP_MySQL" servermodel="PHP MySQL" internaltype="Dynamic"
winfileextension="php,php3,php4,php5,theme,module,engine,inc"
macfileextension="php,php3,php4,php5,theme,module,engine,inc" file="Default.php"
writebyteordermark="false">
Edit your website’s local copy at Dreamweaver.
If you are using Mac OS X, your extionsion.txt is found in
Macintosh HD/Users/{Your User Name}/Library/Application Support/Adobe/Dreamweaver
9/Configuration/
The MMD DocumentTypes.xml is found in
Macintosh HD/Applications/Dreamweaver CS3/configuration/DocumentTypes/
If ever you need to change the file owner, command click +Get Info, Owner or edit it in
terminal:
sudo chmod 777 MMDocumentTypes.xml
Now that you have successfully configured your Dreamweaver for creating
Drupal Theme, start designing your template whatever way you like
