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