The new CSS template provided with version 6.0 allows you to customize portlet content and design in a variety of ways. You can customize specific portlets using the unique ID assigned to each portlet, or use CSS classes to modify the design of a group of portlets (e.g., those in the first column of a two-column page). You can also set constraints for portlets, including limiting a specific portlet to a three-column layout or preventing users from collapsing portlets.
This page provides basic syntax rules and customization examples.
The portal CSS template file follows standard CSS syntax rules. For details on CSS, see http://www.w3.org/Style/CSS/. Below are some basic rules to keep in mind when modifying portlet styles.
To apply a CSS tag to a specific portlet, use the portlet ID. the example below increases the size of the portlet title for the portlet with ID 6. (You can also define basic styles for a specific portlet within the portlet code.)
#pt-portlet-6
.portletTitle
{
height: 26px;
}
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 removes the portlet preferences link for portlets on the page with ID 100.
.portletPrefsButton
#pt-page-100
{
display: none;
}
The portal CSS template file allows you to make a wide range of style changes to portlets. The image below is the default style for a portlet.
Following are examples of portlet style customizations using the portal CSS template file.
Change portlet color schemes: Change the color scheme of portlets for specific columns. (For information on changing the color scheme of the entire portal, see Changing the Default Style Sheet.)
#pt-portlet-100
{ background-color: white; }
#pt-portlet-100 .platPortletHeaderBg { background-color: tan; }
You can also define basic styles for portlets within the portlet code (instead of in the CSS template file). Use the pt:token transformer tag to reference the portlet ID and ensure that the style is only applied to the current portlet. This code sets the portlet background to tan.
<pt:namespace
pt:token="$$TOKEN$$" xmlns:pt='http://www.plumtree.com/xmlschemas/ptui/'/>
<style>
#pt-portlet-$$TOKEN$$ { background-color: tan; }
</style>
Add custom portlet padding: Control the padding around individual portlets, groups of portlets in a column, and selective portlets. The sample code below adds padding below the portlet with ID 43.
#pt-portlet-43
.portletBody
{
padding-bottom: 5px;
}
The portal CSS template file allows you to set constraints for portlets. Below are some examples.
Set the portlet width for specific pages or layouts: 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 15 to a width of 250 pixels on the page with ID 1.
#pt-page-1
#pt-portlet-15
{
width: 250px;
}
Prevent certain users from collapsing portlets: Disable the collapse option for a group of users or for portlets on a specific page. You can also prevent users from collapsing a specific portlet by using the portlet ID.
.ptPageUser-guest
.portletCollapseButton
{
display: none;
}
Note: Using CSS to hide functionality is not a secure means of preventing user-server interaction. All examples are for demonstration purposes only and are not meant to imply a complete solution to any overall security scheme.