Dynamically Changing the Look and Feel

Everyone sees things differently. Some people don’t like brown, others don’t like red, some people are colour blind, others are partially sighted. How can you cater for everyone’s needs and tastes? I don’t think you can, but we’re going to try our best by providing three choices of CSS file and allowing the user to choose which one they prefer. By using a little bit of Javascript we can even change the CSS file used simply by reloading the page.

First a note about CSS files. The themes in APEX consist of templates and CSS files. Within the templates images are used but this solution only affects the CSS file; it does not change the images used on a page. (If you want to see most of what can’t be changed follow the steps below and set the CSS file name to be one that doesn’t exist). This solution suits us as we’ll be using simple CSS and it is highly likely that our users will have their own CSS that they want to use. I’ve provided some further thoughts on how this solution could be improved and built upon at the end.

We’ve decided to store the CSS file a user has selected in a database table. You could simply store this on a form but it will be reset for each session. We’ve created a table called APEX_USERS which has a column called CSS_OPTION which is VARCHAR2(1). Once you have somewhere to store the CSS_OPTION, if your application doesn’t already have one, create a Page Zero. On this page create a new HTML region with no template and within this region a new hidden item called P0_CSS_OPTION. Set the source appropriately for where you hold the CSS file chosen. If it’s in a database table then you could use a SQL query as the source or if you are only holding this for the session then the source would be another item in your application.

Now navigate to your page template code in Shared Components > Templates. You will see in the Header section there are link tags which point to the CSS file used on the page. Each APEX page uses several CSS files so to identify the one we want to change we need to give it a title. Depending on the theme used you should modify the Header in the page template as shown below:
<link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_20/theme_3_1.css" type="text/css" title="themecss"/>
Note:- there are two CSS files referenced in the header, one is within comment tags for IE. Both need changing to have the same title.

Now on your Page Zero add a new HTML region with the following code:

<script type="text/javascript">

var i, cacheobj

for(i=0; (cacheobj=document.getElementsByTagName("link")[i]); i++) {

if(cacheobj.getAttribute("title").toLowerCase()=="themecss") {

cacheobj.href = '/i/themes/theme_20/custom1.css';

}

}

</script>

This code loops through all the link elements on the page and if it has a title of “themecss” then it changes the value to look at the custom1.css file. You will need to add a condition to this region so that it is only fired when P0_CSS_OPTION equals 1. You will then need to add a separate region for each CSS option you want to give the user, changing the CSS file used in the code and the condition on the region appropriately.

Now when the user selects a different CSS option the page is reloaded and P0_CSS_OPTION changes. The pages will automatically pick up the settings in the new CSS file.

As mentioned earlier this solution suits us, however it isn’t complete. You could build on this solution to have each custom CSS file in a separate directory and within that directory new image files. Then, on the HTML regions you’ve already added to your Page Zero, you could add Javascript code to loop round all the IMG elements and change the src to point to the directory appropriate for the CSS option selected. Even without this additional work this allows us to provide our own look and feel to an application, our customers to provide their look and feel and the user to select the option they prefer simply and easily.

Sara

Sara Blair is a freelance Oracle developer with over 10 years Oracle experience. She has been working with Oracle APEX for nearly 4 years since htmldb 1.5, and is available to hire through Silvercore Solutions.

Comments cannot be submitted.