✨ Get all templates and new upcoming releases for just $89. Limited time offer ✨
Cruip CSS

Customizing a template

Effective on March 1st, 2023, Cruip CSS templates are no longer distributed, maintained or supported.

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