With this technique you can add custom CSS to any SPBAS template while minimizing the risk of that work being lost with future upgrades.

For this post we’ll use the customer area as an example. However, this technique applies to the other packages as well (admin, order, kb, etc). Let’s get started!

1. Open the following file in your text editor:

templates/default/css/style.css

2. Make style.css look like this:

@import url(“reset.css”);
@import url(“layout.css”);
@import url(“custom.css”);

3. Create the following file and open it in your text editor:

templates/default/css/custom.css

The CSS imports are parsed from top to bottom so anything you add to custom.css will take precedence over anything imported above it. Furthermore, custom.css is not a file that we distribute so it will never be overwritten during upgrades.

You can safely override distribution class names or add custom CSS to custom.css with full confidence it’s never going to be overwritten.

Please note, the only consideration is that if you overwrite style.css (from step 1 above) when upgrading, you’ll need to complete step 2 again to import your custom.css file.

Do you have design integration tips or tricks? Please share them in the comments below