Customizing a template

This part of the documentation relates to premium templates built with Cruip CSS framework only. If the template you are using is built on the top of Tailwind CSS, please refer to the last part of the documentation.

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 🙌