Override a Module to Make a Color Change

While we've covered adding new modules to your site, another customization you can make is overriding an existing module with your own. You may want to do this, for example, if you want to make a global change to styling.

Overriding a file (such as the one containing your site's colors) involves creating a module and then telling Gulp that you want it to ignore one file and replace it with another. Thus, you should never modify the code contained in the reference modules (i.e., the suitecommerce directory).

This short article will take you through the steps to overriding the global color scheme by changing some of the color variables.

Preparing Your File Structure

To start, create a new module folder like you would for any other module (where SCA is my working directory):

  • SCA

    • Modules

      • custom

        • CustomStyles@1.0.0

          • Sass

            • variables

Note that in this structure the name CustomStyles@1.0.0 is not nececssary, but simply what I've decided I'm going to call my modifications. Under that folder, I have only included the names of the folders that I'm going to be overriding. This is because (later) I'm going to specify that a specific file under BaseSassStyles is overridden, so Sass and variables need to match the folders under that folder.

Now, I'm going to be overriding some styling. I could do that just by using standard CSS but I want to change a variable that's used during the compiling process. To do this I need to override the entire file in which these variables are declared. The best way to start this is to make a copy and work from that. Copy suitecommerce > BaseSassStyles@1.0.2 > Sass > variables > _colors.scss and put it into your variables folder.

The final bit of prep work is the same for any new module: you need to update the modules object at the top of distro.json with your new module. I put mine at the bottom of the object so it looks like this:

Make The Changes

When you open _colors.scss in your text editor you'll see all the variables that are used for determining the colors of your site. If you're interested in making a specific change to your site's colors then you can grep through the modules to find where specific variables are used; however, for this tutorial, we're just going to change the color used in the main color scheme. In the file change the value of $sc-color-scheme to something else – I'm changing mine to #DE5A28. Save the file.

Next you need to create ns.package.json in your CustomStyles@1.0.0 folder and put in the following:

{
    "gulp": {
        "sass": [
            "Sass/**/*.scss"
        ]
    },
    "overrides": {
        "suitecommerce/BaseSassStyles@1.0.2/Sass/variables/_colors.scss": "Sass/variables/_colors.scss"
    }
}

The first object is standard in ns.package.json files, but the second, overrides, tells Gulp that you will be using a file in place of another. The first part of the object is the file you are replacing and the second the file you are replacing it with. Save the file and run gulp local (remember, if you already have it running you'll need to restart it so that it's aware of the new module). Your command line should return a summary of the overrides in place (if it doesn't then check your syntax).

Test The Changes

With your local server running, you're now in a position to test your changes. Go to your local site and check to see if your global color scheme has changed to the color you specified. For me, my site has changed like this:

When you're ready you can rebuild your distribution and push it to the server.

Summary

Overrides can be used to replace specific files so that you can, for example, change specific areas of styling that come in the reference modules. Note that overriding modules is always preferable when it comes to making customizations to reference modules as it means that updates are easier and changes are more cleanly separated.

For further reading, check out Overriding a Template File and Extending a Sass File, which also gives information on how to override entire modules.