How to customize Flounder

There are two main ways to customize Flounder:

  1. You can override the CSS using the CSS module in jetpack.
  2. You can create a child theme.

If you decide to create a child theme, and you want to take advantage of the LESS source files, you’ll need to copy the /less/ folder from the github repository into your child theme. You’ll want to map less/style.less to style.css using Grunt, CodeKit, or any other preprocessor app.

In the Codex’s child theme example, you need to add @import url("../parent-theme/style.css");, but if you’re using the LESS files, you don’t need to do this. You’re already including the parent theme’s styles. You will need to change the Theme Name and other theme information in style.less, along with adding “Template: flounder”, telling WordPress this is a child of Flounder.

So now you have a child theme folder that just has the LESS files in it, and something to compile less/style.less down to /style.css. To change the colors, you should open up less/_colors.less; lines 1-39 have variables with colors defined. The post format colors are lines 4-32, and contain a color and color-base.

  • @standard, @image, ... are the background colors
  • @standard-base, @image-base, ... are what the other colors are built off of (the sidebar background, etc).

You can also play around with changing the .colors mixin, if you want to change how secondary and tertiary colors are created. Check out the color functions in the LESSCSS function reference for help.