Skip to Content

Changes for page ERDivaLook

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

Summary

Details

Page properties
Content
... ... @@ -6,12 +6,9 @@
6 6  * Semantically-rich or **tables-less**
7 7  * XHTML 1.0 strict compliant
8 8  * Sans images, inline styles or presentation attributes
9 -
10 -They make use of:
11 -
12 -* A CSS **theme**
9 +* Use a CSS **theme**
13 13  * Scriptaculous **effects**
14 -* **Ajax widgets**
11 +* Use of **Ajax widgets**
15 15  
16 16  = Why Table-less Markup? =
17 17  
... ... @@ -45,9 +45,9 @@
45 45  
46 46  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]].
47 47  
48 -= How to use ERDivaLook =
45 += Using ERDivaLook =
49 49  
50 -=== How to set the CSS/Theme of a D2W Page ===
47 +=== Setting the D2W Page CSS ===
51 51  
52 52  Diva look introduces a new D2W key: **stylesheet**.
53 53  The CSS file computed by this key will be set as the stylesheet for the page.
... ... @@ -74,19 +74,13 @@
74 74  
75 75  {{/code}}
76 76  
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.
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.
78 78  
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 -
85 85  ===== 2. Image Replacement =====
86 86  
87 87  {{code}}
88 88  
89 -div#a h1.edit {
80 +div#a form h1.edit {
90 90   background: url(/WebObjects/Frameworks/JavaDirectToWeb.framework/WebServerResources/EditMetalBan.gif) no-repeat;
91 91   text-indent: -5000px;
92 92  }
... ... @@ -95,10 +95,4 @@
95 95  
96 96  Standard CSS image replacement applies.
97 97  
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}}
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 ##div#a##. 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.