LESS-ify’d MP6

Standard

Note: These instructions are for a branch of MP6 which is currently not up-to-date with the rest of MP6. MP6 is now using SASS, and while the theory is the same, details listed here are not accurate. Check out this post for a more up-to-date method of working with MP6.

There is now a new branch of MP6 using LESS to generate some color schemes. This includes a package.json and Gruntfile.js; so you can build new themes using grunt.

To create new color schemes

Each scheme is a folder inside components/color-schemes/schemes/, we’ll look at seaweed/ for example. This contains a colors.less and colors.css. colors.css is the file compiled by grunt, and is what the browser sees. colors.less contains 4 lines: 3 color variables and an @import (the file that uses these variables to paint the admin). Create a new folder in schemes, and copy over colors.less- change the 3 variables to your color scheme.

Grunt

Install grunt, if you haven’t already. In the Gruntfile, there’s a list of files in the colors task:

'components/color-schemes/schemes/seaweed/colors.css'      : 'components/color-schemes/schemes/seaweed/colors.less',
'components/color-schemes/schemes/lioness/colors.css'      : 'components/color-schemes/schemes/lioness/colors.less',
'components/color-schemes/schemes/ghostbusters/colors.css' : 'components/color-schemes/schemes/ghostbusters/colors.less',
'components/color-schemes/schemes/blue-dream/colors.css'   : 'components/color-schemes/schemes/blue-dream/colors.less',
'components/color-schemes/schemes/pixel/colors.css'        : 'components/color-schemes/schemes/pixel/colors.less',
'components/color-schemes/schemes/80s-kid/colors.css'      : 'components/color-schemes/schemes/80s-kid/colors.less'

This is the mapping of result : source files. Add a new line with your scheme’s folder, it should compile to colors.css. Run the task with grunt, or watch your changes with grunt watch.

Adding the theme to the admin

The last step is to add the scheme in colors.php. Copy the wp_admin_css_color(...) inside mp6_colors_register_schemes, and change the name & filepath (make sure to use colors.css). Reload the “edit your profile” screen, and the new schemes should be available.

Leave a Reply