Skip to Content
Version 25.1 by Ravi Mendis on 2009/06/11 08:35
Show last authors
1 == How to set the CSS/Theme of a D2W Page ==
2
3 Diva look introduces a new D2W key: **stylesheet**.
4 The CSS file computed by this key will be set as the stylesheet for the page.
5
6 e.g:
7
8 |= LHS |= key |= RHS
9 | task = 'edit' |**stylesheet**| //NeutralEditPage.css//
10 | task = 'inspect' and session.theme = 'Simple' |**stylesheet**| //SimpleInspectPage.css// |
11
12 ==== A closer look at the CSS file... ====
13
14 ===== 1. CSS Imports =====
15
16 {{code}}
17
18 @import url("Neutral.css");
19 @import url("ERDIVEditPage.css");
20 @import url("NeutralEditToManyFault.css");
21 @import url("NeutralEditToOneFault.css");
22 @import url("NeutralCalendarDateSelect.css");
23 @import url("NeutralAjaxAccordion.css");
24 @import url("NeutralEditToOneRelationship2.css");
25
26 {{/code}}
27
28 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.
29
30 {{note title="Note"}}
31
32 *IE* has a limitation of a max. of 32 CSS files per page (and a depth of 3).
33
34 {{/note}}
35
36 ===== 2. Image Replacement =====
37
38 {{code}}
39
40 div#a h1.edit {
41 background: url(/WebObjects/Frameworks/JavaDirectToWeb.framework/WebServerResources/EditMetalBan.gif) no-repeat;
42 text-indent: -5000px;
43 }
44
45 {{/code}}
46
47 Standard CSS image replacement applies.
48
49 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>##. See: [[Layout of a Diva Look Page]]. Therefore 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}}.
50
51 {{tip title="Tip"}}
52
53 All CSS selectors in a Diva D2W page begin with *{{div#a}}*.
54
55 {{/tip}}