Custom Appearance

All style attributes and variables are defined in Sass files. It is quite hard to identify all colors, sizes, paddings, fonts etc. in one large file generated by Sass so it is always better to compile your own stylesheet. 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.

Note

Editing default theme appearance using custom stylesheet requires some basic coding skills and you should be familiar with CSS3 rules and principles.

Using gulp

  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 original style
    wp_dequeue_style( 'superlist' );

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

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

add_action( 'wp_enqueue_scripts', 'superlist_child_enqueue_files' );

Video

Warning

If you are using custom stylesheet, you will need to regenerate the file every time a new theme update releases to cover all new elements and components of course. Otherwise your stylesheet won’t “know” how to render theme and it can look ugly. Makes sense, right? Or, you can skip dequeuing original stylesheet and theme will inherit appearance from it.

Writing custom CSS

If you are not familiar with Sass nor gulp, you can still write your own plain CSS into custom stylesheet. To override original theme appearance you will need to use stronger selector in your .css file. Learn more about Calculating a selector’s specificity.

To find out a selector of specific element in the HTML DOM you can use Inspector Development Tool in your browser.

Follow this useful guide.

Note

If you would like to have custom theme appearance and you lack of required skills, you can request custom work and we may help you.