Payments
Themes for your website
Integrations

Global CSS Snippets

A selection of snippets which you can use to implement site wide changes across the Genie theme.

Increase the Size of the logo in the main navbar

To increase the size of the logo in the main navbar (top left corner) you can add the below. To increase the size further try changing to 60px

#menu .navbar-brand img {
height: 50px;
}

To increase the size of the logo in the footer (bottom left corner) you can add the below. To increase the size further try changing to 60px

#footer .footer-logo {
height: 50px;
}

Change the colour of the Menu

By default the background colour will be set to white. If you would like to override this you can add a snippet with the colour you would like the menu to be. The colour can be entered in any of the formats accepted by css, details of the most popular formats can be found below:

  1. Predefined/Cross-browser Colour Names: A list of these can be found here e.g. magenta https://htmlcolorcodes.com/color-names/

  2. Hexadecimal Colour: You can use the following colour picker to find the Hex code for your colour e.g. #f9f9f9 https://htmlcolorcodes.com/color-picker/

  3. RGB Colour: You can use the following colour picker to find the RGB code for your color e.g. rgba(255,34,67) https://htmlcolorcodes.com/color-picker/

#menu {
background-color: #e1f5f4;
}

By default the links in the menu will be set to black. If you would like to override this you can add a snippet with the colour you would like the menu links to be. The colour can be entered in any of the formats accepted by css, details of the most popular formats can be found below:

  1. Predefined/Cross-browser Colour Names: A list of these can be found here e.g. magenta https://htmlcolorcodes.com/color-names/

  2. Hexadecimal Colour: You can use the following colour picker to find the Hex code for your colour e.g. #f9f9f9 https://htmlcolorcodes.com/color-picker/

  3. RGB Colour: You can use the following colour picker to find the RGB code for your color e.g. rgba(255,34,67) https://htmlcolorcodes.com/color-picker/

#menu .nav-link {
color: #c91916;
}

Increase Font Size

You can scale up the font size on all text by adding the below. To increase the text more, trying amending to 16px:

html {
font-size: 15px;
}

Increase Font Size - Mobile Only

You can scale up the font size on all text on mobile devices only by adding the below. To make text bigger try using 15px or 16px instead.

@media (max-width: 767px) {
html {
font-size: 14px;
}
}

Hide Stock Banners

By default stock banners show when there are less than 10 units available, to hide these:

.banner-limited {
display: none;
}