Styling your theme

The idea behind wp-lemon is that you can easily set up a site without thinking too much about styling, but is flexible enough to be completely overwritten to your liking. We will have look on how to style your site by simply overwriting variables.

1. Create color variables.

The first things you'll want to do is to define your brand colors. Extract your theme/brand colors from the design document or handoff file and convert them to scss variables. I recommend using a tool like Name that color (website) or Name that color (vs code extension) to transform colors into distinguishable names.

Copy
$color-viridian: #588068ff;
$color-dark-sea-green: #85b498ff;
$color-antique-brass: #c88e65ff;
$color-dark-salmon: #e19782ff;
$color-peach-puff: #e9cfb4ff;

2. Create $brand-colors

You can now create your brand colors. These are the colors that will be available in the color palette inside the WordPress editor.

Copy
$brand-colors: (
  "white": $white,
  "black": $black,
  "gray": #e9e9e9,
  "dark-green": $color-viridian,
  "green": $color-dark-sea-green,
  "orange": $color-antique-brass,
  "pink": $color-dark-salmon,
  "peach": $color-peach-puff,
);

The name on the left side is used to create matching class names that will be utilized by the editor.

⚠️ You need to restart your watch process before the new colors will be available inside your editor.

3. Overwrite default variables

wp-lemon comes with a set of default SCSS variables that provides the default look. These colors can be overwritten to your liking too define your own look and feel. When taking a look at wp-lemon/resources/assets/styles/01-settings/_variables.scss you will find all variables that are at your disposal. By simply copying the variables that you want to overwrite to your _variables.scss and change their value you can overwrite things like colors, font sizes, background colors, logo-widths, etc.

For example, when you want to overwrite the default navigation colors

Copy
$nav-text: (
  "font-weight": 400,
  "font-size": 16px,
  "transform": "uppercase",
  "color": $base-color,
  "hover": darken($highlight2, 20%),
  "active": $highlight1,
);

You can copy over as much variables as you want to overwrite.