Example   Source
  Menu  | 
<<
>>
 |  Run as  
The tables below represent the CSS information that is emitted with the DbNetSuite components. To alter any of the styles in your application you simply need put your version of these style settings in your own page.
Common CSS DbNetGrid CSS
.ui-dialog input,
.ui-dialog select,
.ui-dialog td,
.ui-dialog-title
{
	font-family:verdana;
	font-size:small;
}

.ui-widget *
{
	font-family:verdana;
	font-size:small;
}

.ui-widget-header *
{
	font-family:verdana;
	font-size:small;
}

.dbnetsuite-message-box-content
{
	border:1pt solid silver;
	background-color:whitesmoke;
}
.dbnetsuite .message-line
{
	border:1pt solid silver;
	background-color:whitesmoke;
	padding:2px;
}

.dbnetsuite .thumbnail
{
	cursor:pointer;
}

.dbnetsuite .error-content
{
	border:1pt solid silver;
	background-color:white;
	overflow-x:scroll;
	overflow-y:scroll;
	padding:2px;
}

.dbnetsuite .highlight
{
	background-color:gold;
}

.dbnetsuite .field-highlight
{
	border:1pt solid red;
}
.dbnetsuite .field-modified
{
	background-color:gold;
}
.dbnetsuite .search-toolbar
{
	border-top:1pt solid silver;
}
.dbnetsuite .upload-toolbar
{
	border-top:1pt solid silver;
}
.dbnetsuite .edit-dialog-toolbar
{
	border-top:1pt solid silver;
}
.dbnetsuite .edit-dialog-audit-panel
{
	border-top:1pt solid silver;
}
.dbnetsuite .edit-dialog-audit-panel table
{
	float:right;
}
.dbnetsuite .edit-label
{
	white-space:nowrap;
}
.dbnetsuite-dialog-button
{
	margin-left:5px;
	margin-right:5px;
	padding:10px;
}
.filter-text-label 
{
	font-weight:bold;
	color:#336699;
}
.filter-text-value 
{
	font-weight:bold;
}
.filter-text-join-op
{
	color:dimgray;
}
.filter-text-advanced-join-op
{
	color:blue;
}
.column-map-header
{
	font-weight:bold;
}

.un-mapped
{
	color:#666;
	background-color:#ddd;
}

option[default_profile="True"] { 
    background-color: gold;
}

.sprite {background: url(csg-4f4f550b4d3f0.png) no-repeat 0 0;}
.sprite-AddFolder{ background-position: 0 0;} 
.sprite-Browse{ background-position: 0 -36px;} 
.sprite-Cancel{ background-position: 0 -72px;} 
.sprite-Chart{ background-position: 0 -108px;} 
.sprite-Collapse{ background-position: 0 -144px; width: 11px; height: 11px; } 
.sprite-ColumnPicker{ background-position: 0 -175px;} 
.sprite-Down{ background-position: 0 -211px;} 
.sprite-Expand{ background-position: 0 -247px; width: 11px; height: 11px; } 
.sprite-FolderClosed{ background-position: 0 -278px;} 
.sprite-FolderOpen{ background-position: 0 -314px;} 
.sprite-GreenDown{ background-position: 0 -350px;} 
.sprite-Help{ background-position: 0 -386px;} 
.sprite-Left{ background-position: 0 -422px;} 
.sprite-MailMerge{ background-position: 0 -458px;} 
.sprite-NewFolder{ background-position: 0 -494px;} 
.sprite-Options{ background-position: 0 -530px;} 
.sprite-Right{ background-position: 0 -566px;} 
.sprite-Sort{ background-position: 0 -602px;} 
.sprite-Up{ background-position: 0 -638px;} 
.sprite-UserProfile{ background-position: 0 -674px;} 
.sprite-apply{ background-position: 0 -710px;} 
.sprite-btn_down{ background-position: 0 -746px;} 
.sprite-btn_up{ background-position: 0 -782px;} 
.sprite-calendar{ background-position: 0 -818px;} 
.sprite-close{ background-position: 0 -854px;} 
.sprite-copy{ background-position: 0 -890px;} 
.sprite-delete{ background-position: 0 -926px;} 
.sprite-download{ background-position: 0 -962px;} 
.sprite-edit{ background-position: 0 -998px;} 
.sprite-find{ background-position: 0 -1034px;} 
.sprite-first{ background-position: 0 -1070px;} 
.sprite-folder_find{ background-position: 0 -1106px;} 
.sprite-image_add{ background-position: 0 -1142px;} 
.sprite-image_delete{ background-position: 0 -1178px;} 
.sprite-insert{ background-position: 0 -1214px;} 
.sprite-last{ background-position: 0 -1250px;} 
.sprite-lookup{ background-position: 0 -1286px;} 
.sprite-new_search{ background-position: 0 -1322px;} 
.sprite-next{ background-position: 0 -1358px;} 
.sprite-ok{ background-position: 0 -1394px;} 
.sprite-parentfolder{ background-position: 0 -1430px;} 
.sprite-prev{ background-position: 0 -1466px;} 
.sprite-printer{ background-position: 0 -1502px;} 
.sprite-refresh{ background-position: 0 -1538px;} 
.sprite-save{ background-position: 0 -1574px;} 
.sprite-spellcheck{ background-position: 0 -1610px;} 
.sprite-undo{ background-position: 0 -1646px;} 
.sprite-update{ background-position: 0 -1682px;} 
.sprite-upload{ background-position: 0 -1718px;} 
.sprite-view{ background-position: 0 -1754px;} 
.sprite-window{ background-position: 0 -1790px;} 
.sprite-zoom{ background-position: 0 -1826px;} 

.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

.dbnetsuite-wait-message
{
	background: url(ajax-loader.gif) no-repeat 4px 4px;
	z-index:100012;
	position: fixed;
	top:50%;
	left:50%;
	height:40px;
	width:40px;
	background-color:#eee;
	font-family:verdana;
	font-size:large;
	color:#336699; 
	border:5px solid #aaa;
	border-radius:10px;
	display:none;
}	

.dbnetsuite .waiting 
{
	background: url(wait.gif) #E0FFFF no-repeat center;
	position:absolute;z-index:99999;
	border-radius:5px;
	border:2px solid #4682B4; 
}

.selectWrap .selected {
    background-color:#3399ff;
    color:#fff;
}
.dbnetgrid td,
.dbnetgrid th,
.dbnetgrid input,
.dbnetgrid select, 
.dbnetgrid caption,
.tool-button-text
{
	font-family: verdana;
	font-size: small;
}

.dbnetgrid .toolbar
{
	margin-top:5px;
	margin-bottom:5px;
}
table.dbnetgrid
{
	border-collapse: collapse;
	border: 1pt solid silver;
}

.dbnetgrid .header-row
{
}
.dbnetgrid .header-cell
{
	background-color: gainsboro;
	border:1pt solid silver;
	font-weight: bold;
	text-align: left;
	cursor:pointer;
}

.dbnetgrid .group-header-cell
{
	background-color: #FFCC66;
	color:#336699;
	font-weight:bold;
}

.dbnetgrid .header-cell-table.ui-draggable-dragging
{
	background-color: gainsboro;
	border:1pt solid silver;
	font-weight: bold;
	text-align: left;
	cursor:pointer;
}

.dbnetgrid .even
{
	background-color: #F5F5F5;
}
.dbnetgrid .odd
{
	background-color: #FFFFFF;
}
.dbnetgrid .highlight
{
	background-color: khaki;
}
.dbnetgrid .selected
{
	background-color: #336699;
	color: white;
}
.dbnetgrid .selected a
{
	color: white;
}
.dbnetgrid .data-cell
{
	border:1pt solid silver;
}
.dbnetgrid .filter-cell
{
	padding-right:6px;
}
.filter-column-select
{
	display: block; 
	width: 100%; 
}
.dbnetgrid .data-cell a
{
	text-decoration:underline;
}
.dbnetgrid .aggregate-row
{
}
.dbnetgrid .aggregate-cell
{
	font-weight: bold;
	background-color: #ECF2F4;
	border:1pt solid silver;
}

.dbnetgrid .nested-grid-cell
{
	padding:10px;
}

.dbnetgrid .aggregate-filler-cell
{
	background-color: #ECF2F4;
	border:1pt solid silver;
}

.dbnetgrid .aggregate-label
{
	font-weight:bold;
}
.dbnetgrid .aggregate-label-value
{
	padding-left:5px;
}

.dbnetgrid .dbnetedit-toolbar
{
	border-top: 1pt solid silver;
}

.config-toolbar
{
	border-top: 1pt solid silver;
}

.asc-sort-sequence-image {
	width:20px;
	background: url(Asc.gif) no-repeat center; 
	padding:0px 5px;
}

.desc-sort-sequence-image {
	width:20px;
	background: url(Desc.gif) no-repeat center; 
	padding:0px 5px;
}

.dbnetgrid-message-box
{
	border: 1px solid silver;
	background-color:#F6F5F1;
	padding:2px;
	white-space:normal;
}
DbNetEdit CSS DbNetFile CSS
.dbnetedit input, 
.dbnetedit select, 
.dbnetedit textarea, 
.dbnetedit td
{
	font-family:verdana;
	font-size:small;
}

.dbnetedit-input
{
	font-family:verdana;
	font-size:small;
}

div.updated-by-audit, div.updated-audit, div.created-by-audit, div.created-audit
{
	margin-left:5px;
	padding:2px;
	border: 1pt solid #7F9DB9;
	background-color:#eee;
	color:#111;
	white-space:nowrap;
}

td.updated-by-audit, td.updated-audit, td.created-by-audit, td.created-audit
{
	margin-left:5px;
	padding:2px;
	border: 1pt solid #7F9DB9;
	background-color:#eee;
	color:#111;
	white-space:nowrap;
}

img.audit-history
{
	padding-left:2px;
	cursor:pointer;
}

table.audit-history
{
	background-color:#fff;
	border-collapse:collapse;
}

table.audit-history td
{
	padding:3px;
	border:1pt solid #aaa; 
}

table.audit-history tr.odd
{
	background-color:#eee;
}

.nicEdit-main
{
	background-color:#FFFFFF; 
	color:#000000;
}

.dbnetedit-input
{   
} 

.dbnetedit-focus
{   
} 

.dbnetedit-label
{
	white-space:nowrap;
	font-family:verdana;
	font-size:small;
}

.dbnetedit .toolbar-top
{
	padding-bottom:5px;
	padding-top:5px;
	margin-bottom:5px;
	border-bottom:1pt solid silver;
}
.dbnetedit .toolbar-bottom
{
	padding-top:5px;
	padding-bottom:5px;
	margin-top:5px;
	border-top:1pt solid silver;
}

.dbnetedit .message-line
{
	border: 1px solid silver;
	background-color:#F6F5F1;
	padding:5px;
	white-space:normal;
}

.dbnetedit .audit-panel
{
	border-top:1pt solid silver;
	margin-top:5px;
	padding-top:2px;
	height:24px;
}

.dbnetedit table.audit
{
	float:right;
}

div .html-preview
{
	overflow:auto;
	width:400px;
	height:100px;
	border:1pt solid silver;
	background-color:white;
}

div .thumbnail-panel
{
	border:1pt inset;
	padding:2px;
	text-align:center;
	vertical-align:middle;
}
#tooltip {
	position: absolute;
	z-index: 3000;
	border: 1px solid #336699;
	background-color: lightyellow;
	padding: 5px;
	opacity: 0.85;
}
#tooltip h3, #tooltip div 
{ 
	margin: 0; 
	font-family: Verdana;
	font-size: small;
	font-weight:normal;
}
.thumbnail-image
{
	cursor:pointer;
}

.upload-dialog .file-data 
{
    border: 1pt solid #808080;
    background-color: #fff;
    padding:2px;
    white-space:nowrap;
}

.upload-dialog .drop-zone 
{
    border: 2pt dashed #808080;
    color:#808080;
    text-align: center;
}

.upload-dialog .drop-zone.hover
{
    border: 2pt dashed #04de38;
    background-color:#fff;
}

.upload-dialog .tool-button-text 
{
    white-space:nowrap;
}

.upload-dialog td.or 
{
    padding:0px 5px;
}

.dbnetfile *
{
	font-family: Verdana;
	font-size: small;
}

.dbnetfile-tree
{
	border:1pt solid silver;
}

.dbnetfile .toolbar
{
}

.dbnetfile .thumbnail
{
	cursor:pointer;
}

.dbnetfile .message-line
{
	margin-top:5px;
}

.dialog .search-criteria
{
}

.dialog .highlight
{
	background-color:gold;
}

.dialog .toolbar-container
{
	border-top:1pt solid silver;
}

table.file-search-dialog-criteria td
{
	padding-left:2px;
	padding-right:2px;
}

table.dbnetfile
{
	border-collapse: collapse;
	border: 1px solid #DDDDDD;
}

.dbnetfile .toolbar
{
	margin-top:5px;
	margin-bottom:5px;
}

.dbnetfile.grid .header-row
{

}

.dbnetfile.grid .header-cell
{
	background-color: gainsboro;
	border-bottom: 1px solid silver;
	border-top: 1px solid silver;
	font-weight: bold;
	text-align: left;
	cursor:pointer;
}

.dbnetfile.grid .even
{
	background-color: #F5F5F5;
}

.dbnetfile.grid .odd
{
	background-color: #FFFFFF;
}

.dbnetfile.grid .highlight
{
	background-color: khaki;
}

.dbnetfile.grid .selected
{
	background-color: #336699;
	color: white;
}

.dbnetfile.grid .selected a
{
	color: white;
}

.dbnetfile.grid .data-cell
{

}

.dbnetfile .tree-node-selected
{
	background-color:#316AC5;
	color:white !important;
}
.dbnetfile .tree-node-highlight
{
	text-decoration:underline !important;
}

.dbnetfile .tree-image-cell
{
	width:16px;
}

.dbnetfile .tree-text-cell
{
	padding-left:2px;
	color:black;
	text-decoration:none;
}

.dbnetfile .img-link
{
	border:1pt solid blue;
}
.dbnetfile .caption
{
	font-size: x-small;
}
.dbnetfile .error
{
	border:1pt solid silver;
	background-color:gold;
	font-size:large;
	font-weight:bold;
}

.dbnetfile .tree-icon-cell
{
	width:16px;
}

table.dbnetfile.tree    
{   
	border: 0pt;   
} 	

.dbnetfile.tree td
{
	padding-top:1px;
	padding-bottom:1px;
}

.dbnetfile.tree .highlight
{
	background-color:transparent;
}