How to Set Custom Branding
The following archived information only serves as a reference to the prior VueJS implementation of the Explorer which now resides here.
This document will explain the files that you might have to adjust to have the Explorer work with your custom chain and have it displayed in your own brand colors.
The Explorer fetches certain information from the network, which is done in this file. If your network has additional data that it requires later on, then you will need to extend it here to properly store it for later use. Generally you will not have to change this file as the Explorer already fetches the information a default bridgechain will need.
In src/assets/css/_theme.css you will see the color codes that we use throughout the Explorer and the corresponding variable names. There are also some default colors in tailwind.config.js that are used throughout the Explorer, although we are working on minimizing this. Keep in mind that we use SVG icons in a lot of places and that some of these come with styling, which means that you will have to edit the SVG file if you want to move away from the colors it uses. This is mostly the case when an SVG icon consists of more than a single color.
This file defines the languages, branding name / url and social media links that are used for the Explorer. You should change this file to match your own branding information, like custom social media links. Note that the Explorer uses the SVGs defined in src/assets/svg/social , which means you will have to add your own icons there if you use social media that we don’t list on our own Explorer.
You can find the networks in the network folder, where you will have to adjust them to match your own network’s values.
There are a couple images you will want to change in order to match your own brand:
- src/assets/images/logo.png ; ARK logo used in the Explorer
- public/favicon.ico|png ; favicon, which is an ARK logo
- ARKExplorer.png ; this is the banner image for the README file in the repository
There is a deployment script in
scripts/deploy.sh that pushes a local dist folder to a
gh-pages branch when you run
yarn task:deploy. This is hardcoded to point to the ARK Explorer repository on GitHub, so if you want to make use of this you will need to have it point to your own repository and set up GitHub Pages.