AquaLogic User Interaction Development Guide

     Previous Next  Open TOC in new window   View as PDF - New Window  Get Adobe Reader - New Window
Content starts here

ALI 6.5 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 ALI 6.5 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;
}

  Back to Top      Previous Next