I saw many people crying over stylesheet of gridview provided by devexpress. I am not doing anything special here, just pasting the base CSS modifying which you can control the look of your gridview. Download it from here or copy from below:
.dxgvControl,
.dxgvDisabled
{
border: Solid 1px #9F9F9F;
font: 11px Tahoma;
background-color: #F2F2F2;
color: Black;
cursor: default;
}
.dxgvDisabled
{
color: Gray;
}
.dxgvControl a
{
color: #5555FF;
}
.dxgvDisabled a
{
color: Gray;
}
.dxgvLoadingPanel
{
border: solid 1px #9F9F9F;
background-color: #E3E3E1;
font: 9pt Tahoma;
color: #303030;
}
.dxgvLoadingPanel td
{
white-space: nowrap;
text-align: center;
padding: 12px;
}
.dxgvLoadingPanelStatusBar
{
background-color: Transparent;
font: 9pt Tahoma;
}
.dxgvLoadingPanelStatusBar td
{
white-space: nowrap;
text-align: center;
padding: 0px 2px 0px 2px;
}
.dxgvFilterPopupWindow
{
color: Black;
font: 9pt Tahoma;
border: solid 1px #9f9f9f;
}
.dxgvFilterPopupItemsArea
{
color: Black;
background-color: White;
}
.dxgvFilterPopupButtonPanel
{
font: 9pt Tahoma;
background-color: #ededed;
border: 1px solid #dcdcdc;
border-left-width: 0px;
color: Black;
}
.dxgvFilterPopupItem td.dxgv,
.dxgvFilterPopupActiveItem td.dxgv,
.dxgvFilterPopupSelectedItem td.dxgv
{
border-left: solid 1px white;
border-right: solid 1px white;
padding: 3px 2px 4px 3px;
cursor: default;
white-space: nowrap;
}
.dxgvFilterPopupActiveItem
{
background: #cfcfcf;
color: Black;
}
.dxgvFilterPopupSelectedItem
{
background: #8D8D8D;
color: White;
}
.dxgvTable
{
background-color: White;
border: 0;
border-collapse: separate!important;
overflow: hidden;
font: 9pt Tahoma;
color: Black;
}
.dxgvInlineEditRow,
.dxgvDataRow
{
}
.dxgvInlineEditRow td.dxgv
{
border-bottom: Solid 1px #D3D3D3;
border-right: Solid 1px #D3D3D3;
}
.dxgvDataRowAlt
{
background-color: #EDEDEB;
}
.dxgvFilterRow
{
background-color: #E7E7E7;
}
.dxgvEditForm
{
background-color: #F0F0F0;
}
.dxgvEditForm td.dxgv
{
border-bottom: Solid 1px #D3D3D3;
padding: 8px 10px 10px;
}
.dxgvEditForm td.dxgvIndentCell
{
background: #EDEDED;
border-right: Solid 1px #CFCFCF;
border-left: Solid 1px #CFCFCF;
border-top: 0px;
}
.dxgvSelectedRow
{
background-color: #A0A0A0;
color: White;
}
.dxgvFocusedRow
{
background-color: #8D8D8D;
color: White;
}
.dxgvSelectedRow .dxgvCommandColumn a,
.dxgvFocusedRow .dxgvCommandColumn a
{
color: White;
}
.dxgvSelectedRow .dxgvCommandColumn a:hover,
.dxgvFocusedRow .dxgvCommandColumn a:hover
{
color: #F0F0F0;
}
.dxgvSelectedRow .dxgvCommandColumn a:visited,
.dxgvFocusedRow .dxgvCommandColumn a:visited
{
color: #F0F0F0;
}
.dxgvPreviewRow
{
background-color: #F5F5F5;
color: #707070;
}
.dxgvDetailCell,
.dxgvPreviewRow td.dxgv,
.dxgvEmptyDataRow td.dxgv
{
padding: 20px 2px 20px 4px;
border-bottom: Solid 1px #D3D3D3;
border-top: 0;
border-left: 0;
border-right: 0;
}
.dxgvPreviewRow td.dxgv
{
padding: 10px 10px 10px 15px;
}
.dxgvDetailCell
{
padding: 16px 18px;
}
.dxgvDetailRow td.dxgvIndentCell
{
padding-right: 0px;
border-bottom: Solid 1px #D3D3D3;
}
.dxgvEmptyDataRow
{
color: Gray;
}
.dxgvEmptyDataRow td.dxgv
{
border-bottom: Solid 1px #CFCFCF;
text-align: center;
}
.dxgvEditFormDisplayRow td.dxgv,
.dxgvDataRow td.dxgv,
.dxgvDataRowAlt td.dxgv,
.dxgvSelectedRow td.dxgv,
.dxgvFocusedRow td.dxgv
{
overflow: hidden;
border-bottom: Solid 1px #CFCFCF;
border-right: Solid 1px #CFCFCF;
border-top: 0;
border-left: 0;
padding: 3px 6px 4px 6px;
}
.dxgvEditFormDisplayRow
{
}
.dxgvEditFormDisplayRow td.dxgv
{
}
.dxgvEditFormDisplayRow td.dxgvIndentCell
{
background: #EDEDED;
border-right: Solid 1px #CFCFCF;
border-left: Solid 1px #CFCFCF;
border-top: 0px;
}
.dxgvEditingErrorRow
{
background-color: #FFC8C8;
color: #FF0000;
}
.dxgvEditingErrorRow td.dxgv
{
white-space: pre-wrap;
border-bottom: Solid 1px #D3D3D3;
border-right: 0;
border-top: 0;
border-left: 0;
padding: 6px 10px;
}
.dxgvFilterRow td.dxgv
{
border-bottom: Solid 1px #C1C1C1;
border-right: Solid 1px #C1C1C1;
border-top: 0;
border-left: 0;
padding: 2px;
overflow: hidden;
}
.dxgvGroupRow
{
background-color: #EDEDED;
}
.dxgvFocusedGroupRow
{
background-color: #8D8D8D;
color: White;
}
.dxgvGroupRow td.dxgv,
.dxgvFocusedGroupRow td.dxgv
{
border: none 0;
vertical-align: middle;
white-space: nowrap;
border-bottom: Solid 1px #D3D3D3;
padding: 3px 6px 4px 6px;
}
.dxgvFocusedRow td.dxgvIndentCell,
.dxgvFocusedGroupRow td.dxgvIndentCell,
.dxgvSelectedRow td.dxgvIndentCell
{
background-color: #EDEDED!important;
border-right: solid 1px #CFCFCF;
border-left: solid 1px #CFCFCF;
border-top: 0px;
}
.dxgvHeaderPanel {
background-color: #F9F9F9;
color: Black;
padding: 8px 6px;
border-bottom: Solid 1px #9F9F9F;
}
.dxgvHeader {
cursor: pointer;
white-space: nowrap;
padding: 4px 6px 5px;
border: Solid 1px #9F9F9F;
background-color: #DCDCDC;
overflow: hidden;
font-weight: normal;
text-align: left;
}
.dxgvHeader,
.dxgvHeader table {
color: Black;
font: 9pt Tahoma;
}
.dxgvHeader td {
white-space: nowrap;
}
.dxgvHeader a {
color: #0d45b7;
}
.dxgvCustomization,
.dxgvPopupEditForm
{
width: 100%;
padding: 0;
margin: 0;
}
.dxgvGroupPanel
{
white-space: nowrap;
font-size: 9pt;
background-color: #EDEDED;
color: #8D8D8D;
border-bottom: Solid 1px #9F9F9F;
padding: 7px 4px 8px 6px;
}
.dxgvFooter
{
background-color: #D7D7D7;
white-space: nowrap;
}
.dxgvFooter td.dxgv
{
padding: 5px 6px 6px;
border-bottom: Solid 1px #BCBCBC;
border-right: 0;
}
.dxgvGroupFooter
{
background-color: #E0E0E0;
}
.dxgvGroupFooter td.dxgv
{
white-space: nowrap;
}
.dxgvGroupFooter td.dxgv
{
padding: 5px 4px 6px 6px;
border-bottom: Solid 1px #CFCFCF;
border-right: 0;
}
.dxgvDataRow td.dxgvIndentCell,
.dxgvGroupRow td.dxgvIndentCell,
.dxgvGroupFooter td.dxgvIndentCell
{
background-color: #EDEDED;
border-right: Solid 1px #CFCFCF;
border-left: Solid 1px #CFCFCF;
border-top: 0px;
}
.dxgvTitlePanel,
.dxgvTable caption
{
font-size: 15px;
font-weight: normal;
padding: 3px 3px 5px;
text-align: center;
background-color: #ACACAC;
color: White;
border-bottom: Solid 1px #9F9F9F;
}
.dxgvLoadingDiv
{
background-color:Gray;
opacity: 0.01;
filter: alpha(opacity=1);
}
.dxgvStatusBar
{
border-top: Solid 1px #9F9F9F;
}
.dxgvStatusBar tr.dxgv
{
height: 20px;
}
.dxgvCommandColumn
{
padding: 2px;
}
.dxgvCommandColumn a
{
margin: 0 3px 0 0;
color: #0d45b7;
}
.dxgvCommandColumn a:hover
{
color: #5494ea;
}
.dxgvCommandColumn a:visited
{
color: #ab59a6;
}
.dxgvCommandColumnItem
{
}
.dxgvEditFormTable
{
padding: 2px 6px 6px 4px;
font: 11px Tahoma;
color: Black;
}
.dxgvEditFormTable a
{
color: #0d45b7;
}
.dxgvEditFormTable a:hover
{
color: #5494ea;
}
.dxgvEditFormTable a:visited
{
color: #ab59a6;
}
.dxgvEditFormCaption
{
padding: 4px 4px 4px 10px;
white-space: nowrap;
}
.dxgvInlineEditCell
{
padding: 1px;
}
.dxgvEditFormCell
{
padding: 4px;
border: 0;
}
.dxgvPagerTopPanel
{
}
.dxgvPagerBottomPanel
{
}
.dxgvDetailButton
{
}
.dxgvFilterBar
{
border-top: solid 1px #9F9F9F;
background: #d4d4d4;
}
.dxgvFilterBar a
{
color: #394ea2;
text-decoration: underline;
}
.dxgvFilterBarCheckBoxCell
{
padding: 0 3px;
padding-right: 7px;
}
.dxgvFilterBarImageCell
{
padding: 0 3px;
padding-right: 1px;
cursor: pointer;
}
.dxgvFilterBarExpressionCell
{
font-size: 9pt;
padding: 5px 5px 8px 0;
white-space: nowrap;
}
.dxgvFilterBarClearButtonCell
{
font-size: 9pt;
padding: 5px 6px 8px;
}
.dxgvFilterBuilderMainArea
{
background: white;
padding: 6px 2px;
}
.dxgvFilterBuilderButtonArea
{
background: #ededed;
border-top: solid 1px #cfcfcf;
padding: 6px;
}
.dxgvDataRowHover
{
background: #cfcfcf;
color: Black;
}
.dxgvControl .dxpControl td.dxpCtrl,
.dxgvDisabled .dxpControl td.dxpCtrl,
.dxgvControl .dxpLite,
.dxgvDisabled .dxpLite
{
padding-top: 4px;
}
The post Devexpress ASP.NET GRIDVIEW base CSS appeared first on Clear your dot net issues.
