Configuring Siebel Open UI > Example of Customizing Siebel Open UI > Process of Customizing the Physical Renderer >

Modifying CSS Files to Support the Physical Renderer

This task is a step in Process of Customizing the Physical Renderer.

In this topic, you modify the CSS files so that they support the CSS classes that the physical renderer uses.

To modify CSS files to support the physical renderer

1. Open the CSS file, add the following code, and then save your changes:

   .siebui-list-recyclebin {
   margin : 0px;
   }

   .siebui-jcarousel-wrapper {
   position: relative;
   height: 450px;
   }

   .siebui-jcarousel {
   position: relative;
   overflow: hidden;
   height: 100% !important;
   margin: 5px;
   width : 80%;
   border: 10px solid #fff;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   -webkit-box-shadow: 0 0 2px #999;
   -moz-box-shadow: 0 0 2px #999;
   box-shadow: 0 0 2px #999;
   }

   .siebui-jcarousel ul {
   width: 98%;
   position: relative;
   list-style: none;
   margin: 0;
   padding: 0;
   }

   .siebui-jcarousel ul li {
   margin-bottom : 5px;
   }

   .siebui-jcarousel-prev,
   .siebui-jcarousel-next {
   transform: rotate(90deg);
   transform-origin: left top 0;
   float : left;
   position: absolute;
   width: 30px;
   height: 30px;
   text-align: center;
   background: #4E443C;
   color: #fff;
   text-decoration: none;
   text-shadow: 0 0 1px #000;
   font: 24px/27px Arial, sans-serif;
   -webkit-border-radius: 30px;
   -moz-border-radius: 30px;
   border-radius: 30px;
   -webkit-box-shadow: 0 0 2px #999;
   -moz-box-shadow: 0 0 2px #999;
   box-shadow: 0 0 2px #999;
   }

   .siebui-jcarousel-prev {
   top : 0px;
   left : 45%;
   }

   .siebui-jcarousel-next {
   top : 450px;
   left: 45%;
   }

   .siebui-jcarousel-prev:hover span,
   .siebui-jcarousel-next:hover span {
   display: block;
   }

   .siebui-jcarousel-prev.inactive,
   .siebui-jcarousel-next.inactive {
   opacity: .5;
   cursor: default;
   }

   div.siebui-carousel-col{
   display : block;
   }
   div.siebui-carousel-item{
   height : 75px;
   padding : 5px;
   border : 1px solid #acacac;
   text-align : center;
   padding-top: 20px;
   word-wrap : break-word;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   }

   a.siebui-citem-add{
   display : block;
   top : 2px;
   right : 2px;
   float : right;
   width : 16px;
   height : 16px;
   background: url(../images/plus.png) no-repeat center center;
   }

2. Add the CSS files that the third-party uses:
   1. In Windows Explorer, navigate to the following folder:

   INSTALL_DIR\applicationcontainer\webapps\siebel\scripts\3rdParty

   2. Add the following subfolder hierarchy to the 3rdParty folder:

   \jcarousel\skins\tango\

   3. Save the following files to the tango folder that you added in Step b:

   next-horizontal.png
   next-vertical.png
   prev-horizontal.png
   prev-vertical.png
   skin.css

   To get a copy of these files, see Article ID 1494998.1 on My Oracle Support. For more information about the CSS files and renderers that Siebel Open UI uses to render a list applet as a carousel, see Customizing List Applets to Render as Carousels.

3. Save the jquery.jcarousel.js file to the following folder:

   INSTALL_DIR\applicationcontainer\webapps\siebel\scripts\3rdParty

   Siebel Open UI uses this file to render a carousel. To get a copy of this file, see Article ID 1494998.1 on My Oracle Support.