Skinning

There are multiple posibilities for customizing the layout of dynaWidget components:

• Base grid layout attributes
• Adding custom css classes
• Overwriting the dynaWidget css classes
• Widget themes

Base layout attributes

The dynaWidget grid component has some basic attributes that controls the main appearance of the grid:

• width, height: the grid dimensions in pixels
• columns: column count of the grid
• largeColumns: defines the columns to have doubled width compared to the normal ones
• columnMargin: distance between columns
• columnWithOffset: will be substracted from each column with to compensate custom css settings (e.g. the border of the grid columns)
• rounded: if true, widgets have rounded edges
• closeIcon, editIcon, toggleIcon, reloadIcon, statusIcon (ajax-Status), titleIcon: let´s you change the header icons

Adding custom css classes

If you want to modify the layout (e.g. change the font or colors) you can add style classes to the dynaWidget grid component:

			<dwComp:dynaWidgetGrid id="myCustomizedGrid" 
				...
				styleClass="customWidgetGridStyle"
				... />
		

The style class will be added to the widget grid´s outer div style class dynaWidgetGrid, so the rendered result will look like this:

			<div class="dynaWidgetGrid customWidgetGridStyle" id="myCustomizedGrid" ...>
		

The following style class would for example overwrite the font and font-size:

			div.customWidgetGridStyle {
				font-size: 11px;
				font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
			}
		

You can also add custom style classes to the each widget by setting the widgetStyleClass property:

			<dwComp:dynaWidgetGrid id="myCustomizedGrid" 
				...
				widgetStyleClass="customWidgetStyle"
				... />
		

The style class will be added to the widget´s outer div style class dynaWidget, so the rendered result will look like this:

			<div class="dynaWidget customWidgetStyle" ...>
		

Overwriting the dynaWidget css classes

Of course you can always overwrite the dynaWidgets style classes directly. This not the most elegant way but it offers all possibilities in changing the style. Here is an overview about the rendered div structure of the dynaWidget grid and it´s main style classes:

			<div class="dynaWidgetGrid">
				<div class="gridColumn">
					<div class="dynaWidget">
						<div class="widgetContent">
							<div class="widgetHeader">...</div>
							<div class="widgetContentView">...</div>
							<div class="widgetContentEdit">...</div>				
						</div>
					</div>
					<div class="dynaWidget">
					...
					</div>
				</div>
				<div class="gridColumn">
				...
				</div>
			</div>
		

Widget Themes

An improved and more easy way to skin widgets in the form of themes is in planning right now...be patient!