Dynamically Changing the Look and Feel
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:
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.