Adding Custom CSS To Your HTML Template

Our HTML Templates support the ability to apply custom CSS that is not lost during updates. A good reason to use custom CSS is to override existing CSS within your template. For example if you want to change the font or color scheme of your template.

Setting up the template for custom CSS

To apply custom CSS you should first create the following CSS file:

template_path/libs/css/custom.css

This file will be automatically loaded by your template below all other CSS files giving it priority.

The main CSS file of your template is located at:

emplate_path/libs/css/layout.css

This file contains all of the CSS used by the template and should not be edited but is good to reference when looking to make edits. When over riding CSS from layout.css it is important to copy the exact CSS you wish to edit.

CSS customization examples

All of these examples are using Stellar but the concept is the same for all of our templates.

Color scheme (CSS variables)

Our templates use CSS variables for main colors and styles. These are found at the very top of layout.css. When overriding CSS variables using custom.css you must place them within the :root selector. For example the main color of Stellar is orange, this color is controlled by the following CSS:

/* Primary color */
	
--color-primary-background: #f09546;
--color-primary-background-gradient-top: #f09546;
--color-primary-background-gradient-bottom: #f09546;
--color-primary-background-border: #df7e37;
--color-primary-background-shadow: #000;	
--color-primary-foreground: #f1f1f1;
--color-primary-foreground-shadow: #000;

This CSS allows you change the color of every element such as the background, border, foreground etc. Let's say for example you wanted to change to a blue color scheme, all you need to do is add the above block to custom.css (within :root) and change the hex codes. For example:

:root {

	/* Primary color */
		
	--color-primary-background: #2f44c3;
	--color-primary-background-gradient-top: #2f44c3;
	--color-primary-background-gradient-bottom: #0b21a4;
	--color-primary-background-border: #000;
	--color-primary-background-shadow: #000;	
	--color-primary-foreground: #fff;
	--color-primary-foreground-shadow: #000;

}

Font change (CSS variables)

The fonts are also set using CSS variables. This makes it very easy to change. The template uses one font for headings and one font for all other text (body).

The default main font in Stellar is Open Sans as defined by the following variable in layout.css:

--font-body: 'Open Sans', sans-serif; /* The font used for all text other than headings */ 

To change this with another font we need to visit Google fonts. Find the font you want to use and click on the install instructions. This will give you both the font import line and the font family to use within the variable. You would need to add the following to custom.css to change the font to Lato for example:

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');
					
	:root {
	
		--font-body: 'Lato', sans-serif; /* The font used for all text other than headings */	
						
	}

Copyright background color (standard CSS)

Most of the CSS in layout.css uses standard CSS. This can also be customized, non-variable CSS does not need to be placed within :root. Variables are used throughout layout.css to handle color scheme/sizing/spacing in one easy to change location. There may be a time where you want to change the color of one element to something unique but keep the rest using your set color scheme.

For example let's say you want to change the default (grey) copyright background at the bottom of all pages. The block of code that handles this is:

.copyrightmain {
	background: var(--color-box-background);
	background: linear-gradient(var(--gradient-degrees), var(--color-box-background-gradient-top) 0, var(--color-box-background-gradient-bottom) 100%);
	padding: var(--spacing-child) 0;
	color: var(--color-box-foreground);
}

To change the background color we only need to include the 2 background: lines in custom.css and then replace the values. For example using a red to orange gradient with a fall back color of red (for browsers that don't support gradients) we would use:

.copyrightmain {
	background: red;
	background: linear-gradient(var(--gradient-degrees), red 0, orange 100%);
}