X

Achieving Digital Transformation with Oracle's Siebel CRM

Try Oracle Cloud Platform For Free

Customizing Theme Synergy in 15.1

Darshan Kumar

Starting Siebel Release 15.1 (IP2015 Patchset 1), theme 'SUI' has be renamed to theme 'Synergy'. Theme 'Synergy' implements the Cloud applications Dark Blue Theme, which is the default theme for Oracle Cloud R10 applications. There are 6 additional variants:

  • Crisp Green Theme
  • Bright Blue Theme
  • Dark Gray Theme
  • Light Blue Theme
  • Steel Gray Theme
  • Vanilla Theme

 

These additional themes are not available in Siebel CRM out-of-the-box, but you can add any of them with the steps below.

#_sweclient {
  background-color: #d7ebc5;
}
#_sweclient > div {
  background-color: #d7ebc5;
  background-image: url("../images/bkgd_watermarkfoliage.png");
}
.siebui-logo {
  background-image: url("../images/fuse-brand-oracle-black.png") !important;
}
.siebui-button-toolbar {
  background-image: url("../images/menu_ena.png") !important;
}
.siebui-toolbar-enable,
.siebui-search-tb-btn,
.siebui-msgbar {
  color: #38535a !important;
}
.siebui-nav-tab.siebui-view-navs .siebui-nav-tabScreen ul li a,
.siebui-nav-tab.siebui-view-navs .siebui-nav-tabScreen .siebui-active-navtab a {
  color: #147c80 !important;
}
.siebui-landing #_sweview,
.siebui-landing .siebui-applet {
  border-radius: 3px;
}
  • Create <install_dir>/eappweb/PUBLIC/enu/files/custom/theme-green-synergy.css with the following content:
  • Add a new LOV in Administration – Data -> List of values:
    • Type: OUI_THEME_SELECTION
    • Display Value: Green Synergy
    • Translate: False
    • Language-Independent Code:  SUI_THEME_GREEN_SYNERGY (Note: The SUI_THEME_ prefix is required)
    • Parent LIC: NAVIGATION_TAB
  • Clear cache from applet menu
  • Create a new Manifest Expression:
    • ​Name: Green Synergy Theme
    • Expression: LookupName (OUI_THEME_SELECTION, Preference ("Behavior", "DefaultTheme")) = "SUI_THEME_GREEN_SYNERGY"
  • Create a record in Manifest File
    • Name: files/custom/theme-green-synergy.css
  • Go to Manifest Administration and select a record in UI Objects with below details and make a copy of it and its child (Object Expression and Files)
    • Type: Application
    • Usage Type: Theme
    • Name: PLATFORM DEPENDENT
  • For the newly created UI Object, create a new record in Object Expression with below details and reorder the level reflect below
    • Create a new record in Object Expression with expression Green Synergy Theme and set the level as 2
    • Add files/custom/theme-green-synergy.css in Files applet with sequence 2
Theme Registration











 
  • Logoff and Login again
Follow the same steps and the CSS below to add the themes you need:
 
Theme UI & CSS
Bright Blue

Theme Synergy Crisp Green

 


 
#_sweclient {
  background-color: #6ec1ef;
}
#_sweclient > div {
  background-color: #6ec1ef;
  background-image: url("../images/bkgd_watermarkdandelions.png");
}
.siebui-toolbar-enable,
.siebui-search-tb-btn,
.siebui-msgbar {
  color: #0e4973 !important;
}
.siebui-nav-tab.siebui-view-navs .siebui-nav-tabScreen ul li a,
.siebui-nav-tab.siebui-view-navs .siebui-nav-tabScreen .siebui-active-navtab a {
  color: #0e4973 !important;
}
.siebui-landing #_sweview,
.siebui-landing .siebui-applet {
  border-radius: 0;
}
 
 
Crisp Green

Theme Synergy Crisp Green

 


 
#_sweclient {
  background-color: #d7ebc5;
}
#_sweclient > div {
  background-color: #d7ebc5;
  background-image: url("../images/bkgd_watermarkfoliage.png");
}
.siebui-logo {
  background-image: url("../images/fuse-brand-oracle-black.png") !important;
}
.siebui-button-toolbar {
  background-image: url("../images/menu_ena.png") !important;
}
.siebui-toolbar-enable,
.siebui-search-tb-btn,
.siebui-msgbar {
  color: #38535a !important;
}
.siebui-nav-tab.siebui-view-navs .siebui-nav-tabScreen ul li a,
.siebui-nav-tab.siebui-view-navs .siebui-nav-tabScreen .siebui-active-navtab a {
  color: #147c80 !important;
}
.siebui-landing #_sweview,
.siebui-landing .siebui-applet {
  border-radius: 3px;
}
 
 
Dark Gray

Theme Synergy Dark Gray

 


 
#_sweclient {
  background-color: #424345;
}
#_sweclient > div {
  background-color: #424345;
  background-image: url("../images/bkgd_watermarkdots.png");
  background-repeat: repeat !important;
}
.siebui-toolbar-enable,
.siebui-search-tb-btn,
.siebui-msgbar {
  color: #fff !important;
}
.siebui-nav-tab.siebui-view-navs .siebui-nav-tabScreen ul li a,
.siebui-nav-tab.siebui-view-navs .siebui-nav-tabScreen .siebui-active-navtab a {
  color: #fff !important;
}
.siebui-nav-tab.siebui-view-navs .siebui-nav-tabScreen ul li a:hover,
.siebui-nav-tab.siebui-view-navs .siebui-nav-tabScreen .siebui-active-navtab a:hover {
  color: #206398 !important;
}
.siebui-landing #_sweview,
.siebui-landing .siebui-applet {
  border-radius: 0;
}
 
 
 
Light Blue

Theme Synergy Light Blue


 
#_sweclient {
  background-color: #d2e9f9;
}
#_sweclient > div {
  background-color: #d2e9f9;
  background-image: url("../images/bkgd_watermarkdunes.png");
}
.siebui-logo {
  background-image: url("../images/fuse-brand-oracle-red.png") !important;
}
.siebui-button-toolbar {
  background-image: url("../images/menu_ena.png") !important;
}
.siebui-toolbar-enable,
.siebui-search-tb-btn,
.siebui-msgbar {
  color: #1b4d7f !important;
}
.siebui-nav-tab.siebui-view-navs .siebui-nav-tabScreen ul li a,
.siebui-nav-tab.siebui-view-navs .siebui-nav-tabScreen .siebui-active-navtab a {
  color: #2d5c8b !important;
}
.siebui-landing #_sweview,
.siebui-landing .siebui-applet {
  border-radius: 3px;
}
 
 
Steel Gray

Theme Synergy Steel Gray


 
#_sweclient {
  background-color: #4c6890;
}
#_sweclient > div {
  background-color: #4c6890;
  background-image: url("../images/bkgd_watermarkfacets.png");
  background-repeat: repeat !important;
}
.siebui-toolbar-enable,
.siebui-search-tb-btn,
.siebui-msgbar {
  color: #fff !important;
}
.siebui-nav-tab.siebui-view-navs .siebui-nav-tabScreen ul li a,
.siebui-nav-tab.siebui-view-navs .siebui-nav-tabScreen .siebui-active-navtab a {
  color: #fff !important;
}
.siebui-nav-tab.siebui-view-navs .siebui-nav-tabScreen ul li a:hover,
.siebui-nav-tab.siebui-view-navs .siebui-nav-tabScreen .siebui-active-navtab a:hover {
  color: #252525 !important;
}
 
 
 
Vanilla

Theme Synergy Vanilla


 
#_sweclient {
  background-color: #fafafa;
}
#_sweclient > div {
  background-color: #fafafa;
  background-image: url("../images/bkgd_watermarkdiagonals.png");
  background-repeat: repeat !important;
}
.siebui-logo {
  background-image: url("../images/fuse-brand-oracle-red.png") !important;
}
.siebui-button-toolbar {
  background-image: url("../images/menu_ena.png") !important;
}
.siebui-toolbar-enable,
.siebui-search-tb-btn,
.siebui-msgbar {
  color: #000 !important;
}
.siebui-nav-tab.siebui-view-navs .siebui-nav-tabScreen ul li a,
.siebui-nav-tab.siebui-view-navs .siebui-nav-tabScreen .siebui-active-navtab a {
  color: #000 !important;
}
.siebui-nav-tab.siebui-view-navs .siebui-nav-tabScreen ul li a:hover,
.siebui-nav-tab.siebui-view-navs .siebui-nav-tabScreen .siebui-active-navtab a:hover {
  color: #145c9e !important;
}
.siebui-landing #_sweview,
.siebui-landing .siebui-applet {
  border-radius: 3px;
}
 
 
 

Note: The above steps requires IP2015 Patchset 1 (15.1) or above 

 

Join the discussion

Comments ( 15 )
  • Gaetano Costa Tuesday, July 14, 2015

    Hi,

    the png are missing!

    Can you also upload the images?

    Thanks


  • Darshan Tuesday, July 14, 2015

    Missing images has been fixed. Thanks.


  • guest Wednesday, July 29, 2015

    Hello,

    I have made these changes by the suggested steps but for all the 7 new themes default SUI theme is getting loaded. Can you please help me where could be the issue ?

    The below are the steps performed by me

    1.Added LOV for the new themes

    2.Placed the css files in the custom folder under public \files

    3.created the Manifest files for all the files

    4.Created the manifest expression for all 7 themes.

    5.Created the manifest administration of type theme,and added the above 7 theme expression along with the vanilla 2 theme adn their respective files.

    6.After all changes are done , I cleared all the browsing data and tried with one of the new theme but always default theme is loading.

    Plese let me know what could be the issue ?

    Many Thanks

    Rishikesh Bhise


  • Rishikesh Bhise Wednesday, July 29, 2015

    Also can someone please share the image files with me , I am not able to find thoes in this blog?


  • Darshan Thursday, July 30, 2015

    Rishikesh, first off, pls confirm that you are using 15.1 (IP2015 Patchset 1).


  • Jack van Dijk Thursday, December 10, 2015

    When these css are placed in the files\custom directory they will not be able to load the images.

    For example this:

    background-image: url("../images/bkgd_watermarkdiagonals.png");

    need to be changed into:

    background-image: url("../../images/bkgd_watermarkdiagonals.png");


  • guest Tuesday, February 9, 2016

    Hello!

    I want to move view tabs under screen tabs. How I can do this?


  • Eswar Thursday, April 7, 2016

    Hi,

    We wanted to have the Application menu only for Admins and Developers. So, I created a Profile attribute as an manifest expression to restrict the application menu to show up for Admins and Developers which is working fine.

    However, when I place my 'XXX_theme-sui.css' custome file in custom folder, I see application menu but the home pages screen Icons/ Images are missing. If replaced the file to regular folder (Files/'XXX_theme-sui.css') , I see application menu as well as Icons/Images.

    Can you guide me whats missing?

    -Eswar


  • Ching Wu Thursday, April 14, 2016

    Hi Eswar,

    Images are defined in URLs with relative paths like below in CSS:

    background-image: url("../images/bkgd_watermarkdiagonals.png");

    If you are moving the CSS to the child "custom" folder, you'd need to modify the paths of all images to something like this:

    background-image: url("../../images/bkgd_watermarkdiagonals.png");

    Thanks,

    Ching


  • guest Wednesday, June 1, 2016

    Hi,

    Can we implement these custom themes in 8.1.1.14?

    Please let me know where I can download those PNG images.

    Regards

    Shaik


  • guest Friday, July 1, 2016

    Hi,

    We are upgrading to IP 15 Patchset 12 and I am trying to add custom themes.

    For adding the new themes I have followed all the steps mentioned above still the application looks distorted where the Home page doesn't look as the screenshot mentioned against the theme.

    I am getting the same result as Jeroen mentions in his blog.

    https://oracleimplementationadvisor.wordpress.com/tag/sui/

    Can you let me know what can go wrong?

    I am using Sample database for doing this PoC.

    Thanks,

    Arpit


  • Duncan Ford Thursday, August 4, 2016

    Hi Shaik,

    As mentioned at the bottom of the main article, these themes are only possible in IP15.1 and beyond. You cannot implement them in IP2014.

    The PNGs files are delivered in IP15 and can be found in <sweapp>/public/images. The files are all of the format grid*.png.

    Regards,

    Duncan


  • Duncan Ford Thursday, August 4, 2016

    Hi Arpit,

    I just obtained the same issue as seen on Jeroen's blog when I changed the theme and then hit the refresh button. However, if I logoff fully and then re-login, the issue goes away.

    It's impossible here within this blog to fully diagnose the issues you may be having. Ideally you should log an SR and get some technical help.

    Regards,

    Duncan


  • guest Monday, September 12, 2016

    Hi,

    We are currently using the Synergy theme and this article is really useful in modifying the theme.

    If you see the list applet(activities), the rows does not have any lines which shows the separation of each record. Is there any way we can display the lines between the records so that users can differentiate each record more clearly using the separator lines.

    Regards

    Tom


  • guest Monday, September 12, 2016

    Hi,

    We are currently using the Synergy theme and this article is really useful in modifying the theme.

    If you see the list applet(activities), the rows does not have any lines which shows the separation of each record. Is there any way we can display the lines between the records so that users can differentiate each record more clearly using the separator lines.

    Thanks.


Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.

Recent Content