Skip to Content
Last modified by Ravi Mendis on 2010/01/17 18:01
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 can be used as the global stylesheet for the application in your D2W PageWrapper.
5
6 e.g:
7
8 |=(((
9 LHS
10 )))|=(((
11 key
12 )))|=(((
13 RHS
14 )))
15 |(((
16 session.theme = 'Simple'
17 )))|(((
18 **stylesheet**
19 )))|(((
20 //Simple.css//
21 )))
22
23 ==== A closer look at the CSS file... ====
24
25 ===== 1. CSS Imports =====
26
27 {{code}}
28
29 @import url("_Neutral.css");
30 @import url("ERDIVEditPage.css");
31 @import url("NeutralEditToManyFault.css");
32 @import url("NeutralEditToOneFault.css");
33 @import url("NeutralCalendarDateSelect.css");
34 @import url("NeutralAjaxAccordion.css");
35 @import url("NeutralEditToOneRelationship2.css");
36
37 {{/code}}
38
39 The CSS file _//Neutral.css// imports a global CSS for the theme, a generic one for the edit page //ERDIVEditPage.css// and CSS files for D2W components used on an edit page.
40
41 {{note title="Note"}}
42 **IE** has a limitation of a max. of 32 CSS imports per page (and at a depth of 3).
43 {{/note}}
44
45 ===== 2. Image Replacement =====
46
47 {{code}}
48
49 div#a h1.edit {
50 background: url(/WebObjects/Frameworks/JavaDirectToWeb.framework/WebServerResources/EditMetalBan.gif) no-repeat;
51 text-indent: -5000px;
52 }
53
54 {{/code}}
55
56 Standard CSS image replacement applies.
57
58 Here, the edit page banner is being set. (% style="color: red;" %){{code language="none"}}div#a h1.edit{{/code}}(%%) is an example of a **CSS selector**. Diva D2W page content is nested inside a {{code language="none"}}<div id="a">..</div>{{/code}}. See: [[doc:documentation.Home.Frameworks.ERDivaLook.How to set the Theme of a Diva Look app.Layout of a Diva Look Page.WebHome]]. Therefore it's CSS selector is (% style="color: red;" %){{code language="none"}}div#a{{/code}}(%%). The page title is marked up as {{code language="none"}}<h1 class="edit">..</h1>{{/code}}, so the resulting CSS selector for that element would be (% style="color: red;" %){{code language="none"}}h1.edit{{/code}}(%%) or more specifically (% style="color: red;" %){{code language="none"}}div#a h1.edit{{/code}}(%%).
59
60 {{tip title="Tip"}}
61 All CSS selectors in a Diva D2W page begin with **{{code language="none"}}div#a{{/code}}**.
62 {{/tip}}