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
ALI 6.5 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;
}
Note: The syntax on this page applies to ALI 6.5
adaptive page layouts. For earlier versions or legacy page layouts,
see
Portlet Style.