Siebel Open UI theme is the most interesting part in Open UI training series. Without any srf change, we can build custom siebel theme just like Facebook/Gmail. In this tutorial, we have discussed about what is Siebel open ui theme, how to modify or create a new theme. For more information, visit our website http://www.techonestop.com/2014/07/siebel-open-ui-theme-training-tutorial.html. Follow 'Techonestop' on Facebook/Twitter/LinkedIn.

1. Siebel Open UI Theme
Presented by TechOneStop
Techonestop.com
In a vision to make TECHNOLOGY simple for u
Techonestop.com1

2. Objectives
techonestop.com2
1) Indentify CSS rules and files associated with open ui
elements
2) Edit style rules to modify layout
3) Create a custom open ui theme

3. Review: Cascading Style Sheet (CSS)
techonestop.com3
1) Collection of styling rules that determine how HTML element
will be displayed in UI
2) Reusable, one CSS file can be used in multiple web pages
3) Provides consistent look and feel through out the application
4) Easy to modify, update CSS rules only in one place and will be
referred in all web pages
5) CSS rules consist of one or more property value pairs
Generic CSS rules:
h1 {
color: blue;
font-style: Italic;
text-align: center;
}
Open UI Specific CSS rules:
.applicationMenu {
margin-left: 10px;
float: left;
}
.header-top {
float: right;
}

4. CSS file path location
techonestop.com4
• As-delivered Siebel Open UI CSS files are located under
SWEAppPUBLIC<lang>files folder in the Siebel installation
directory
• 3rd Party provided CSS files are located under
SWEAppPUBLIC<lang>files3rdParty folder in the Siebel
installation directory
• Place all custom CSS files under custom folder to avoid issues
during upgrade

5. Determine CSS rules
• Use Inspect Element functionality in the client browser to determine
which CSS rules are rendering the Open UI element
For example, In chrome browser, do right click on any element of open ui
and click on ‘Inspect Element’ option to see which CSS rules are applied
on that element
• Inspector displays the rules in the order of priority. When a property
appears in multiple rules, then the property value from the highest
priority rule is applied. The inspector element strikethroughs the text to
designate the properties that are not applied.
techonestop.com5

6. Styling rules with Browser Extensions
• Enhance the interactivity features of web pages
• Open UI css files use browser extension properties and values
- If the browser does not support the rules, it strikethroughs the rules
techonestop.com6

7. Siebel Open UI Theme
• Is a collection of CSS rules/files which determine the user interface for a
web application
- Specifies the color, font size and style, location of various ui elements
• Open UI as delivered comes with a small set of themes
• Allows user to select theme from user preferences
• Allows web developers to add custom open ui theme
• As delivered siebel open ui themes are characterized by
- Application primary color (Gray or tangerine)
- Location of navigation controls (top or tree structure)
techonestop.com7

8. How to change a theme
• Navigate to Tools > User Preferences > Behavior on browser client
and select Navigation Control
• Choose one of the available themes from ‘Theme’
• Logout and login again to see the new theme
- If required, clear browsing data of your browser
techonestop.com8

9. Specifying Themes in Siebel Open UI
• Themes are defined in theme.js file under
siebsrvrpublic<lang><build>SCRIPTSsiebel folder
• Use SiebelApp.ThemeManager.AddTheme function to define theme
SiebelApp.ThemeManager.addTheme(
"RED_TAB", {
css : {
red_tab_theme : "files/theme-red-tab.css",
}, objList : [] });
• Each css file, defied in theme has a login name and this name will be
used by siebel internal code to sequence the order in which files will
be loaded. Customers can define their own css file with custom
logical name in theme.js file
techonestop.com9

10. Customer created themes
• Customer can either modify the existing theme or create their own theme
• Custom themes are defined in theme.js under
siebsrvrpublic<lang><build>SCRIPTSsiebelcustom folder
- It preserves the customer modification during open ui upgrade
- Isolates customer created/modified themes from as delivered siebel
open ui theme
techonestop.com10

11. Modify an existing theme
1) Identify the styling rules
2) Modify rules inline and test it
3) Modify or Create the css file
4) Add the css file to the theme
5) Test the modified theme
1) Identify the styling rules:
• Locate the UI element on browser and do ‘Inspect Element’ to
identify the rules
• In Chrome/Firefox, do right click on the element and select ‘Inspect
Element’ option
techonestop.com11

12. Modify an existing theme (Cont)
2) Modify rules inline and test it:
• Identify the rules with desired properties
• Edit rules inline to see the effect immediately
- Allows developers to determine which properties need modification
3) Modify or Create the CSS file:
• To modify the existing CSS file
- Check the name from ‘Inspect’ tab on right hand corner
- Open the css file on any text editor and modify it
- As we have modified vanilla css file, directly go to step 5 to test changes
• To create new css file
- Copy/Paste entire set of matched rules into one new .css file
techonestop.com12

13. Modify an existing theme (Cont)
4) Add the file to the theme:
• In customtheme.js file, add the newly created .CSS file
SiebelApp.ThemeManager.addTheme(
"GRAY_TAB", {
css : {
red_tab_theme : "files/theme-red-tab.css",
}, objList : [] });
5) Test the modified theme:
• Clear the browser cache
• If necessary, select the theme from Tools > User Preferences >
Behavior
• Reload the Siebel Open UI application and verify all changes
• Do ‘inspect Element’ to verify that new css rules have been applied
techonestop.com13

14. Creating a Custom theme
1) Create the css file
2) Define the theme
3) Add the theme to the Theme List of Values
4) Verify the custom theme
1) Create the CSS file:
• If the new theme differs significantly from as-delivered Open UI
theme, create new style sheet file
Note: If the new theme slightly differs from as-delivered themes, then
copy the Open UI provided theme, modify it and place the .CSS file
under CUSTOM folder.
techonestop.com14

15. Creating a Custom theme (Cont)
2) Define the theme:
• In customtheme.js fie, add the new theme using
SiebelApp.ThemeManager.addTheme function
- Include all custom css theme files
- Include any existing theme files
techonestop.com15
SiebelApp.ThemeManager.addTheme(
“RED_TAB", {
css : {
sb_theme : "files/theme-base.css",
sc_theme : "files/theme-gray.css",
sn_theme : "files/theme-nav-tab.css",
sca_theme : "files/theme-calendar.css",
red_tab_theme : "files/theme-red-tab.css",
sd_theme : IE8inc
},
objList : [] });

16. Creating a Custom theme (Cont)
3) Add the theme to the Theme List of Values:
• To display the new theme under Tools >User Preferences >Behavior,
add the theme to the theme list of values
• Navigate to Administration-data> List of values and create new lov
- Type = OUI_THEME_SELECTION
- Display Value = Any value of user’s choice
- LIC = theme name as it is in theme.js
- Parent LIC = NAVIGATION_TAB or NAVIGATION_TREE
• Clear the cache
techonestop.com16

17. Creating a Custom theme (Cont)
4) Verify the custom theme
• Clear the browser cache
• Select the new theme from Tools > User Preferences > Behavior
• Reload the Siebel Open UI application and verify all changes
techonestop.com17

18. Course Highlights
• Siebel Open UI uses CSS files to define the look and feel of elements in
client interface
• Theme is a collection of CSS rules that determine the user interface of
Open UI Application
• Modify exiting theme by
- Updating the existing CSS rules
- Adding new css file to the theme
techonestop.com18

19. QnA
Do you have any questions / Doubts ?
Write it here
or
Follow ‘Techonestop’ on Facebook / Twitter / LinkedIn
or
Visit discussion forum on ‘www.techonestop.com’
*** www.techonestop.in is now www.techonestop.com
techonestop.com19

20. Thank You!!!
For more information, visit ‘www.techonestop.com’
eMail id: admin@techonestop.com
techonestop.com20