How to set the Theme of a D2W Page
How to set the CSS/Theme of a D2W Page
Diva look introduces a new D2W key: stylesheet.
The CSS file computed by this key will be set as the stylesheet for the page.
e.g:
| LHS | key | RHS | |
|---|---|---|---|
| task = 'edit' | stylesheet | NeutralEditPage.css | |
| task = 'inspect' and session.theme = 'Simple' | stylesheet | SimpleInspectPage.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 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.
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. Unknown macro: color. Click on this message for details.
is an example of a CSS selector. Diva D2W page content is nested inside a <div id="a">..</div>. It's CSS selector is Unknown macro: color. Click on this message for details.
. The page title is marked up as <h1 class="edit">..</h1>, so the resulting CSS selector for that element would be Unknown macro: color. Click on this message for details.
or more specifically Unknown macro: color. Click on this message for details.
.