Themeing with LESS
Gridmanager.js comes with three provided themes, a default theme and a light and dark variant. The default theme is the normal
js/jquery.gridmanger.css file. To use the dark theme, simply change this link to
js/jquery.gridmanager-dark.css. Each theme includes the full CSS core of gridmanager, so you only need to link to a single file.
Creating your own theme
There are a few options to styling the look of gridmanager. If you have no experience with LESS css preprocessing (and if you don't, I highly recommend you go and have a play), then you can just override any of the gridmanager css classes in your own style sheet. Whilst this isn't ideal, it will work. However, it makes future updates of the theme more troublesome.
Ideally, you want to leverage the existing LESS files in
- start by creating your own .less file: let's call it
custom.lessand place it in the
- copy and paste the contents of
- override any variables, such as
- look at
core/variables.lessfor a list of all the variables you can set.
This is the technique used to create the main gridmanger themes. Just look at
src/dark.less as an example.
Once you've created your
custom.less file, we need to compile it.
There are a couple of options here too - if your project is already compiling LESS (i.e your own custom version of bootstrap) then you can just
@import the less file into your bootstrap.less file.
Alternatively, use any LESS css processor of your choice to output the resultant .css file.
/* Variables */ @primary: #2fa4e7; @danger : #CC0000; @gray : #999; /* Structure */ @minimum-element-height: 30px; @row-margin-bottom: 5px; /* Canvas */ @canvas-color: #fff; /* Rows */ @row-border-color: @gray; @row-background-color: none; @row-tools-background-color: none; @row-icon-color: darken(@gray, 20%); @row-icon-color-bg: none; @row-icon-color-hover: #fff; @row-icon-color-bg-hover: @primary; /* Cols */ @col-border-color: @primary; @col-background-color: none; @col-tools-background-color: none; @col-icon-color: darken(@primary, 5%); @col-icon-color-bg: none; @col-icon-color-hover: #fff; @col-icon-color-bg-hover: @primary; @col-selected-color: @primary; /* Editable Regions */ @editable-border-color: @danger; @editable-icon-color: #fff; /* Icons */ @control-bar-font-size: 14px; @row-icon-font-size: 15px; @col-icon-font-size: 14px; @element-font-size: 10px;