Admin Dashboard: Styling

You are here:

This page explains how to change your marketplace’s appearance to match your branding.

Video Guide

Step by Step Guide

This menu item has been updated for easier navigation. Its new appearance when navigating to this page is:

Images: Upload your logo (it appears in the header and footer) and favicon (image of the browser’s window tab) in .PNG format. Depending on the size of the logo image it may need to be adapted by changing the logo height. After changing the value it must be saved before the new logo size will appear on the marketplace.

The background images for the registration and login pages can be changed from here. To alter their transparency scroll down to the background alpha factor, and slide left for higher transparency or right for more opaque.

The Element margins affect the gap between items in a block (the blank space between buttons for example). The Block padding is the gap between the block outline and the elements within the block.

If you choose to have the map feature enabled (‘Settings’ menu item), you can set the location and zoom level by clicking and dragging on the map.

Fonts: You can upload a local font from your computer by selecting ‘Add local font’ and then ‘upload’, or use a web font, which you can choose by following this link:

Once you have selected the font styles, you must click ‘View Selected Families’ and copy the link into your dashboard.

Different fonts are used in different places, with the most frequently used font being ‘font 3’. To change font three from ‘Poppins’ to your new font, change the name in the ‘Value’ section. To figure out which font is used in a specific place, right-click on it and click ‘Inspect’ to find the font name in the CSS.

Buttons: There are three types of button- ‘Primary’, ‘Cancel’ and ‘Delete’. Each button has three states: display (how it typically appears), hover (when the mouse passes over it) and active (when a user clicks on it). Each button’s state can be managed to change the color (of box and text), size, weight, style, shadow, border, font and more.

In a similar way the dropdown menus, text inputs, paragraph inputs, header and footer sections can be styled. Several of these sections also have a default, hover and active state, each of which can be adapted to match your branding.

Colors: The colors of all parts of the marketplace can be adapted in this tab. To change the color of a specific item, right-click and ‘Inspect’ to see the CSS and find the color name. In your admin dashboard find that color name and change it- either by selecting a color, using a HEX code, or changing the RGB values. Note that other items using the same color name will also change to the new colors.

Social Links: Add links to your social media profiles. These links will activate the Facebook, LinkedIn, Twitter or Instagram icons in the footer of your Marketplace Website. 

Was this article helpful?