Siebel CRM Configuring Siebel Open UI Siebel Innovation Pack 2015 E52417-01 |
|
Previous |
Next |
View PDF |
This topic describes post-upgrade configuration steps for Cascading Style Sheets (CSS). It contains the following information:
In Siebel Innovation Pack 2014 and later a user interface rendering called Responsive Web Design (RWD) is applied to your deployment. After upgrading from Siebel Innovation Pack 2013, you can do one of the following:
Adopt the new CSS introduced in Siebel Innovation Pack 2014. Doing so means that the UM flat design and other new UI features will be applied to your deployment. New or existing customizations can be achieved by overriding the appropriate rules in the theme-aurora.css
as described in the following two chapters:
Revert to the CSS and the customizations that were applied before upgrading to Siebel Innovation Pack 2014. Reverting to the previous version of the CSS means that the UI will behave like the UI in Siebel Innovation Pack 2013 or early. Consequently, the new features, such as the Side Menu and fluid grid will not be available.To revert to the previous CSS, follow the these instructions:
This topic describes how to restore the CSS that was used before upgrading to Siebel Innovation Pack 2014.
To restore the CSS
Locate the theme-base.css, theme-gray.css, and theme-tangerine.css from the pre-upgrade classes.
Open the theme-base.css file.
Copy following code for controls images:
.siebui-icon-date, .siebui-icon-datetime, .siebui-icon-dropdown, .siebui-icon-pick, .siebui-icon-detail, .siebui-icon-currency, .siebui-icon-mvg, .siebui-icon-calc { display: inline-block !important; margin: 0 0 0 -20px; cursor: pointer; vertical-align: middle; width: 16px; height: 16px; } .siebui-icon-date { background: url(../images/janna/icon_calendar_sm.gif); } .siebui-icon-datetime { background: url(../images/janna/icon_calendar_sm.gif); } .siebui-icon-dropdown { background: url(../images/janna/down.gif); } .siebui-icon-pick { background: url(../images/janna/pick.gif); } .siebui-icon-detail { background: url(../images/janna/pick.gif); } .siebui-icon-currency { background: url(../images/janna/icon_calculator_sm.gif); } .siebui-icon-mvg { background: url(../images/janna/mvg.gif); } .siebui-icon-calc { background: url(../images/janna/icon_calculator_sm.gif); } .mceGridField { margin-left: 6px; } .siebui-form-label { white-space: pre; } /* * flip switch */ .ui-switch { width: 78px; } .siebui-applet .siebui-collapsible .siebui-btn-icon-expanded { content: url(../images/ArrowDown.png); } .siebui-applet .siebui-collapsible .siebui-btn-icon-collapsed { content: url(../images/ArrowUp.png); }
Paste the code copied in Step 3 to the end of the theme-base.css.
Add the following new rules:
.siebui-viz-buttonbar { float: right; } .vis-dropdown { float: left; }
Locate the following rule:
.jstree-default li, .jstree-default ins { background-color: transparent; background-repeat: no-repeat; background-image: url(../images/smartScriptTreeLight.png); }
Replace the rule that you located in Step 6 with the following code:
.jstree-default li, .jstree-default i { background-color: transparent; background-repeat: no-repeat; background-image: url(../images/smartScriptTreeLight.png); }
Locate the following rule:
.siebui-appletmenu { left: auto !important; top: 2px; max-height: 450px; overflow-x: hidden; overflow-y: auto; }
Replace the rule that you located in Step 8 with the following code:
.siebui-appletmenu { /*left: auto !important; *Comment This*/ top: 2px; max-height: 450px; overflow-x: hidden; overflow-y: auto; }
Add the following rule:
.ui-menubar-item { float: left; font-size:small; }
Save the theme-base.css file.
Open the theme-gray.css file.
Locate the following rule:
div.Selected tr.AppletButtons, .siebui-catalog-search div.Selected .AppletButtons{ background: #e6f2f6; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U2ZjJmNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjYmUxZWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #e6f2f6 0%, #cbe1ed 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6f2f6), color-stop(100%,#cbe1ed)); background: -webkit-linear-gradient(top, #e6f2f6 0%,#cbe1ed 100%); background: -o-linear-gradient(top, #e6f2f6 0%,#cbe1ed 100%); background: -ms-linear-gradient(top, #e6f2f6 0%,#cbe1ed 100%); background: linear-gradient(to bottom, #e6f2f6 0%,#cbe1ed 100%); border-bottom: 1px solid #AAA; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); }
Replace the rule that you located in Step 13 with the following code:
div.Selected div.AppletButtons, .siebui-catalog-search div.Selected .AppletButtons{ background: #e6f2f6; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U2ZjJmNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjYmUxZWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #e6f2f6 0%, #cbe1ed 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6f2f6), color-stop(100%,#cbe1ed)); background: -webkit-linear-gradient(top, #e6f2f6 0%,#cbe1ed 100%); background: -o-linear-gradient(top, #e6f2f6 0%,#cbe1ed 100%); background: -ms-linear-gradient(top, #e6f2f6 0%,#cbe1ed 100%); background: linear-gradient(to bottom, #e6f2f6 0%,#cbe1ed 100%); border-bottom: 1px solid #AAA; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); }
Save the theme-gray.css file.
Open the theme-tangerine.css file.
Save the theme-tangerine.css file.
This topic describes how to reconfigure a Cascading Style Sheet (CSS) that was used in Siebel Innovation Pack 2013 for use in Siebel Innovation Pack 2014.
To reconfigure the cascading style sheet
Modify the CSS to use only Tab navigation or Tree navigation. For more information, see "Customizing Themes".
Exclude the Side Menu as a navigation option. For more information, see "Customizing Navigation Options".
Restore the theme-base.css, theme-gray.css, and theme-tangerine.css. For more information, see "Restoring the Cascading Style Sheet".
Retrieve the necessary jQuery files:
Navigate to the following site:
http://jqueryui.com/download/all/
Download the following items:
jquery-ui-1.10.2.custom.css
redmond\images
Move the contents of the files downloaded in Step b to the appropriate directories:
<eappweb_installdir>\eappweb\PUBLIC\language_code\build_number\SCRIPTS\3rdParty\jquery-ui\current\themes\redmond\jquery-ui-1.10.2.custom.css
<ses_installdir>\ses\siebsrvr\WEBMASTER\siebel_build\scripts\3rdParty\jquery-ui\current\themes\redmond\jquery-ui-1.10.2.custom.css
<eappweb_installdir>\eappweb\PUBLIC\language_code\build_number\SCRIPTS\3rdParty\jquery-ui\current\themes\redmond\images
<ses_installdir>\ses\siebsrvr\WEBMASTER\siebel_build\scripts\3rdParty\jquery-ui\current\themes\redmond\images
Reactivate the theme that you used prior to upgrading to Siebel Innovation Pack 2014 or later. For more information about themes, see "Customizing Themes".
Verify your work:
Log out of the client, and then log back into the client.
Navigate to the User Preferences screen, then the Behavior view.
From the Navigation Control drop-down menu, select Tab, and from the Theme drop-down menu, select Theme Gray.
Log out of the client, and then log back into the client to verify that the Gray Tab Theme has been applied.