Skip to Content

Changes for page ERDivaLook

Last modified by Ravi Mendis on 2010/09/10 01:14
From version 223.1
edited by Ravi Mendis
on 2009/04/27 02:45
Change comment: Factoring out How to embed D2WList
To version 225.1
edited by Ravi Mendis
on 2009/04/27 02:48
Change comment: Factoring out How to set theme

Summary

Details

Page properties
Content
... ... @@ -47,60 +47,4 @@
47 47  
48 48  = How to use ERDivaLook =
49 49  
50 -== How to set the CSS/Theme of a D2W Page ==
51 -
52 -Diva look introduces a new D2W key: **stylesheet**.
53 -The CSS file computed by this key will be set as the stylesheet for the page.
54 -
55 -e.g:
56 -
57 -|= LHS |= key |= RHS
58 -| task = 'edit' |**stylesheet**| //NeutralEditPage.css//
59 -| task = 'inspect' and session.theme = 'Simple' |**stylesheet**| //SimpleInspectPage.css// |
60 -
61 -==== A closer look at the CSS file... ====
62 -
63 -===== 1. CSS Imports =====
64 -
65 -{{code}}
66 -
67 -@import url("Neutral.css");
68 -@import url("ERDIVEditPage.css");
69 -@import url("NeutralEditToManyFault.css");
70 -@import url("NeutralEditToOneFault.css");
71 -@import url("NeutralCalendarDateSelect.css");
72 -@import url("NeutralAjaxAccordion.css");
73 -@import url("NeutralEditToOneRelationship2.css");
74 -
75 -{{/code}}
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.
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 -===== 2. Image Replacement =====
86 -
87 -{{code}}
88 -
89 -div#a h1.edit {
90 - background: url(/WebObjects/Frameworks/JavaDirectToWeb.framework/WebServerResources/EditMetalBan.gif) no-repeat;
91 - text-indent: -5000px;
92 -}
93 -
94 -{{/code}}
95 -
96 -Standard CSS image replacement applies.
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}}
105 -
106 106  {{children}}{{/children}}