WordPress Bones: First Steps with CSS/less

Note quite a tutorial but I have taken my first steps with the WordPress Bones theme. After downloading Bones I extracted bones into the ./wp-content/themes folder. To amend the CSS I edited the files in the ./library/less/ folder. Specifically I edited the _base.less and _mixins.less files to set colours for links etc.

After amending the less files we can compile them for Bones as follows:

cd /path/to/siteroot/wp-content/themes/bones/library/less/
lessc style.less ../css/style.css

To change the name of your theme edit the ./wp-content/themes/bones/style.css but the actual (compiled) CSS styles are located in ./wp-content/themes/bones/library/css/styles.css
If you don’t have the lessc compiler installed yet you can install as follows on Ubuntu:

sudo apt-add-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs npm
sudo npm install less -g

 

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>