Skip to Content

Changes for page ERDivaLook

Last modified by Ravi Mendis on 2010/09/10 01:14
From version 164.1
edited by Ravi Mendis
on 2009/04/23 10:23
Change comment: There is no comment for this version
To version 171.1
edited by Ravi Mendis
on 2009/04/27 02:10
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -6,9 +6,12 @@
6 6  * Semantically-rich or **tables-less**
7 7  * XHTML 1.0 strict compliant
8 8  * Sans images, inline styles or presentation attributes
9 -* Use a CSS **theme**
9 +
10 +They make use of:
11 +
12 +* A CSS **theme**
10 10  * Scriptaculous **effects**
11 -* Seemless use of **Ajax widgets**
14 +* **Ajax widgets**
12 12  
13 13  = Why Table-less Markup? =
14 14  
... ... @@ -42,9 +42,9 @@
42 42  
43 43  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 44  
45 -= Using ERDivaLook =
48 += How to use ERDivaLook =
46 46  
47 -=== Setting the D2W Page CSS ===
50 +=== How to set the CSS/Theme of a D2W Page ===
48 48  
49 49  Diva look introduces a new D2W key: **stylesheet**.
50 50  The CSS file computed by this key will be set as the stylesheet for the page.
... ... @@ -71,13 +71,19 @@
71 71  
72 72  {{/code}}
73 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.
77 +The CSS file //NeutralEditPage.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 75  
79 +{{note title="Note"}}
80 +
81 +*IE* has a limitation of a max. of 32 CSS files per page (and a depth of 3).
82 +
83 +{{/note}}
84 +
76 76  ===== 2. Image Replacement =====
77 77  
78 78  {{code}}
79 79  
80 -div#a form h1.edit {
89 +div#a h1.edit {
81 81   background: url(/WebObjects/Frameworks/JavaDirectToWeb.framework/WebServerResources/EditMetalBan.gif) no-repeat;
82 82   text-indent: -5000px;
83 83  }
... ... @@ -86,4 +86,10 @@
86 86  
87 87  Standard CSS image replacement applies.
88 88  
89 -Here, the edit page banner is being set. {{color value="red"}}{{div#a form h1.edit}}{{/color}} is an example of a **CSS selector**. All elements in a Diva look D2W page will begin with {{color value="red"}}{{div#a}}{{/color}}. The page title is a <h1> with a class //edit//, so the resulting CSS selector for that element would be {{color value="red"}}{{h1.edit}}{{/color}} or {{color value="red"}}{{div#a form h1.edit}}{{/color}} more specifically.
98 +Here, the edit page banner is being set. {{color value="red"}}{{div#a h1.edit}}{{/color}} is an example of a **CSS selector**. Diva D2W page content is nested inside a ##<div id="a">..</div>##. It's CSS selector is {{color value="red"}}{{div#a}}{{/color}}. The page title is marked up as ##<h1 class="edit">..</h1>##, so the resulting CSS selector for that element would be {{color value="red"}}{{h1.edit}}{{/color}} or more specifically {{color value="red"}}{{div#a h1.edit}}{{/color}}.
99 +
100 +{{tip title="Tip"}}
101 +
102 +All CSS selectors in a Diva D2W page begin with *{{div#a}}*.
103 +
104 +{{/tip}}