Skip to content

Create a Theme

dbachm123 edited this page Apr 29, 2018 · 1 revision

1: Create a CSS file inside of the /static/css folder

2: Using the list below, edit specific elements using their div class selectors.

3: Edit the $themeChoice to be the name of your css file (without the '.css' at the end)

4: Your theme is now live!

CSS Class Selectors

The following will be all of the class selectors followed by how they are used in the Light Theme.


Highest div of the navigation menu

.n-navbar-theme {
    font-family: 'Nunito', sans-serif;
    font-size: 1.1rem;
    line-height: 1.6rem;
    letter-spacing: 0.02rem;
    font-weight: 400;
    background-color: #ffffff;
    padding:1.5% 4%;

Used to color the text next to the logo

.n-logo-theme {
    color: #0f1121;

On-Hover effects for the menu items

.n-pullUp:hover {
    color: #ffffff;
    width: 100%;
    height: 100%;
    content: '';
    background: #0f1121;
    opacity: 1;
    transition: all 0s;

Text color for text inside of Node Cards + Address Field

.n-text-theme {
    color: #0f1121!important;

Modifies the h2 divs

.n-h2-theme {
    font-family: 'Nunito', sans-serif;
    font-size: 2.5rem;
    line-height: 2.9rem;
    font-weight: 400;
    max-width: 930px;

Modifies the h3 divs

.n-h3-theme {
    font-family: 'Nunito', sans-serif;
    font-size: 1.4rem;
    font-weight: 400;
    max-width: 930px;

Modifies the p divs

.n-p-theme {
    font-family: 'Nunito', sans-serif;
    font-size: 0.9rem;
    line-height: 1.6rem;
    letter-spacing: 0.02em;

Modifies the address input field

.n-address-theme {
    background-color: #ffffff!important;
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    background-clip: padding-box;
    border: 1px solid #000034;
    border-radius: 0rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;

Modifies the Nano Info Cards

.n-card-theme {
    background-color: #fff;


  • Add a padding-top to the 'body' element in your css file, to properly show CMC widget + Nano Logo

  • Make sure you include your own logo images in static/img/ - the header logo image is nano-mark- and the logo to the left of the CMC Ticker Widget is nano-full-

  • Need help? Ask icarus#2597 on discord.