Colors, Fonts and Plugins

When someone buys a theme, they usually change the theme default colors, someone also changes the fonts. So here is the guide for how to do it.

Change Website Colors

• colors change is very easy with the power of scss variables. Open assets/scss/parts/variables.scss file in a text editor. Then you can see the global variables we used in this theme. primary-color defines the theme default color. If you change it the whole theme default colors will be changed when you compile the theme again. Sometimes it compiles but the browser shows the previous colors. Then you need to clear your browser cache and reload again. You can also change the other variable colors like this.

// Color Variables
$primary-color: #FA6862;
$light-dark: #1e2530;
$light: #fff;
$text-color: #ababab;
$title-color: #1e2530;
$border-color: #eee;

Change Website fonts

• font-family name is also defined in the assets/scss/parts/variables.scss files. If you want to change the font then change the font-family form here. And give your font link to the my-project/config.toml files. You can get more font-face form here.

// Font Variables from variables.scss file
$font-stack: "Libre Baskerville",serif;
$open-sans:'Open Sans',sans-serif;

// font links from typography.scss file
@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i|Open+Sans:400,600,700,800');

Third-Party Plugins

You can add or remove third-party plugins from my-project/config.toml file. We create a loop for plugins. You can see two plugins loops here, the first one is for css, and the last one is for js.

CSS plugins

[[params.plugins.css]]
link = "https://cdn.examplesite.com/your-plugin.css"
attributes = "your-attributes" # optional field

js plugins

[[params.plugins.js]]
link = "https://cdn.examplesite.com/your-plugin.js"
attributes = "your-attributes" # optional field