Example of Customized Styles in Search Criteria

Example of Customized Styles in Search Criteria

Return to Customize Search Criteria Styles

Modifying several styles in Search Criteria

The table below shows an example of a modification to the Search Criteria Styles while keeping the default layout. Changes were made to all the TextBox classes.

Default Custom

Default simple search styles.png

The default values of the classes changed for the custom display are shown below.

.TextBoxSearchKeyWord
{
min-width:350px;
}
.TextBoxControls
{
min-width:350px;
}
.MultiTextAreaControls
{
min-height:50px;
min-width:350px;
}
.TextBoxControlsCurrency
{
width:135px;
}
.TextBoxControlsNumber
{
width:135px;
}
.TextBoxControlsDateTime
{
width:135px;
}

result with colorful text boxes.png

The changes made to the CSS for the above display were the addition of the background-color parameters shown below:

.TextBoxSearchKeyWord
{
min-width:350px;
background-color: #FFFF00 !important;
}
.TextBoxControls
{
min-width:350px;
background-color: #FF00FF !important;
}
.MultiTextAreaControls
{
min-height:75px;
min-width:350px;
background-color: #C0C0C0 !important;
}
.TextBoxControlsCurrency
{
background-color: #00FF00 !important;
width:100px;
}
.TextBoxControlsNumber
{
width:100px;
background-color: #0000FF !important;
}
.TextBoxControlsDateTime
{
width:100px !important;
background-color: #FF0000 !important;
}

colorkey with class names.pngColor Key: