Skip to Content

Changes for page ERDivaLook

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

Summary

Details

Page properties
Content
... ... @@ -7,7 +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 -* Has elements of **Ajax** and Scriptaculous **effects**
10 +* Scriptaculous **effects**
11 +* Use of **Ajax widgets**
11 11  
12 12  = Why Table-less Markup? =
13 13  
... ... @@ -40,3 +40,49 @@
40 40  | //Included in ERDivaLookExample// | //Included in ERDivaLookExample// | Shawn Chin [[mailto:schin@shawnchin.net]] | Eduardo Cesario [[mailto:design@criaturacreativa.com.ar]]
41 41  
42 42  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. 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.
75 +
76 +===== 2. Image Replacement =====
77 +
78 +{{code}}
79 +
80 +div#a form h1.edit {
81 + background: url(/WebObjects/Frameworks/JavaDirectToWeb.framework/WebServerResources/EditMetalBan.gif) no-repeat;
82 + text-indent: -5000px;
83 +}
84 +
85 +{{/code}}
86 +
87 +Standard CSS image replacement applies.
88 +
89 +Here, the edit page banner is being set. ##div#a form h1.edit## is an example of a **CSS selector**. All elements in a Diva look D2W page will begin with ##div#a##. The page title is a <h1> with a class //edit//, so the resulting CSS selector for that element would be ##h1.edit## or ##div#a form h1.edit## more specifically.