About Cascading Style Sheet Post-Upgrade Tasks

This topic describes post-upgrade configuration steps for Cascading Style Sheets (CSS). It contains the following information:

• "About Cascading Style Sheet Options"

• "Restoring the Cascading Style Sheet"

• "Reconfiguring the Cascading Style Sheet"

About Cascading Style Sheet Options

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:

  • Chapter 6, "Customizing Styles, Applets, Fields, and Controls"

  • Chapter 9, "Customizing Siebel Open UI for Siebel Mobile Disconnected"

• 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:

  • "Restoring the Cascading Style Sheet"

  • "Reconfiguring the Cascading Style Sheet"

Restoring the Cascading Style Sheet

This topic describes how to restore the CSS that was used before upgrading to Siebel Innovation Pack 2014.

To restore the CSS 

1. Locate the theme-base.css, theme-gray.css, and theme-tangerine.css from the pre-upgrade classes.

2. Open the theme-base.css file.

3. 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);
   }
   

4. Paste the code copied in Step 3 to the end of the theme-base.css.

5. Add the following new rules:

   .siebui-viz-buttonbar {
   float: right;
   }
   .vis-dropdown {
   float: left;
   }
   

6. Locate the following rule:

   .jstree-default li,
   .jstree-default ins {
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url(../images/smartScriptTreeLight.png);
   }
   

7. 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);
   }
   

8. Locate the following rule:

   .siebui-appletmenu {
    left: auto !important;
    top: 2px;
    max-height: 450px;
    overflow-x: hidden;
    overflow-y: auto;
   }
   

9. 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;
   }
   

10. Add the following rule:

    .ui-menubar-item {
     float: left;
     font-size:small;
    }
    

11. Save the theme-base.css file.

12. Open the theme-gray.css file.

13. 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);
    }
    

14. 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);
    }
    

15. Save the theme-gray.css file.

16. Open the theme-tangerine.css file.

17. Repeat Step 13 and Step 14 in the theme-tangerine.css file.

18. Save the theme-tangerine.css file.

Reconfiguring the Cascading Style Sheet

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 

1. Modify the CSS to use only Tab navigation or Tree navigation. For more information, see "Customizing Themes".

2. Exclude the Side Menu as a navigation option. For more information, see "Customizing Navigation Options".

3. Restore the theme-base.css, theme-gray.css, and theme-tangerine.css. For more information, see "Restoring the Cascading Style Sheet".

4. Retrieve the necessary jQuery files:

   1. Navigate to the following site:

      http://jqueryui.com/download/all/

   2. Download the following items:

      • jquery-ui-1.10.2.custom.css

      • redmond\images

   3. 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

5. Reactivate the theme that you used prior to upgrading to Siebel Innovation Pack 2014 or later. For more information about themes, see "Customizing Themes".

6. Verify your work:

   1. Log out of the client, and then log back into the client.

   2. Navigate to the User Preferences screen, then the Behavior view.

   3. From the Navigation Control drop-down menu, select Tab, and from the Theme drop-down menu, select Theme Gray.

   4. Log out of the client, and then log back into the client to verify that the Gray Tab Theme has been applied.