Theming UberGrid

[jeanmanuel]

Hi, are there examples of how to theme the grid: I'd like to change background color of header, rows, height of header, and also changing background color of first column.
Thanks

[mats]

Not currently no, there are no theming samples (but we're working on one for a future release). It's all just simple CSS though so you can just use regular CSS and it should be very simple.

[Scorpie]

Hi, are there examples of how to theme the grid: I'd like to change background color of header, rows, height of header, and also changing background color of first column.
Thanks

I did the same thing yesterday. Just make a copy of the ubergrid-all-debug.css, and see my changes below:

Code: Select all

.ubergrid-header-column {
     line-height             : 22px;
     padding                 : 0px 10px;
     
     /*border-right            : 1px solid #afafaf;
     border-top              : 1px solid #afafaf; 
     -webkit-box-shadow      : 0 1px 0 rgba(255, 255, 255, .8) inset;
     box-shadow              : 0 1px 0 rgba(255, 255, 255, .8) inset;
     /*text-shadow             : 0 1px 0 rgba(255, 255, 255, .5);*/
     color                   : #FFF;
     position                : relative;
     
    
    /*
     background-color        : #0e4c75;
     background-image        : linear-gradient(top, #0e4c75, #11578a);
     background-image        : -webkit-linear-gradient(top, #0e4c75, #11578a);
     background-image        : -webkit-moz-gradient(top, #0e4c75, #11578a);
     background-image        : -webkit-ms-gradient(top, #0e4c75, #11578a);
    */
   
    
    background-color: rgb(14, 75, 117);
    background-image: linear-gradient(top, rgb(22, 118, 185), rgb(17, 89, 140));
		background-image: -webkit-linear-gradient(top, rgb(22, 118, 185), rgb(17, 89, 140) 3%, rgb(11, 60, 94));
    background-image: -webkit-moz-gradient(top, rgb(22, 118, 185), rgb(17, 89, 140) 3%, rgb(11, 60, 94));
    background-image: -webkit-ms-gradient(top, rgb(22, 118, 185), rgb(17, 89, 140) 3%, rgb(11, 60, 94));
		
		border-bottom-color: rgb(6, 31, 49);
		border-bottom-style: solid;
		border-bottom-width: 0px;
		border-left-color: rgb(204, 204, 204);
		border-left-style: solid;
		border-left-width: 0px;
		border-right-color: rgb(204, 204, 204);
		border-right-style: solid;
		border-right-width: 0px;
		border-top-color: rgb(11, 60, 94);
		border-top-style: solid;
		border-top-width: 1px;
    
    
     overflow                : hidden;
}

This should style the header in the same way as the default style.

[mats]

Or even better, don't touch our files and just override our styles in your own CSS file. New theme should be coming in a few weeks.

[jeanmanuel]

Awesome. We managed to implement our theme exactly as wanted. Thanks for your help!

[mats]

Screenshot?