Do you guys fed up with the default theme of Open UI ? Do your Client demands for a new theme for a user based CRM application ? If you ever visit this link: http://www.openuithemes.com/themes/ and thought of developing all these by yourself only ?
 |
| Default Theme |
Here is the solution. Change your application theme in 3 steps only.
1.) Edit custom Theme.js file to point your new CSS files.
2.) Register the custom Theme LOV
3.) Copy existing CSS files and create custom CSS files
And here we go….
Edit custom Theme.js file to point your new CSS files
Siebel application check custom folder first for any custom files (CSS/JS files). So, we change Theme.js file from PUBLIC/_language_/_build_/SCRIPTS/siebel folder to refer our new CSS files and copy this to custom folder on PUBLIC/_language_/_build_/SCRIPTS/siebel/custom.
In Theme.js file, remove all tabs except GRAY_TAB. You can change this tab name for convenience, suppose ALEX_TAB.
Register the custom Theme LOV
To enable end users to switch themes in the Behavior view of the User Preferences screen, we must “register” the our new theme.
Search in LOV-Administration for TYPE = OUI_THEME_SELECTION, you will find as:
As per my simple example, we want to create a new tab based theme, so we can copy the Gray Tab entry and modify it so that the Display Value is meaningful (like “ALEX Tab”) and the Language Independent Code matches exactly the name of our theme in the custom theme.js file.
After clicking the Clear Cache button, we can navigate to Tools / User Preferences / Behavior and run a first test. Let’s select “Tab” in the Navigation Control field and open the dropdown list for the Theme field. We should be able to select our new theme.
Save the changes and hit F5 to reload the page. You might see an error message instead of the Behavior applet, but should be able to continue to navigate normally and verify that everything looks…exactly the same way as before. Of course we haven’t implemented the changes in the custom CSS files yet.
Copy existing CSS files and create custom CSS files
Copy the existing CSS files and rename them so that the file names match the entries in the custom theme.js file. Now, create style code as per your requirements.
Thats all.
Thanks for subscribing to SimplySiebel.