How to set the Theme of a Diva Look app

Last modified by Ravi Mendis on 2010/01/17 18:01

How to set the CSS/Theme of a Diva Look app

Diva look introduces a new D2W key: stylesheet.
 The CSS file computed by this key can be used as the global stylesheet for the application in your D2W PageWrapper.

e.g:

LHS

key

RHS

session.theme = 'Simple'

stylesheet

Simple.css

A closer look at the CSS file...

1. CSS Imports

@import url("_Neutral.css");
@import url("ERDIVEditPage.css");
@import url("NeutralEditToManyFault.css");
@import url("NeutralEditToOneFault.css");
@import url("NeutralCalendarDateSelect.css");
@import url("NeutralAjaxAccordion.css");
@import url("NeutralEditToOneRelationship2.css");

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.

Note

IE has a limitation of a max. of 32 CSS imports per page (and at a depth of 3).

2. Image Replacement

div#a h1.edit {
background: url(/WebObjects/Frameworks/JavaDirectToWeb.framework/WebServerResources/EditMetalBan.gif) no-repeat;
text-indent: -5000px;
}

Standard CSS image replacement applies.

Here, the edit page banner is being set. div#a h1.edit 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 div#a. The page title is marked up as <h1 class="edit">..</h1>, so the resulting CSS selector for that element would be h1.edit or more specifically div#a h1.edit.

Tip

All CSS selectors in a Diva D2W page begin with div#a.