Converting a CSS site to a Spry Media Site

Thursday, June 5, 2008

1. start the project with source template folder and spry_example folder.

2. create a target folder, and copy all template files to the target folder; and name the target html file as index.html.

3. rearrange the target files as in the spry_example folder:html on top level, and sort the rest of files into css, js, images, and xml folders. (a) if the original files were moved to a different directory, make sure to update all references inside the file.

4. copy spry_example/css/spry_style.css to target/css/spry_style.css,

5. add <link href="css/spry_style.css" rel="stylesheet" type="text/css"> after the last css reference, normally before the </header> tag

6. make the following files are copied over:
(a) spry_example/xml/ to target/xml/
(b) spry_example/images/4xml/ to target/images/4xml/
(c) spry_example/images/4thumbs/ to target/images/4thumbs/

7. follow the Lynda DWCS3 Beyond 3-8 to structure the div for both Data Set and Accordion Widget.
(a) select the outer most tag covers the outer most area that the dataset control is to be placed.
(b) insert the layout div tag, as id="ds_control",
(c) click on "New CSS",
(d) define in the spry_style.css, and
(e) edit the appropriate width property, inside the category box,
(f) do the same for "widget_display", as in step b to step e

8. follow the LDWCS3B 5-2 to 5-5, 7. Check the SpryAssets folder, make sure all files are accounted for, sometimes DWCS3 DOES NOT copy all the necessary files to the SpryAssets folder

9. preview to make sure all previous steps are done correctly

10. add effects to the div tag that you like, by following the LDWCS3B 5-11 for effects

Reference Files