Configuring Siebel Open UI > Post-Upgrade Configuration Tasks > About Cascading Style Sheet Post-Upgrade Tasks >

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.