Theming UberGrid

Questions related to our Sencha Touch based grid component
Post Reply
User avatar
jeanmanuel
Posts: 5
Joined: Tue Apr 23, 2013 4:46 pm

Theming UberGrid

Post by jeanmanuel » Tue Apr 23, 2013 4:52 pm

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

User avatar
mats
Premium Member
Premium Member
Posts: 15621
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: Theming UberGrid

Post by mats » Tue Apr 23, 2013 4:57 pm

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 new error logging service RootCause, or read more on the Sencha blog

@bryntum
Facebook
API documentation

User avatar
Scorpie
Posts: 5
Joined: Tue Apr 23, 2013 3:17 pm

Re: Theming UberGrid

Post by Scorpie » Wed Apr 24, 2013 10:13 am

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:

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.

User avatar
mats
Premium Member
Premium Member
Posts: 15621
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: Theming UberGrid

Post by mats » Wed Apr 24, 2013 10:31 am

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 new error logging service RootCause, or read more on the Sencha blog

@bryntum
Facebook
API documentation

User avatar
jeanmanuel
Posts: 5
Joined: Tue Apr 23, 2013 4:46 pm

Re: Theming UberGrid

Post by jeanmanuel » Wed Apr 24, 2013 4:04 pm

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

User avatar
mats
Premium Member
Premium Member
Posts: 15621
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: Theming UberGrid

Post by mats » Wed Apr 24, 2013 4:11 pm

Screenshot? :)
Tired of debugging javascript errors in web applications? Try our new error logging service RootCause, or read more on the Sencha blog

@bryntum
Facebook
API documentation

Post Reply