Using Custom Cascading Style Sheets

A cascading style sheet (CSS) provides a way to control the style of a Web page without changing its structure. When used properly, a CSS separates visual attributes such as color, margins, and fonts from the structure of the HTML document. Oracle HTML DB includes themes that contain templates that reference their own CSS. The style rules defined in each CSS for a particular theme also determine the way reports and regions display.

Topics:

Uploading Cascading Style Sheets
Referencing an Uploaded Cascading Style Sheet in the Page Template

Uploading Cascading Style Sheets

You upload cascading style sheets to your workspace using the Cascading Style Sheet (CSS) Repository. Uploaded cascading style sheets (CSS) are available to any application created in your workspace. The cascading style sheets are written to the file system, so you can reference them in your HTML source code.

To upload cascading style sheets to your workspace:

Navigate to the Workspace home page and click the Application Builder icon.
Select an application.
Click Shared Components.

The Shared Components page appears.
Under Files, select Cascading Style Sheets.

The CSS Repository appears.
To upload a new CSS, click Create and follow the on-screen instructions.
To edit an existing CSS, select the name.
To download an existing CSS, click the Download icon.

About the Cascading Style Sheets Page

Once you upload a CSS to the CSS Repository, you control how the page displays by making a selection from the View list. Available options include:

Icons (the default) displays each CSS as a large icon. To edit a CSS, click the appropriate icon.
Details displays each CSS as a line in a report. To edit a CSS, click the appropriate name.

Referencing an Uploaded Cascading Style Sheet in the Page Template

You can reference an uploaded cascading style sheets within the Header section of the page template. You use the Header section to enter the HTML that makes up the <HEAD> section of the HTML document.

To reference an uploaded cascading style sheets:

Navigate to the Workspace home page and click the Application Builder icon.
Select an application.
Click Shared Components.
Under User Interface, select Themes.

The Themes page appears.
From the Tasks list, select View Templates.
Select the name of the page template you want to edit.
The Header, use a <link> tag within the head section to reference the appropriate style sheet.

To reference an uploaded file that is associated with a specific application, you would use the substitution string #APP_IMAGES#. For example:
```
<html>
<head>
    <title>#TITLE#</title>
    #HEAD#
    <link rel="stylesheet" href="#APP_IMAGES#sample2.css" type="text/css">
</head>
...
```
To reference an uploaded file that is associated with a specific workspace, you would use the substitution string #WORKSPACE_IMAGES#. For example:
```
<html>
<head>
    <title>#TITLE#</title>
    #HEAD#
    <link rel="stylesheet" href="#WORKSPACE_IMAGES#sample3.css" type="text/css">
</head>
...
```