Click here to Skip to main content
Click here to Skip to main content

Devexpress ASP.NET GRIDVIEW Base CSS

, 27 Oct 2013
Rate this:
Please Sign up or sign in to vote.
Base CSS modifying which you can control the look of your gridview

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Mangesh V. Devikar
Founder Enziq Solutions Pvt. Ltd.
India India
My key portfolios at Enziq Solutions includes Business Development and Strategy and overseeing Technology operations.
Read more about me at: http://enziq.com/site/Company/mangesh.html or http://mangeshdevikar.enziq.com/about-me/
Follow on   LinkedIn

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web03 | 2.8.140709.1 | Last Updated 27 Oct 2013
Article Copyright 2013 by Mangesh V. Devikar
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid