Customize the Overall Style for the Search Criteria

Return to Customize Search Criteria Styles

Modifying the Style for the default table layout

A default Search Criteria style display is shown below.

.LayoutTableStyle is the classes associated with the overall layout. The default setting for that class is:

.LayoutTableStyle
{
width:100% ;
height:auto ;
}

The table below shows examples of common changes possible for Currency columns. Additional examples may also be possible.

Change Example

Change	Example
To add a border around the search criteria, add a border property.	For example, make these changes: `.LayoutTableStyle { border: 5px solid black; width:100% ; height:auto ; }` The result looks like this: NOTE: Search results displayed on the same page will appear outside the border.
Add a border, background color, and some padding around the search criteria.	Make these changes: `.LayoutTableStyle { border: 2px solid green; padding: 15px; background-color: #CCE698 !important; width:100% ; height:auto ; }` The result looks like this: NOTE: Search results displayed on the same page will appear outside the border.

To add a border around the search criteria, add a border property.

For example, make these changes:

.LayoutTableStyle
{
border: 5px solid black;
width:100% ;
height:auto ;
}

The result looks like this:

table format with black border cropped.png

NOTE: Search results displayed on the same page will appear outside the border.

Add a border, background color, and some padding around the search criteria.

Make these changes:

.LayoutTableStyle
{
border: 2px solid green;
padding: 15px;
background-color: #CCE698 !important;
width:100% ;
height:auto ;
}

The result looks like this:

table format with background padding and border.png

NOTE: Search results displayed on the same page will appear outside the border.