Example   Source
  Menu  | 
<<
>>
 |   
The tables below represent the CSS information that is emitted with the DbNetSuiteVS 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-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;
}

.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; 
}
.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 .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
.dbneteditinput, 
.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;
}
.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;
}