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
- 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; }
- Add the CSS files that the third-party uses:
- In Windows Explorer, navigate to the following folder:
INSTALL_DIR\eappweb\PUBLIC\language_code\build_number\scripts\3rdParty
- Add the following subfolder hierarchy to the
3rdParty folder:
\jcarousel\skins\tango\
- 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.
- Save the jquery.jcarousel.js file to the following folder:
INSTALL_DIR\eappweb\PUBLIC\language_code\build_number\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.
|