A cascading style sheet (CSS) provides a way to control the style of a web page without changing its structure. When used properly, CSS separates visual properties such as color, margins, and fonts from the structure of the HTML document. Oracle APEX includes themes containing templates to reference their own CSS. The style rules defined in each CSS for a particular theme also determine the way reports and regions display. CSS can be added to the APEX application inline, as CSS file(s), or through Theme Roller.
Depending on your requirements, you can add CSS to:
- Page
– styles mentioned in the CSS file will be restricted to a specific page
- Page
Template – CSS will be available to all the pages using that
specific Page Template
- User
Interface – CSS rules will be applied to the entire
application
- Individual Component – apply styles to individual components on an application page
To test the first three cases, you’ll upload a custom CSS file to style the login page of the Sample
Database Application. You can install this application
from App Gallery | Sample Apps. The CSS file
is named main.css in
my scenario and it contains the following rules. The first rule will be used to
create a rounded border and place an inset shadow around page regions. The second one adds a coral
background color to all application pages. The final two rules will be used to
color the column headings of the interactive report.
.region {
background:white;
border-radius:10px 10px 10px 10px;
box-shadow: inset 0px 0px 30px
#dfdbdf
}
.t-Body {background-color: coral}
#hColor {background-color: #f1476f;}
#hColor a{color: white;}
CSS allows you to specify your own selectors called "id" and "class". The id selector is used to specify a style for a single, unique element. It uses the id attribute of the HTML element and is defined with a "#" identifier. The class selector, on the other hand, is used to specify a style for a group of elements. This means you can set a particular style for many HTML elements with the same class. It uses the HTML class attribute and is defined with a "." identifier. In the current scenario, we are using a class named region.
Execute the following steps to upload the CSS file:
1. Go to Shared Components page and click Static Application Files in the Files section.
2. Click the Upload File button.
3. In the Upload Static Application File(s) dialog, click Choose Files, select main.css file from the book’s source code, and click Upload. The CSS file will be added to the static application files listing. Copy the Reference entry appearing on this page to your clipboard by selecting the text (#APP_IMAGES#main.css) and pressing Ctrl+C. The APP_IMAGES substitution string is used to reference uploaded images, JavaScript, and cascading style sheets that are specific to a given application and are not shared over many applications.
Page Level
As mentioned earlier, the Page level option enables you to apply styles mentioned in your CSS file to components of a specific page. In this exercise, you will apply the rule (mentioned in the main.css file) to a region on the login page of the Sample Database Application by adding the CSS file reference to the page definition.
1. Open the Login page (Page 101) in Page Designer and click the root node – Page 101: Login.
2. Scroll down to the CSS section and enter #APP_IMAGES#main.css in the File URLs property. The File URLs property accepts Cascading Style Sheet (CSS) file URLs loaded on this page. File URLs you enter here replace the #PAGE_CSS# substitution string in the page template. You can add multiple file references to this property by adding URLs on new lines.
3. Now, click the Sample Database Application Static Content region underneath. Scroll down to the Appearance section and enter region (the class defined in the main.css file) for the CSS Classes property.
4. Save your work and run the application. The
login page should resemble the following screenshot.
Page Template Level
In this exercise, you will make the CSS available to all application pages using a specific Page Template.
1. Go to Shared Components | Templates.
2. Click the Copy Template icon (in the Copy column) representing the Standard page template, as shown in the following figure, to make a copy of this template.
3. On the Copy
Template page, enter a name for the new template – for
example, Standard Copy. Click the Copy button to complete the process. The
new page template (Standard Copy) will appear just under the source template on
the Templates page.
4. Click the name of the new page template to
modify its definitions on the Edit Page
Template page. Scroll down to the Header
section, and enter <link
href="#APP_IMAGES#main.css" rel="stylesheet"
type="text/css"> under the #HEAD# substitution, as illustrated
in the following screenshot. Click Apply
Changes.
5. Go to Shared Components | Themes to make the new Standard Copy template your theme’s default page template.
6. Click the name of the current theme – in my
case, it is Universal Theme - 42.
7. On the Create/Edit Theme page, click the Component Defaults tab, set Page attribute to Standard Copy, and apply the change. The action sets the Standard Copy template as the default page template for your application. If a developer does not explicitly choose a template (in Page Designer) then the Application Express engine uses the template specified here. If you access the Templates page in Shared Components at this stage, you will see that the Standard Copy page template has been marked as the default template, as shown in the following figure. After this setting, every page you add to this application will use Standard Copy (shown as Theme Default) as the Page Template in Page Designer.
8. Open Page 1: Sample Database Application, click its root node and change Page Template from Standard to Standard Copy (or Theme Default). You will have to perform this step for all existing application pages (that are not already marked as Theme Default) to use the new template.
9. Click the Sample Database Application Static Content region, and enter region for the CSS Classes property. Repeat this step for the Dashboard Badge List region as well.
10. Save and run the page. The two regions on
the page will be transformed as shown in the After the section in the following figure.
In step 9, you explicitly specified the class (region from the CSS file) you wanted to apply to the two regions. Suppose that you want APEX to automatically apply a specific background color or a background image to all application pages without explicitly defining that color or image on every page. No problem! Here is the simple solution:
11. Go to Shared Components | Templates and click the Standard Copy page template.
12. Click the Cascading Style Sheet tab.
13. In the Inline section enter, .t-Body {background-color: coral} and click the Apply Changes button.
Run the application and test your work. All pages that are marked as either Theme Default or Standard Copy will be shown with the specified background color. To avoid duplication and to leverage browser caching of static files, you can put this code into your external CSS file.
User Interface
In this exercise, I’ll demonstrate how to apply CSS at the user interface level, which provides a centralized mechanism to apply your custom CSS rules to an entire application.
1. Open Page 3 (Products), and set Page Template to Standard. Run this page and observe that the page doesn't have any background color.
2. Go to Shared Components, and click User Interface Attributes.
3. Click the Edit Desktop icon (symbolized with a tiny pencil). Click the Cascading Style Sheets tab and append #APP_IMAGES#main.css to the existing text
in the File URLs box, as illustrated in the following
screenshot. This way, the CSS file (main.css) will be loaded on every
application page. Click Apply Changes.
4. Re-run Page 3. The page will now be
displayed with the specified background color. Not only this page, but all
application pages will be shown with the same background color, irrespective of
the applied page template.
Styling Individual Page Component
This section will demonstrate how to apply CSS rules to individual page components. In this exercise, you will set a background color for two mandatory fields on Page 7 in the Sample Database Application.
1. Open Page 7 (Customer Details) and select the Text Field item named P7_CUST_FIRST_NAME.
2. Scroll down to the Advanced section and enter style="background:red; color:white" for Custom Attributes property. Set the same value for P7_CUST_LAST_NAME field as well.
When you run
the page, the two fields will be presented in red color and the names will
appear in white, as shown in the following figure.
3. In Page Designer, on the same
Customer Details page, click the DELETE
button and set the Label attribute of
this button to <img src="#APP_IMAGES#delete.png" height="25" width="25"> to display a delete icon, as shown in the following figure. The
step assumes that you have already uploaded the icon file delete.png.
In the following short exercise, I'll show you how to apply foreground and background colors to an Interactive report's column headings.
1. Open the Sample Database Application, and click the Products menu to call the Products interactive report.
2. Right-click the Name column heading, and select Inspect from the context menu. A new window will be opened to the right of this report (as shown in Figure-9) displaying the id of this column in the table header (th) HTML tag.
3. APEX generates unique IDs for
IR columns, as highlighted in Figure-9, that we need to replace with some
meaningful names. So, open the source of this page in Page Designer. Expand Columns node under the Products region, and
click the PRODUCT_NAME column. In
the properties pane, scroll down to the Advanced
section, and enter hColor for the Static ID property. Save and run the page. Inspect the
Name column again, which should now display id="hColor" for the column's table heading.
4. Add the following code to the
main.css file or enter it in the Inline CSS property of the page:
#hColor {background-color: #f1476f;}
#hColor a{color: white;}
Apply these coloring rules to other IR columns by setting the Static ID attribute to hColor. Save and run the page to see the reflection.
