Editing your theme using WebDAV in Dreamweaver - Revision history

Shawn: /* About WebDav */

2012-06-27T06:16:53Z

About WebDav

Shawn at 06:14, 27 June 2012

2012-06-27T06:14:55Z

Shawn: /* Setting up Dreamweaver to access your files */

2012-06-27T06:14:28Z

Setting up Dreamweaver to access your files

Admin: moved Editing your theme using WebDav in Dreamweaver to Editing your theme using WebDAV in Dreamweaver

2012-06-27T05:51:33Z

moved Editing your theme using WebDav in Dreamweaver to Editing your theme using WebDAV in Dreamweaver

Admin at 04:46, 27 June 2012

2012-06-27T04:46:41Z

Shawn at 02:45, 27 June 2012

2012-06-27T02:45:56Z

Shawn at 02:42, 27 June 2012

2012-06-27T02:42:22Z

Shawn: /* Setting up code highlighting */

2012-06-27T02:29:21Z

Setting up code highlighting

Shawn at 02:28, 27 June 2012

2012-06-27T02:28:45Z

Shawn at 02:27, 27 June 2012

2012-06-27T02:27:43Z

@@ Line 80: / Line 80: @@
 * blog.liquid (your main blog page)
-==== About WebDav  ====
+==== About WebDAV  ====
 WebDAV (World Wide Web Distributed Authoring and Versioning) is a standard for collaborative authoring on the Web. It is a set of extensions to the Hypertext Transfer Protocol (HTTP) that allows for collaborative editing and file management between users via the Internet.
 For more information, check the WebDAV website at http://www.webdav.org

@@ Line 27: / Line 27: @@
 * In the URL field, you must enter the address of your store (followed by "/dav/" in the following format. '''Note:''' You must specify ''https'' to ensure that you are using a secure session. <pre>https://yourstorename.spiffystores.com/dav/</pre><br><br>
 * Enter your '''username''' and '''password'''. Use your '''email address''' and the '''password''' that you use to log on to your Spiffy Store toolbox.<br><br>
-* In the Web URL field, enter the address of your store (http not https) For example<pre>http://fresh.spiffystores.com/</pre><br>
+* In the Web URL field, enter the address of your store (http not https) For example<pre>http://fresh.spiffystores.com/</pre><br><br>
 * Test the connection, and if successful, click save.  If not, check your settings.

@@ Line 7: / Line 7: @@
 From the top menu in Dreamweaver, go to "Site -> New Site..."
-[[Image:Webdav-dreamweaver-1.png]]
+<br>
 A dialog box will open, where you need to name your site, and set the location of where you would like to store your theme files on your computer.
-[[Image:Webdav-dreamweaver-2.png]]
+<br>
 When you've done this, click on the "Servers" section on the right, and then click the Plus Button to set up access to your theme files on the server
 [[Image:Webdav-dreamweaver-3.png]]
-* In the Server name field, you can enter anything,.  This is for your reference only.
+<br>
-* Enter your '''username''' and '''password'''. Use your '''email address''' and the '''password''' that you use to log on to your Spiffy Store toolbox.
+* In the Server name field, you can enter anything,.  This is for your reference only.<br><br>
-* In the Web URL field, enter the address of your store (http not https) For example,
+* For "Connect Using", select "WebDav".<br><br>
-<pre>http://fresh.spiffystores.com/</pre>
+* In the URL field, you must enter the address of your store (followed by "/dav/" in the following format. '''Note:''' You must specify ''https'' to ensure that you are using a secure session. <pre>https://yourstorename.spiffystores.com/dav/</pre><br><br>
 * Test the connection, and if successful, click save.  If not, check your settings.
 [[Image:Webdav-dreamweaver-4.png]]
 You should now be back on the Site Setup main screen.  Click save to save your settings.
-[[Image:Webdav-dreamweaver-5.png]]
+<br>
 You now need to connect to your site and download your themne files.  To do this, you should expand out the "Files" tab into a files window.  You do this by clicking the small "Expand" icon in the "Files" panel.
-[[Image:Webdav-dreamweaver-6.png]]
+<br>
 Now you should see a window displaying the server on one side, and your local files on the other. Click the "Connect to server" icon to see the files and folders on the server.
-[[Image:Webdav-dreamweaver-7.png]]
+<br>
 Download your files by highlighting all of the files on the remote server, and clicking the "Get files(s) from Remote Server" icon.  The files should take a couple of minutes to download, as Dreamweaver is a little slow doing this.
-[[Image:Webdav-dreamweaver-8.png]]
+<br>
 You can now open your files in Dreamweaver, make your edits, and then upload them to the server.  For information about getting code highlighting working in Dreamweaver, please follow the instructions below.

@@ Line 6: / Line 6: @@
 From the top menu in Dreamweaver, go to "Site -> New Site..."
 [[Image:Webdav-dreamweaver-1.png]]
-<br>
+A dialog box will open, where you need to name your site, and set the location of where you would like to store your theme files on your computer.
 [[Image:Webdav-dreamweaver-2.png]]
-<br>
+When you've done this, click on the "Servers" section on the right, and then click the Plus Button to set up access to your theme files on the server
 [[Image:Webdav-dreamweaver-3.png]]
-<br>
+* In the Server name field, you can enter anything,.  This is for your reference only.
 [[Image:Webdav-dreamweaver-4.png]]
-<br>
+You should now be back on the Site Setup main screen.  Click save to save your settings.
 [[Image:Webdav-dreamweaver-5.png]]
-<br>
+You now need to connect to your site and download your themne files.  To do this, you should expand out the "Files" tab into a files window.  You do this by clicking the small "Expand" icon in the "Files" panel.
 [[Image:Webdav-dreamweaver-6.png]]
-<br>
+Now you should see a window displaying the server on one side, and your local files on the other. Click the "Connect to server" icon to see the files and folders on the server.
 [[Image:Webdav-dreamweaver-7.png]]
-<br>
+Download your files by highlighting all of the files on the remote server, and clicking the "Get files(s) from Remote Server" icon.  The files should take a couple of minutes to download, as Dreamweaver is a little slow doing this.
 [[Image:Webdav-dreamweaver-8.png]]
 You can now open your files in Dreamweaver, make your edits, and then upload them to the server.  For information about getting code highlighting working in Dreamweaver, please follow the instructions below.
 == Setting up code highlighting and "Design View" in Dreamweaver ==
@@ Line 80: / Line 74: @@
 * page.liquid (normal pages)
 * blog.liquid (your main blog page)
 ==== About WebDav  ====

@@ Line 8: / Line 8: @@
 [[Image:Webdav-dreamweaver-1.png]]
 A dialog box will open, where you need to name your site, and set the location of where you would like to store your theme files on your computer.
@@ Line 13: / Line 15: @@
 [[Image:Webdav-dreamweaver-2.png]]
-When you've done this, click on the "Servers" section on the right
+<br>
 [[Image:Webdav-dreamweaver-3.png]]
-Click the Plus Button to set up access to your theme files on the server
+<br>
 * In the Server name field, you can enter anything,.  This is for your reference only.<br><br>
@@ Line 29: / Line 31: @@
 [[Image:Webdav-dreamweaver-4.png]]
 You should now be back on the Site Setup main screen.  Click save to save your settings.
 [[Image:Webdav-dreamweaver-5.png]]
 You now need to connect to your site and download your themne files.  To do this, you should expand out the "Files" tab into a files window.  You do this by clicking the small "Expand" icon in the "Files" panel.
 [[Image:Webdav-dreamweaver-6.png]]
 Now you should see a window displaying the server on one side, and your local files on the other. Click the "Connect to server" icon to see the files and folders on the server.
 [[Image:Webdav-dreamweaver-7.png]]
 Download your files by highlighting all of the files on the remote server, and clicking the "Get files(s) from Remote Server" icon.  The files should take a couple of minutes to download, as Dreamweaver is a little slow doing this.
 [[Image:Webdav-dreamweaver-8.png]]
 You can now open your files in Dreamweaver, make your edits, and then upload them to the server.  For information about getting code highlighting working in Dreamweaver, please follow the instructions below.
 == Setting up code highlighting and "Design View" in Dreamweaver ==

@@ Line 48: / Line 48: @@
 You can now open your files in Dreamweaver, make your edits, and then upload them to the server.  For information about getting code highlighting working in Dreamweaver, please follow the instructions below.
-== Setting up code highlighting ==
+== Setting up code highlighting and "Design View" in Dreamweaver ==
 Dreamweaver can view and edit the template files, but to be able to see the files in "Design view" in Dreamweaver, you need to add ".liquid" files to the list of files in the "html" section of the MMDocumentTypes.xml  file.

@@ Line 60: / Line 60: @@
 The theme.liquid file contains all of the layout information, and the other liquid files in the "templates folder make up each of the different types of pages in your site, such as...
-- index.liquid (home page)
+* index.liquid (home page)
-- collection.liquid (collection pages)
+* collection.liquid (collection pages)
-- product.liquid (product pages)
+* product.liquid (product pages)
-- cart.liquid (shopping cart page)
+* cart.liquid (shopping cart page)
-- page.liquid (normal pages)
+* page.liquid (normal pages)
-- blog.liquid (your main blog page)
+* blog.liquid (your main blog page)

← Older revision		Revision as of 02:27, 27 June 2012
Line 49:		Line 49:

	== Setting up code highlighting ==		== Setting up code highlighting ==
		+
		+	Dreamweaver can view and edit the template files, but to be able to see the files in "Design view" in Dreamweaver, you need to add ".liquid" files to the list of files in the "html" section of the MMDocumentTypes.xml file.
		+
		+	There is a tech note on the Adobe site about how to do this at http://kb2.adobe.com/cps/164/tn_16410.html
		+
		+	After you have done this, you download your theme, unzip it, and open one of the files. It should display just like a normal HTML file.
		+
		+	Liquid tags are special tags that are used in normal HTML. All of the the templates that make up your theme are just HTML with Liquid tags in them, so you should be able to edit any of the template files in any HTML editor.
		+
		+	The theme.liquid file contains all of the layout information, and the other liquid files in the "templates folder make up each of the different types of pages in your site, such as...
		+
		+	- index.liquid (home page)
		+	- collection.liquid (collection pages)
		+	- product.liquid (product pages)
		+	- cart.liquid (shopping cart page)
		+	- page.liquid (normal pages)
		+	- blog.liquid (your main blog page)
		+
		+
	<br><br><br><br>		<br><br><br><br>