Pimp up you APEX application with dynamic CSS styling

I was describing how we added a custom CSS to our ApexNinjas main menu in an article called APEX Creating a horizontal menu from a SQL Report, but while working on the new version of our blogging platform (which will be released together with hte source code by the end of November) we stumbled upon a new and coll way to “pimp up” you APEX app with CSS stylesheets.

Picking up where we left off in the aforementioned article, applying custom CSS would require:

1. copying a CSS file in the APEX themes folder and referencing it directly from there.

or

2. uploading the CSS file in the application Shared Components -> Files: Cascading Stylesheets area and referencing it directly from the APEX repository.

The best solution, however, it to create your own CSS table and encapsulate all the page components into <div> regions.

1. Create a table for the CSS layouts

In your schema, create the CSS table:

CREATE TABLE "CSS" ("CSS_ID" NUMBER(10,0), "CSS_NAME" VARCHAR2(25), "CLOB_VAL" CLOB, "ACTIVE" VARCHAR2(1)); ALTER TABLE "CSS" ADD CONSTRAINT "CSS_PK" PRIMARY KEY ("CSS_ID") ENABLE; 

2. Create an APEX page to load up data in the CSS table

To make it more interactive, create an APEX page manage (insert/update/delete) the CSS data. Won’t go into details about how this is done, just create a Form + Report and let APEX handle all the DMLs. In the end, you would have a page where you could add/modify different CSS stylesheets in an editor and set one of them to the active CSS for the current application:

3. Create a procedure that downloads the CSS Clob data as a file

Now we have added one or more CSS entries in the CSS table, using an APEX form and report. To use this CSS we will need to download it as a file an reference it in the APEX page HTML header.

To do this, create a procedure that selects the active entry from the CSS table and downloads it:

create or replace PROCEDURE "CSS" AS v_clob clob; v_css blob; v_in Pls_Integer := 1; v_out Pls_Integer := 1; v_lang Pls_Integer := 0; v_warning Pls_Integer := 0; BEGIN select CLOB_VAL into v_clob from CSS where ACTIVE='Y'; dbms_lob.createtemporary(v_css,TRUE); DBMS_LOB.convertToBlob(v_css,v_clob,DBMS_lob.getlength(v_clob),v_in,v_out,DBMS_LOB.default_csid,v_lang,v_warning); owa_util.mime_header('text/plain'); wpg_docload.download_file(v_css); dbms_lob.freetemporary(v_css); END css;

For this procedure to be called from the web browser we must grant access to it to the PUBLIC user and add it the EPG list (if using Embedded PLSQL Gateway as an APEX web server):

1. Connected to your current schema execute:

grant execute on CSS to public; grant execute on CSS to anonymous; 

2. Connected as SYS, modify the APEX_040100.wwv_flow_epg_include_mod_local function:

create or replace function APEX_040100.wwv_flow_epg_include_mod_local( procedure_name in varchar2) return boolean is begin if upper(procedure_name) in ( 'YOURSCHEMA.CSS' ) then return TRUE; else return FALSE; end if; end wwv_flow_epg_include_mod_local; 

Now, from the web browser, you should be able to access the CSS procedure:

4. Load the CSS data in the APEX page Header

In the current APEX page, edit the page and go to the HTML Header and Body Attribute. In the HTML Header text area paste in the following code:

<link rel="stylesheet" href="./YOURSCHEMA.css" type="text/css" />

This will load the active CSS from the CSS table using the YOURSCHEMA.CSS procedure.

5. Customize APEX regions to make use of the CSS

Now, let’s say your CSS looks like this, having styles defined for headers and menu entries:

/*----------------------- HEADER -------------------*/ #header h1 { text-decoration: none; font-size: 14pt; font-weight: bold; } /*----------------------- MENU -------------------*/ #menu li { float: left; margin: 0; padding: 0; } #menu a { background: #333; color: #CCCCCC; display: block; float: left; margin: 0; padding: 8px 12px; text-decoration: none; } #menu a:hover { background: #336633; color: #fff; padding-bottom: 8px; }

In order for APEX to make use of the CSS, you must enable regions with <div> tags.

For example, if you have a Header region based on an SQL report with the following source, having the TITLE columns displayed as Standard Report Column, to make use of the HTML <h1> tag:

select '<h1>'||TITLE||'</h1>' as TITLE from V_SETTINGS; 

To enable the TITLE to be formated with the #header.h1 style we have previously defined, edit the report region Header and Footer section:

1. Add <div id=”header”> to the Region Header textarea.

2. Add </div> to the Region footer Area.

This will encapsulate the body of your SQL Report in the “header” div tag, applying the style defined in the CSS. You can basically encapsulate all the APEX page regions in <div> tags, encapsulate just some columns or items, applying custom CSS throughout all the APEX page.

Leave a Reply