Custom Colors

All colors are defined via SASS files. It is quite hard to identify all colors in one large file generated by SASS so it is always better to compile your own color combination. We are using pure SASS without any other libraries. For compiling we decided to use the gulp which is pretty fast. Gulpfile with prepared actions is located in theme root.

Step-by-step

  1. Install boostrap-sass https://github.com/twbs/bootstrap-sass
  2. Open the file assets/scss/superlist-custom.scss and change colors to your preference. Now you can compile your new color combination entering following commands:
1
2
3
$ cd wp-content/themes/superlist
$ npm install gulp gulp-sass gulp-sourcemaps globule
$ gulp compile
  1. After successful compilation copy assets/css/superlist-custom.css to your child theme (e.g. superlist-child/superlist-custom.css). Now you need to tell your child theme to use your new color combination.

Add following code into functions.php of child theme.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
/**
 * Enqueue scripts & styles
 *
 * @action wp_enqueue_scripts
 * @return void
 */
function superlist_child_enqueue_files() {
    # Remove old color combination
    wp_dequeue_style( 'superlist' );

    # Register style for new color combination
    wp_register_style( 'superlist-custom', get_stylesheet_directory_uri() . '/superlist-custom.css' );

    # Include new styles in theme
    wp_enqueue_style( 'superlist-custom' );
}

add_action( 'wp_enqueue_scripts', 'superlist_child_enqueue_files' );

Video