Skip to Content

Changes for page ERDivaLook

Last modified by Ravi Mendis on 2010/09/10 01:14
From version 134.1
edited by Ravi Mendis
on 2009/04/23 04:07
Change comment: There is no comment for this version
To version 139.1
edited by Ravi Mendis
on 2009/04/23 09:43
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -7,6 +7,8 @@
7 7  * XHTML 1.0 strict compliant
8 8  * Sans images, inline styles or presentation attributes
9 9  * Use a CSS **theme**
10 +* Scriptaculous **effects**
11 +* Use of **Ajax widgets**
10 10  
11 11  = Why Table-less Markup? =
12 12  
... ... @@ -22,7 +22,7 @@
22 22  
23 23  === What is a Diva Theme? ===
24 24  
25 -In ERDivaLook, or Diva look for short, your application is not complete without a CSS theme.
27 +In ERDivaLook, or Diva for short, your application is not complete without a CSS theme.
26 26  All images, layout, colors and font information are maintained in the CSS.
27 27  
28 28  All your customizations to the look and layout of your application is also done in the CSS (and via D2W rules).
... ... @@ -32,7 +32,7 @@
32 32  The following are a sample of themes for Diva look. The first two are included in the Wonder/Examples/Ajax/ERDivaLookExample app.
33 33  
34 34  |= Neutral |= WebObjects |= Simple |= Organica
35 -| [[image:Picture 1.jpg||]] | [[image:Picture 2.jpg||]] | [[image:Picture 3.jpg||]] | [[image:slides_directtoweb_04.jpg.jpeg||]]
37 +| [[image:Picture 1.jpg||]] | [[image:Picture 2.jpg||]] | [[image:Picture 3.jpg||]] | [[image:slides_directtoweb_04.jpg.jpeg||]]
36 36  | D2W Neutral look reverse engineered
37 37  as a Diva Theme | D2W WebObjects look reverse engineered
38 38  as a Diva Theme | [[//Simple//>>http://www.csszengarden.com/?cssfile=/174/174.css&page=2]] theme from css Zen Garden | [[//Organica//>>http://www.csszengarden.com/?cssfile=/188/188.css&page=0]] theme from css Zen Garden
... ... @@ -39,3 +39,34 @@
39 39  | //Included in ERDivaLookExample// | //Included in ERDivaLookExample// | Shawn Chin [[mailto:schin@shawnchin.net]] | Eduardo Cesario [[mailto:design@criaturacreativa.com.ar]]
40 40  
41 41  The graphics designer Eduardo Cesario wrote up his experience of developing his //Organica// design for an early prototype of ERDivaLook on his [[blog>>http://www.organicacreativa.com/organica-creativa.php?area=directtoweb&lang=en]].
44 +
45 += Using ERDivaLook =
46 +
47 +=== Setting the D2W Page CSS ===
48 +
49 +Diva look introduces a new D2W key: **stylesheet**.
50 +The CSS file computed by this key will be set as the stylesheet for the page.
51 +
52 +e.g:
53 +
54 +|= LHS |= key |= RHS
55 +| task = 'edit' |**stylesheet**| //NeutralEditPage.css//
56 +| task = 'inspect' and session.theme = 'Simple' |**stylesheet**| //SimpleInspectPage.css// |
57 +
58 +==== A closer look at the CSS file... ====
59 +
60 +1. h5.CSS Imports
61 +
62 +{{code}}
63 +
64 +@import url("Neutral.css");
65 +@import url("ERDIVEditPage.css");
66 +@import url("NeutralEditToManyFault.css");
67 +@import url("NeutralEditToOneFault.css");
68 +@import url("NeutralCalendarDateSelect.css");
69 +@import url("NeutralAjaxAccordion.css");
70 +@import url("NeutralEditToOneRelationship2.css");
71 +
72 +{{/code}}
73 +
74 +The CSS imports a global CSS for the theme, //Neutral.css//, a generic one for the edit page //ERDIVEditPage.css// and CSS files for D2W components used on an edit page.