Customize a theme

Customize your login screens with liquid.js logic and your own CSS style. Learn basic CSS and conditional logic for a custom login experience

What you’ll learn

After completing this guide, you will know how to use CSS:

• Define the logo display
• Update Typographic style
• Set the main color
• Basic selectors

Requirements

To follow this guide, you don't need any specialized knowledge, not even in design.

How to customize the theme

In this guide, we will show you how to easily modify the default Cryptr theme:

• You can define if you want to display your logo or not depending on if it is present in the data. It is the tag if wrapped with curly brace percentage delimiters {% %} that will allow the rendering of the logo. Otherwise, the logo is simply not displayed

{% site.logo_url %}
  <img src="{{ site.logo_url }}" alt="{{ site.logo_alt_url }}" href="{{ site.company_url }}" target="_blank">
{% endif %}

• To embed a font, edit the import at the top of the <style> tag in the html and modify the new font in the --font-family variable

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root {
  --font-family: 'Montserrat';
}

• The default template of Cryptr only allows you to style the primary color that impacts the button, you must modify the --primary-color variable that is at the top of your style tag

:root {
  --primary-color: #393052;
}

• The template can be further customized in the template style tag. You can use classes (around the widget) or other selectors to customize the widget

.header > h2 {
  margin-top: 0;
  margin-bottom: 0.25rem; /* 4px */
  color: #393052;
  font-size: 1.875rem; /* 30px */
  line-height: 2.25rem; /* 36px */ 
  font-weight: 700; 
  text-align: center; 
}

form > div > label {
  display: block; 
  font-weight: 700;
  font-size: 0.75rem; /* 12px */
  line-height: 1rem; /* 16px */
  letter-spacing: 0.005em;
  color: #5A5663;
  text-align: left;
  margin-bottom: 0.75rem; /* 12px */
}

Starting with CSS

What is CSS Selector?

A CSS selector is used to choose the HTML elements that we want to style.

The selectors used in the default theme

Selector	Description	Syntax	Example
>	The symbol > combines the selectors, the selector B included directly in A will have the style defined	A > B	form > p
:	Select an element based on its state	A:B	button:hover
::	Select an element that are not included in html	::A	::placeholder
.class-name	Select an element that has an attribute class in its tag. This element is selected by adding a dot followed by the class name	.A	.header
:nth-child()	Select an element based on its position among a group of siblings	A:B(2)	div:nth-of-type(2)
div	Select an element by node name	A	div

Next steps

• Learn more about theme architecture
• See our guides on liquid and mjml, and find all the variables available to customize your theme