Layout
The overall HTML layout was built with the latest version of Bootstrap called Bootstrap 5. See official documentation for more information. In particular, we recommend that you understand how the grid system works and this will help you a lot to edit the layout.
Shock Theme has its own core to further facilitate the work of Bootstrap and other vendors. You can refer to this by looking at the file core.css
Info
This theme works with CSS variables which allows a value to be stored in one place, then referenced in multiple other places. This makes customization faster and easier to use.
If you are not an advanced user and just want to do basic customizations, just edit your HTML pages and the style file theme.css
In this file, you can change absolutely all the colors and all the typography of the theme. See this example of how the CSS variables are set:
:root {
--primary-color: #07beb8;
--secondary-color: #6917d0;
--tertiary-color: #ff1791;
--accent-color: #fedc00;
--white-color: #fff;
--gray-color: #8f93a5;
--black-color: #1a1a20;
}
:root {
--primary-font: lato, sans-serif;
--secondary-font: proxima-nova, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 1.5rem;
font-family: var(--secondary-font);
line-height: 1.2;
}