Skip Headers
Oracle® Fusion Middleware User Interface Customization Guide for Oracle WebCenter Interaction
10g Release 4 (10.3.3.0.0)
Part Number E14110-03
Go to Documentation Home
Home		 Go to Table of Contents
Contents		 Go to Feedback page
Contact Us
Go to previous page
Previous		 Go to next page
Next
View PDF

4 Using Adaptive Styles (CSS Customization)

Oracle WebCenter Interaction includes a UI customization framework based on Adaptive Page Layouts. If you are using Adaptive Page Layouts in your portal implementation, additional UI customization options are available through the portal CSS file. This chapter provides details on the types of CSS elements available, examples of customizing page and portlet style and layout, and information on creating localized stylesheets.

All customizations are made in the mainstyle.css file located in the %PT_HOME%\ptimages\imageserver\plumtree\common\private\css\ folder on the portal image service. The portal CSS template file follows standard CSS syntax rules. For details on CSS, see http://www.w3.org/Style/CSS/.

Note:

If you are not using Adaptive Page Layouts, you can still customize the portal page layout using CSS; see Chapter 5, "Customizing Portal Layout Using CSS - Legacy User Interface".

For details on Adaptive Page Layouts, see Chapter 3, "Using Adaptive Page Layouts" and the Administrator Guide for Oracle WebCenter Interaction.

Adaptive Styles Base Page Elements

Base page elements control style and layout the basic part of the portal page, including the action bar and banner. This is not a complete list; for all available elements, see the mainstyle.css file.

Element Page Component Example

body

The main body of the page (any text-based content not inside another element).

 
body { 
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size:100%;
        color: #FFFFFF; 
        margin: 0px;
}

a:hover

Links in the main body of the page on mouse-over.

 
a:hover {
        text-decoration:underline;
}

#ali-actionbar

The action bar at the top of the page.

 
#ali-actionbar {
        width:100%;
        height:22px;
        background-color: #0A2F66;
        background-image: url(../img/banner_action_bkg.jpg);
        background-repeat: repeat-x;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        min-width:980px;
}

#ali-banner

The main content in the portal banner. This area usually contains company branding, which can include an image referenced in the background-image: url parameter.

 
#ali-banner {
        width:100%;
    height:80px;
    background-color: #1D54A6;
    background-image: url(../img/banner_bkg.jpg);
    background-repeat: repeat-x;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    min-width:980px;
}

#ali-bannerWelcome

The welcome text displayed in the portal banner.

 
#ali-bannerWelcome {
        float:left;
    background:none;
    color:#B2D8FF;
    font-size:.8em;
    letter-spacing:1px;
    padding:6px 4px 0px 12px;
}

#ali-bannerNav

The navigation section of the portal banner.

 
#ali-bannerNav {
        float:right;
        background:none;
        color:#A6CFF6;
        font-size:.8em;
        letter-spacing:1px;
        padding:6px 12px 4px 4px;
        text-align:right;
}

#ali-bannerLogo

The logo in the portal banner.

 
#ali-bannerLogo { 
        clear:left;
        float:left;
        padding:10px 10px 0px 14px;
}

#ali-footer

The portal page footer.

 
#ali-footer {
        clear:both;
        width:100%;
        height:22px;
        background-image:url(../img/footer_bkg.gif);
        background-repeat:repeat-x;
        color:#FFFFFF;
        font-family:Arial, Helvetica, sans-serif;
        font-size:.7em;
        letter-spacing:1px;
        text-align:center;
        margin-top:48px;
        padding:4px 0 0 0;
        min-width:980px;
}

Adaptive Styles Navigation Elements

Navigation elements control style and layout for the navigation section of the portal page, including the menus and breadcrumbs. This is not a complete list; for all available elements, see the mainstyle.css file.

Note: Parameters marked "!important" are related to drop-down lists within navigation elements. These paramaters can be customized, but must not be removed; eliminating them will cause the drop-downs either to not work or to distort.

Element Navigation Component Example

#ali-mainNav

The main navigation section of the portal page.

 
#ali-mainNav {
        clear:left;
        float:left;
        width:100%;
        height:30px;
        background-color:#3068CF;
        background-image:url(../img/main_nav_tab.gif);
        background-repeat:repeat-x;
        border-bottom:solid 1px #5083CB;
        letter-spacing: 1px;
        min-width:980px;
}

#ali-nav

All lists within navigation sections in the portal page.

 
#ali-nav, #ali-nav ul {
        padding: 0;
        margin: 0;
        list-style: none;
        line-height: 1;
}

a.ali-navmenu

The portal navigation menu.

 
a.ali-navmenu {
        color:#385ABD !important;
        width:170px !important;
        background-color:#F1F5F9 !important;
        border-bottom:solid 1px #146BC5;
        font-size:1.15em;
}

a.ali-nav-actions

A separate style for items in the portal navigation menu that are actions, as opposed to links to pages/sections on the portal. Sets a different background color for these items in the menu to offer a clear distinction between menu navigation links and action links.

 
a.ali-nav-actions {
        color:#2B49AC !important;
        width:170px !important;
        background-color:#C9D4E9 !important;
        border-bottom:solid 1px #146BC5;
        font-size:1.15em;
}

#ali-secondNavBar

The second-level navigation bar is used on the User Profile page and community pages. A second bar appears below the main navigation bar in a different color and is mainly used to list pages within a community.

 
#ali-secondNavBar {
        clear:both;
    float:left;
    width:100%;
    padding:0;
    margin:0 0 -21px 0;
    background-image:url(../img/nav_2nd_pages.gif);
    background-repeat:repeat-x;
    letter-spacing:0;
    font:bold .725em Helvetica;
    min-width:980px;
}

#ali-secondPages

The list of secondary pages in a community or other sections of the portal that use a second level of navigation.

 
#ali-secondPages {
        float:left;
    color:#51617a;
    background-color:none;
    width:80%;
}

#ali-secondSub

The drop-down menu for pages within a community (sub-communities).

 
#ali-secondSub {
        float:right;
    padding:0;
    margin:0;
    background-image:url(../img/nav_2nd_sub.gif);
    background-repeat:repeat-x;
    border-bottom:solid 1px #82A8F3;
    border-left:solid 1px #82A8F3;
}

#ali-secondNav

The list of links in the sub-community drop-down menu.

 
#ali-secondNav, #ali-secondNav ul { 
        padding: 0;
        margin: 0; 
        list-style: none;
}

a.ali-secondMenu

The link color and background color for the sub-community drop-down menu.

 
a.ali-secondMenu {
        color:#4467CB;
        font:bold 8pt Arial, Helvetica, sans-serif;
        width:161px;
        background-color:#F1F6FF;
        border-bottom:solid 1px #83A1D8;
}

#ali-community-name

The look and placement of the community (or home page) name for the second navigation bar.

 
#ali-community-name {
    position:relative;
    left:-40px;
    background-image:url(../img/nav_2nd_home.gif);
    background-repeat:repeat-x;
    border-right:solid 1px #82A8F3;
    letter-spacing:1px;
    color:#5374A1;
    padding:8px 12px 6px 12px;
        margin-right:-3px;
}

#ali-breadcrumb

The breadcrumb list displayed at the top of the portal page content section.

 
#ali-breadcrumb {
        float:left;
        margin:4px 0 0 12px;
        padding:0;
        color:#888888;
        padding:0;
        font-family:Helvetica, Arial, sans-serif;
        font-size:.7em;
        letter-spacing:1px;
}

Adaptive Styles Search Elements

Search elements control style and layout for the search components on the portal page, including search forms and the search browse page. This is not a complete list; for all available elements, see the mainstyle.css file.

Element Search Component Example

#ali-bannerSearch

The basic (banner) search form in the portal banner.

 
#ali-bannerSearch {
        clear:right;
    float:right;
    position:relative;
    width:400px;
    padding: 18px 24px 0px 24px;
}

#ali-searchAdvanced

The div below the banner search box that contains the advanced search text link.

 
#ali-searchAdvanced {
    clear:right;
    float:right;
    width:320px;
    margin:0 0 0 0;
    padding:0 90px 0 0;
}

input.ali-searchBox

The search input box in the search form. Applies to the input box itself only when it appears in the banner.

 
input.ali-searchBox {
        color:#999999;
        border:outset 1px;
        padding: 1px;
}

input.ali-searchButton

The search button in the search form. Applies to the search button in the banner only.

 
input.ali-searchButton {
        background-image:url(../img/button_search_gradient.gif);
        background-repeat:repeat-x;
        border:outset 0px;
        padding:2px 6px;
        margin-left:4px;
        color:#1A48A4;
        font-size:.8em;
}

input[type="button"]:hover

The search button on mouse-over. Applies to the search button in the banner.

 
input[type="button"]:hover {
        color:#FF6000;
}

#ali-search-modifier-container

The search form on the search results/browse page.

 
#ali-search-modifier-container {
        clear:both;
    float:left;
    width:99%;
    margin:6px 0 0 0;
    padding:0;
    min-width:980px;
}

#ali-search-results

The search results section on the search browse page.

 
#ali-search-results {
    clear:both;
    float:left;
    width:78%;
    min-width:625px;
    margin:12px 0 0 32px;
    padding:0;
}

Adaptive Styles Editing Elements

Editing elements control style and layout for editing components on the portal page, including the page editing elements near the navigation breadcrumb and the flyout page and portlet editor elements. This is not a complete list; for all available elements, see the mainstyle.css file.

Element Editing Component Example

#ali-pageEdit

The portal actions such as Edit Page, Create Page, etc. Appears opposite the breadcrumb at the top or the portal page.

 
#ali-pageEdit {
        float:right;
        padding: 0px 0px 12px 0px;
        font-family:Helvetica, Arial, sans-serif;
        color:#96b7ED;
        text-align:right;
}

#ali-edit-container

The div that contains the flyout page editor.

 
#ali-edit-container {
        clear:left;
        float:left;
        width:97%;
        margin:0px 12px 12px 12px;
        min-width:950px;
}

#ali-edit-toolbar

The bar at the top of the flyout page editor and contains the "Edit Page" text and the "X" (close editor) button for the editor.

 
#ali-edit-toolbar {
        float:left;
        width:100%;
        height:21px;
        margin-top:6px;
        background-color:#6B91C0;
        background-image:url(../img/edit_title_topbar.gif);
        background-repeat:repeat-x;
        color:#FFFFFF;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-size:11px;
        font-weight:bold;
        letter-spacing:1px;
}

#ali-edit-cornerleft and #ali-edit-cornerright

The top right and top left rounded corners for the flyout page editor.

 
#ali-edit-cornerleft {
        clear:left;
        float:left;
        width:8px;
        height:21px;
        background-image:url(../img/edit_corner_topleft.gif);
        background-repeat:no-repeat;
}

#ali-edit-cornerright {
        float:right;
        position:relative;
        right:-2px;
        width:8px;
        height:21px;
        background-image:url(../img/edit_corner_topright.gif);
        background-repeat:no-repeat;
        margin:0;
        padding:0;
}

#ali-edit-content

The div containing the main section of the flyout editor below the toolbar and above the rounded corners at the bottom.

 
#ali-edit-content {
        width:100%;
        border-left:solid 1px #6B91C0;
        border-right:solid 1px #6B91C0;
        background-color:#ECEFF4;
        color:#6B91C0;
}

#ali-edit-tabs-container

Can be used to set tabbed navigation within the flyout page editor. (Not used in the default implementation of the flyout page editor.)

 
#ali-edit-tabs-container {
        clear:left;
        float:left;
        width:100%;
        margin:0;
        padding:0;
        height:30px;
        background-image:url(../img/edit_tab_gradient.gif);
        background-repeat:repeat-x;
        background-color:#C8DCFF;
        border-bottom:solid 1px #7497C4;
        border-right:solid 1px #7497C4;
        border-left:solid 1px #7497C4;
}

.ali-edit-tabs

Can be used to set the style of tabbed navigation within the flyout page editor. (Not used in the default implementation of the flyout page editor.)

 
.ali-edit-tabs {
        float:left;
        margin:6px 0 0 0;
        padding:0;
        background-color:#CFd3E7;
        border-left:solid 1px #7497C4;
        border-top:solid 1px #7497C4;
        border-right:solid 1px #7497C4;
}

#ali-edit-footer

Contains the elements for the bottom of the flyout page editor, including the bottom outline and the left and right rounded corners.

 
#ali-edit-footer {
        width:100%;
        clear:left;
        float:left;
        background-image:url(../img/edit_bot.gif);
        background-repeat:repeat-x;
        height:8px;
}

#ali-edit-botleft and #ali-edit-botright

The divs that contain the rounded corners for the bottom right and bottom left corners of the flyout page editor. The images for these corners are specified in the style as the background image.

 
#ali-edit-botleft {
        clear:left;
    float:left;
    width:8px;
    height:8px;
    position:relative;
    left:-1px;
    background-image:url(../img/edit_corner_botleft.gif);
    background-repeat:no-repeat;
}

#ali-edit-table

Flyout portlet editor table.

 
#ali-edit-table {
    font-size:1em;
    color:#000000;
    margin:0px;
}

#ali-edit-portlets

Flyout portlet editor tab.

 
#ali-edit-portlets {
        float:left;
        width:100%;
        border-left:solid 1px #6B91C0;
        border-right:solid 1px #6B91C0;
        background-color:#ECEFF4;
        color:#000000;
        font-size:11px;
}

#ali-edit-portlets-search

Flyout portlet editor search form.

 
#ali-edit-portlets-search {
        float:left;
    padding:0 18px 0 14px;
    border-right:solid 1px #D5D6DA;
    line-height:31px;
}

#ali-edit-breadcrumb

Flyout portlet editor breadcrumbs.

 
#ali-edit-breadcrumb {
    float:left;
        color:#2B4A7B;
        padding: 2px 24px 12px 2px;
        font-family:Helvetica, Arial, sans-serif;
        font-size:11px;
        letter-spacing:1px;
}

#ali-edit-main-col1

Flyout portlet editor folder display.

 
#ali-edit-main-col1 {
        float:left;
        width:212px;
        margin:0;
        padding:0;
}

Adaptive Styles Directory Elements

Directory elements control style and layout for components in the Directory. This is not a complete list; for all available elements, see the mainstyle.css file.

Element Directory Component Example

#ali-kd-title

The title displayed on the Directory page.

 
#ali-kd-title {
        float:left;
        height:22px;
        padding:4px 12px 0 12px;
        border-right:solid 1px #9BBEEE;
        color:#7197c6;
        font-size:.8em;
        font-weight:bold;
        letter-spacing:2px;
}

#ali-kd-main*

These elements control the main page of the Directory

 
#ali-kd-main-bar {
        clear:both;
        float:left;
        width:100%;
        min-width:980px;
        margin:0;
        padding:0;
        border-top:solid 1px #DBD9D9;
        border-bottom:solid 1px #C9CED9;
        background-color:#CFDFFF;
        background-repeat:repeat-x;
        height:7px;
}

#ali-kd-main-col1 {
        float:left;
        width:212px;
        margin:0 60px 48px 36px;
}

.ali-kd-main-header {
        width:100%;
        margin-top:24px;
        padding:2px 4px;
        background-color:#E5E9F6;
        border-bottom:solid 1px #C6CAD4;
}

#ali-kd-breadcrumb

The breadcrumb displayed on the Directory page.

 
#ali-kd-breadcrumb {
        float:left;
        height:22px;
        padding:5px 0 0 0;
        margin-left:-28px;
        font-size:.75em;
        font-weight:bold;
        color:#2B4A7B;
}

#ali-kd-sorting-bar

The div in the Directory and search results pages that contains the pull-down menu for sorting results or listings by "items per page", "item type", etc.

 
#ali-kd-sorting-bar {
        clear:both;
        float:left;
        width:100%;
        min-width:1000px;
        margin:0;
        padding:0;
        height:31px;
        border-top:solid 1px #D5D4D4;
        border-bottom:solid 1px #A8B8D9;
        background-image:url(../img/kd_sort_bkg.gif);
        background-repeat:repeat-x;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-size:.8em;
        color:#000000;
        font-weight:normal;
}

#ali-kd-documents

The div for listings of items in Directory folders.

 
#ali-kd-documents {
        clear:both;
        float:left;
        width:64%;
        min-width:625px;
        min-height:500px;
        margin:0 0 0 32px;
        padding:6px 64px 48px 0;
        background-image:url(../img/kd_subfolders_bkg.gif);
        background-repeat:repeat-y;
        background-position:right;
}

.ali-kd-doc-office.ali-kd-doc-web.ali-kd-doc-text

The icon and text for specific document types.

 
.ali-kd-doc-office {
        clear:both;
        color:#000000;
        font-size:.8em;
        padding:0 24px 24px 34px;
        background-image:url(../img/icon_officedoc_24px.gif);
        background-repeat:no-repeat;
}

#ali-kd-pagenav

Directory navigation section.

 
#ali-kd-pagenav {
        clear:both;
    float:right;
    line-height:2em;
    color:#A1B2C4;
    font-size:.7em;
    padding-right:24px;
    margin-bottom:12px;
}

#ali-kd-side

Directory subfolders and related links sections.

 
#ali-kd-side {
        float:left;
        right:18px;
        width:25%;
        margin:0 0 0 -12px;
        padding:20px 0 48px 0;
        min-width:250px;
        letter-spacing:1px;
        font-family:Helvetica, sans-serif;
        font-size:.8em;
        font-weight:bold;
        color:#7197C6;
}

#ali-kd-subfolder li

Directory subfolder links.

 
#ali-kd-subfolder li {
        padding:2px 0 2px 24px;
        list-style:none;
        background-image:url(../img/icon_folder_16px.gif);
        background-repeat:no-repeat;
        background-position:0 50%;
}

.ali-kd-related a

Directory related links.

 
.ali-kd-related a {
        font-size:90%;
        font-family:Arial, Helvetica, sans-serif;
        font-weight:normal;
        color:#3761B7;
        text-decoration:none;
}

Adaptive Styles Portlet Elements

These elements control style and layout for portlet elements. This is not a complete list; for all available elements, see the mainstyle.css file. For portlet flyout editor elements, see Adaptive Styles Editing Elements.

Element Portlet Component Example

.ali-portlet-container

Contains the nested elements of the portlet toolbar, controls rounded corners and content.

 
.ali-portlet-container {
        min-width:250px;
        margin:4px 0px 6px 0px;
}

.ali-portlet-cornerleft and .ali-portlet-cornerright

Divs that contain the rounded corners for the top right and top left corners of the portlet. The images for these corners are specified in the style as the background image.

 
.ali-portlet-cornerright {
        float:right;
        width:8px;
        height:21px;
        position:relative;
        right:-2px;
        background-image:url(../img/portlet_corner_topright.gif);
        background-repeat:no-repeat;
        margin:0;
        padding:0;
}

.ali-portlet-toolbar

The top section of the portlet, where the title of the portlet sits along with action buttons such as minimize, edit and refresh.

 
.ali-portlet-toolbar {
        width:100%;
        height:21px;
        background-color:#5C91D8;
        background-image:url(../img/portlet_title_bar.gif);
        background-repeat:repeat-x;
        color:#FFFFFF;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-size:1.1em;
        font-weight:bold;
        letter-spacing:1px;
}

.ali-portlet-controlone and .ali-portlet-controltwo

Used to position the action buttons in the portlet toolbar for actions such as minimize, edit and refresh.

 
.ali-portlet-controltwo {
        float:right;
        width:13px;
        margin-bottom:-13px;
        padding:0px 0px 0px 6px;
        border: solid 1px #FF0000;
}

.ali-portlet-content

The div that contains the main content of the portlet. Sets the left and right outlines of the portlet.

 
.ali-portlet-content {
        clear:left;
        width:100%;
        border-left:solid 1px #6B91C0;
        border-right:solid 1px #6B91C0;
        color:#6B91C0;
}

.ali-portlet-footer

Contains the elements for the bottom of the portlet, including the bottom outline and the left and right rounded corners.

 
.ali-portlet-footer {
        width:100%;
        background-image:url(../img/portlet_bot.gif);
        background-repeat:repeat-x;
        height:8px;
}

.ali-portlet-botleft and.ali-portlet-botright

Divs that contain the rounded corners for the bottom right and bottom left corners of the portlet. The images for these corners are specified in the style as the background image.

 
.ali-portlet-botright {
        float:right;
        width:8px;
        height:8px;
        position:relative;
        right:-2px;
        background-image:url(../img/portlet_corner_botright.gif);
        background-repeat:no-repeat;
}

Adaptive Styles User Elements

User elements control style and layout for user-related components, including user profile, user activity stream, user friends and user information components. This is not a complete list; for all available elements, see the mainstyle.css file.

Element User Component Example

#ali-user-navbar

The user profile navigation menu in portal navigation.

 
#ali-user-navbar {
    clear:both;
    width:100%;
    padding:0 0 2px 0;
    margin:0;
    height:27px;
    background-image:url(../img/nav_2nd_pages.gif);
    background-repeat:repeat-x;
    letter-spacing:1px;
    font:bold .725em Helvetica;
    line-height:24px;
    min-width:980px;
}

.ali-user-activity*

These elements control the display of user activity stream components. The User Activities portlet usually appears on the user profile page.

 
.ali-user-activity-pulldown {
        clear:both;
        float:right;
        width:99%;
        padding:3px 16px 0 0;
        color:#000000;
        text-align:right;
        font-size:.75em;
}

.ali-user-activity-stream {
        margin: 8px 0 0 0;
        padding:0 0 0 4px;
        background-color:#EFF2FA;
        border-bottom:solid 1px #DBDEE4;
        font-size:.75em;
        font-weight:bold;
        letter-spacing:1px;
}

.ali-user-friends*

These elements control the display of the user friends components. The User's Friends list portlet usually appears on the User Profile page. .

 
.ali-user-pulldown {
        clear:both;
        float:right;
        width:99%;
        padding:3px 16px 0 0;
        color:#000000;
        font-size:.75em;
        text-align:right;
}

.ali-friends-info-title {
        padding-right:6px;
        text-align:right;
        color:#6E7686;
        font-size:.75em;
        font-weight:bold;
        letter-spacing:1px;
}

#ali-user-geninfo*

These elements control the display of the user general information components, the main information on the User Profile page.

 
#ali-user-geninfo-edit {
        float:right;
        width:100px;
        margin:-4px;
        padding:6px 12px 6px 12px;
        background-color:#EFF3FF;
        border-left:solid 1px #C4C8DB;
        text-align:center;
}

.ali-user-geninfo-title {
    padding-right:6px;
    text-align:right;
    color:#6E7686;
    font-size:.65em;
    font-weight:bold;
    letter-spacing:0;
}

#ali-user-search

The search section in the user general info component.

 
#ali-user-search {
    float:right;
    padding:3px 24px;
    margin:0;
    height:22px;
    width:310px;
    background-image:url(../img/nav_2nd_sub.gif);
    background-repeat:repeat-x;
    border-left:solid 1px #6f90cf;
}

Using Adaptive Styles to Customize Portlet Style and Layout

Adaptive styles allow you to customize specific portlets using the unique ID assigned to each portlet, or use CSS classes to modify the design of a group of portlets. You can also set constraints for portlets, including limiting a specific portlet to a three-column layout or preventing users from collapsing portlets. For an introduction to portlet style elements, see . Adaptive Styles Portlet Elements

Syntax

To apply a CSS tag to a specific portlet, use the portlet ID. the example below increases the space around the portlet title for the portlet with ID 43. (You can also define basic styles for a specific portlet within the portlet code.)

#pt-portlet-43 .ali-portlet-title
{
        padding:8px 0 0 0;
}

You can also apply styles to groups of portlets, including those on a specific page or in a specific community. To apply styles to a portlet on a specific page or community, use the page or community ID. The example below makes the same modification as above for all the portlet on the page will ID 100.

#pt-page-100 .ali-portlet-title
{
        padding:8px 0 0 0;
}

Style Customizations

The mainstyle.css file allows you to make a wide range of style changes to portlets. For example, you can change the color scheme of portlets as shown in the example below.

#pt-portlet-43 .ali-portlet-content 
{
        clear:left;
        width:100%;
        border-left:solid 1px #6B91C0;
        border-right:solid 1px #6B91C0;
        color:#6B91C0;
}

Constraints

The mainstyle.css file allows you to set constraints for portlets. For example, you can set the width of a portlet for a specific page or set of pages. You can define portlet settings by page, layout/column, or community. The example below limits the portlet with ID 43 to a width of 250 pixels on the page with ID 100.

#pt-page-100 #pt-portlet-43
{
        width: 250px;
}

Using Adaptive Styles to Customize Page Layout

Adaptive styles allow you to modify page layout and design using the portal CSS template file. You can also use CSS to hide specific functionality exposed in the portal page. This page provides basic syntax rules and customization examples.

Syntax

To apply styles to a specific page, use the page ID. The example below sets the background color for the page with ID 100.

#pt-page-100
{
        background-color: red;
}

You can change style settings for a specific user or type of user (administrator or guest). The example below displays a special header image on all browse-mode pages for guests. To modify a style for a specific user, replace "guest" with the name of the appropriate portal User object (e.g., .ptPageUser-mycompany domain ad\Joe Smith).

.ptPageUser-guest #pt-header
{
        background-image: url(/imageserver/plumtree/portal/private/img/example_guest.gif);
}

Style and Branding Customizations

The mainstyle.css file allows you to make a wide range of style changes to the portal page, including adding custom branding and color schemes. For example, you can add a custom image to the portal banner as shown in the example below.

#ali-banner    {
        width:100%;
        height:80px;
        background-color: #1D54A6;
        background-image: url(../img/MyCompany_bkg.jpg);
        background-repeat: repeat-x;
        font-family:Verdana, Arial, Helvetica, sans-serif;
        min-width:980px;
}

You can also modify the background color for a single page or a specific community. The example below sets the background color for the community with ID 200.

.ptCommunity-200
{
        background-color: #AAA;
}

Page Element Customizations

The mainstyle.css file allows you to modify the style of form elements in the portal page, including text boxes and buttons. For example, the code below expands the size of the banner search box.

#ali-bannerSearch {
        clear:right;
        float:right;
        position:relative;
        width:600px;
        padding: 18px 24px 0px 24px;
}

Implementing Localized Stylesheets for Adaptive Page Layouts

To provide language-specific stylesheets for internationalized portal implementations, create a localized version of the portal stylesheet and map the language to the each style sheet in the CustomStyles.xml file.

The CustomStyles.xml file is located in the %PT_HOME%\settings\portal\ folder on the portal server. This file also contains default mappings to legacy stylesheets to support any products that do not use Adaptive Page Layouts.

Note: The language-specific stylesheet mappings in CustomStyles.xml only apply to pages that use Adaptive Page Layouts. For details on localizing stylesheet for legacy layouts, see Chapter 5, "Adding New Language Style Sheets".

  1. Create a localized version of the mainstyle.css file for each language. For example, mystyle-ar.css for Arabic.

  2. Modify CustomStyles.xml to specify stylesheets for each supported language. For example, to use mystyle-ar.css for Arabic, add the following mapping to CustomStyles.xml:

    <StyleSettings>
  <cssMapping>
    <language>ar</language>
    <styles>mystyle-ar.css</styles>
  </cssMapping>
</StyleSettings>

  3. Include the <pt://styles> adaptive tag in the head element of any page that should use a localized stylesheet. The head element must also include the <pt.standard.stylesheets> tag to reference the legacy stylesheet, which contains the legacy portlet styles required by any preexisting portlets and by the admin UI. For details on these tags, see the Oracle WebCenter Interaction Web Service Development Guide..

    <head>
<pt.standard.stylesheets/>
<link href="pt://styles" type="text/css" rel="styleSheet"></link>
... </head>

    Note: The <pt://styles> tag can only be used to implement localized stylesheets in pages that use Adaptive Page Layouts.

Go to previous page
Previous		 Go to next page
Next
Go to Documentation Home
Home		 Go to Table of Contents
Contents		 Go to Feedback page
Contact Us