✨ Get all templates and new upcoming releases for just $69. Limited time offer ✨

Customizing a template

Cruip CSS

As described at the beginning of this chapter, any additional CSS should be included in the files contained in the theme/ folder.

theme/ has the same structure of core/, and it’s the place where you can override the core style or extend it by adding custom CSS.

Let’s suppose you want to replace the default color of the <h2> tag only preserving the color of the other headings. Open the theme/base/_typography.scss file and type 👇

h2, .h2 {
  color: get-color(primary, 1);

Now, let’s suppose you want to add some shadow to the buttons. Open the theme/elements/_buttons.scss file and type 👇

.button {
  box-shadow: 0 8px 20px rgba(get-color(dark, 1), .1);

For the cascading priorities of CSS, all changes made in the theme/ folder will override the core/ style.

Last updated on August 17, 2021