Questions related to our Sencha Touch based grid component

Post by 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

Post by 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.

Tired of debugging javascript errors in web applications? Try our powerful error logging service RootCause


Post by Scorpie »

jeanmanuel wrote: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:
.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.

Post by 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.

Tired of debugging javascript errors in web applications? Try our powerful error logging service RootCause


Post by jeanmanuel »

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

Post by mats »

Screenshot? :)

Tired of debugging javascript errors in web applications? Try our powerful error logging service RootCause


Post Reply