Add custom stylesheet

-The custom.scss file can be used to add custom css changes without affecting the ability to do a git pull update -Added a quick explanation of using the custom.scss file in the "Configure Explorer Settings" section of the README
2022-05-15 21:28:11 -06:00
parent bdae838d62
commit 2d976eaf59
5 changed files with 381 additions and 76 deletions
@@ -279,6 +279,8 @@ cp ./settings.json.template ./settings.json

 *Make required changes in settings.json*

+**NOTE:** You can further customize the site by adding css rules to the `public/css/custom.scss` file. Adding changes to `custom.scss` is the preferred method of customizing the css rules for your site, without affecting the ability to receive explorer code updates in the future.
+
 ### Start/Stop the Explorer

 #### Start Explorer (Use for Testing)
@@ -0,0 +1 @@
+/* Add custom css rules here */
@@ -10,11 +10,37 @@ function route_get_block(res, blockhash) {
  lib.get_block(blockhash, function (block) {
    if (block && block != 'There was an error. Check your console.') {
      if (blockhash == settings.block_page.genesis_block)
-        res.render('block', { active: 'block', block: block, confirmations: settings.shared_pages.confirmations, txs: 'GENESIS', showSync: db.check_show_sync_message(), styleHash: get_file_timestamp('./public/css/style.scss'), themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'), page_title_prefix: settings.coin.name + ' Genesis Block' });
+        res.render(
+          'block', 
+          {
+            active: 'block',
+            block: block,
+            confirmations: settings.shared_pages.confirmations,
+            txs: 'GENESIS',
+            showSync: db.check_show_sync_message(),
+            customHash: get_file_timestamp('./public/css/custom.scss'),
+            styleHash: get_file_timestamp('./public/css/style.scss'),
+            themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'),
+            page_title_prefix: settings.coin.name + ' Genesis Block'
+          }
+        );
      else {
        db.get_txs(block, function(txs) {
          if (txs.length > 0)
-            res.render('block', { active: 'block', block: block, confirmations: settings.shared_pages.confirmations, txs: txs, showSync: db.check_show_sync_message(), styleHash: get_file_timestamp('./public/css/style.scss'), themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'), page_title_prefix: settings.coin.name + ' Block ' + block.height });
+            res.render(
+              'block',
+              {
+                active: 'block',
+                block: block,
+                confirmations: settings.shared_pages.confirmations,
+                txs: txs,
+                showSync: db.check_show_sync_message(),
+                customHash: get_file_timestamp('./public/css/custom.scss'),
+                styleHash: get_file_timestamp('./public/css/style.scss'),
+                themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'),
+                page_title_prefix: settings.coin.name + ' Block ' + block.height
+              }
+            );
          else {
            // cannot find block in local database so get the data from the wallet directly
            var ntxs = [];
@@ -41,7 +67,20 @@ function route_get_block(res, blockhash) {
                  loop.next();
              });
            }, function() {
-              res.render('block', { active: 'block', block: block, confirmations: settings.shared_pages.confirmations, txs: ntxs, showSync: db.check_show_sync_message(), styleHash: get_file_timestamp('./public/css/style.scss'), themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'), page_title_prefix: settings.coin.name + ' Block ' + block.height });
+              res.render(
+                'block',
+                {
+                  active: 'block',
+                  block: block,
+                  confirmations: settings.shared_pages.confirmations,
+                  txs: ntxs,
+                  showSync: db.check_show_sync_message(),
+                  customHash: get_file_timestamp('./public/css/custom.scss'),
+                  styleHash: get_file_timestamp('./public/css/style.scss'),
+                  themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'),
+                  page_title_prefix: settings.coin.name + ' Block ' + block.height
+                }
+              );
            });
          }
        });
@@ -80,10 +119,36 @@ function route_get_tx(res, txid) {
        lib.get_blockcount(function(blockcount) {
          if (settings.claim_address_page.enabled == true) {
            db.populate_claim_address_names(tx, function(tx) {
-              res.render('tx', { active: 'tx', tx: tx, confirmations: settings.shared_pages.confirmations, blockcount: (blockcount ? blockcount : 0), showSync: db.check_show_sync_message(), styleHash: get_file_timestamp('./public/css/style.scss'), themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'), page_title_prefix: settings.coin.name + ' Transaction ' + tx.txid });
+              res.render(
+                'tx',
+                {
+                  active: 'tx',
+                  tx: tx,
+                  confirmations: settings.shared_pages.confirmations,
+                  blockcount: (blockcount ? blockcount : 0),
+                  showSync: db.check_show_sync_message(),
+                  customHash: get_file_timestamp('./public/css/custom.scss'),
+                  styleHash: get_file_timestamp('./public/css/style.scss'),
+                  themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'),
+                  page_title_prefix: settings.coin.name + ' Transaction ' + tx.txid
+                }
+              );
            });
          } else
-            res.render('tx', { active: 'tx', tx: tx, confirmations: settings.shared_pages.confirmations, blockcount: (blockcount ? blockcount : 0), showSync: db.check_show_sync_message(), styleHash: get_file_timestamp('./public/css/style.scss'), themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'), page_title_prefix: settings.coin.name + ' Transaction ' + tx.txid });
+            res.render(
+              'tx',
+              {
+                active: 'tx',
+                tx: tx,
+                confirmations: settings.shared_pages.confirmations,
+                blockcount: (blockcount ? blockcount : 0),
+                showSync: db.check_show_sync_message(),
+                customHash: get_file_timestamp('./public/css/custom.scss'),
+                styleHash: get_file_timestamp('./public/css/style.scss'),
+                themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'),
+                page_title_prefix: settings.coin.name + ' Transaction ' + tx.txid
+              }
+            );
        });
      } else {
        lib.get_rawtransaction(txid, function(rtx) {
@@ -104,10 +169,36 @@ function route_get_tx(res, txid) {

                    if (settings.claim_address_page.enabled == true) {
                      db.populate_claim_address_names(utx, function(utx) {
-                        res.render('tx', { active: 'tx', tx: utx, confirmations: settings.shared_pages.confirmations, blockcount:-1, showSync: db.check_show_sync_message(), styleHash: get_file_timestamp('./public/css/style.scss'), themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'), page_title_prefix: settings.coin.name + ' Transaction ' + utx.txid });
+                        res.render(
+                          'tx',
+                          {
+                            active: 'tx',
+                            tx: utx,
+                            confirmations: settings.shared_pages.confirmations,
+                            blockcount: -1,
+                            showSync: db.check_show_sync_message(),
+                            customHash: get_file_timestamp('./public/css/custom.scss'),
+                            styleHash: get_file_timestamp('./public/css/style.scss'),
+                            themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'),
+                            page_title_prefix: settings.coin.name + ' Transaction ' + utx.txid
+                          }
+                        );
                      });
                    } else
-                      res.render('tx', { active: 'tx', tx: utx, confirmations: settings.shared_pages.confirmations, blockcount:-1, showSync: db.check_show_sync_message(), styleHash: get_file_timestamp('./public/css/style.scss'), themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'), page_title_prefix: settings.coin.name + ' Transaction ' + utx.txid });
+                      res.render(
+                        'tx',
+                        {
+                          active: 'tx',
+                          tx: utx,
+                          confirmations: settings.shared_pages.confirmations,
+                          blockcount: -1,
+                          showSync: db.check_show_sync_message(),
+                          customHash: get_file_timestamp('./public/css/custom.scss'),
+                          styleHash: get_file_timestamp('./public/css/style.scss'),
+                          themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'),
+                          page_title_prefix: settings.coin.name + ' Transaction ' + utx.txid
+                        }
+                      );
                  } else {
                    // check if blockheight exists
                    if (!rtx.blockheight && rtx.blockhash) {
@@ -128,10 +219,36 @@ function route_get_tx(res, txid) {
                          lib.get_blockcount(function(blockcount) {
                            if (settings.claim_address_page.enabled == true) {
                              db.populate_claim_address_names(utx, function(utx) {
-                                res.render('tx', { active: 'tx', tx: utx, confirmations: settings.shared_pages.confirmations, blockcount: (blockcount ? blockcount : 0), showSync: db.check_show_sync_message(), styleHash: get_file_timestamp('./public/css/style.scss'), themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'), page_title_prefix: settings.coin.name + ' Transaction ' + utx.txid });
+                                res.render(
+                                  'tx',
+                                  {
+                                    active: 'tx',
+                                    tx: utx,
+                                    confirmations: settings.shared_pages.confirmations,
+                                    blockcount: (blockcount ? blockcount : 0),
+                                    showSync: db.check_show_sync_message(),
+                                    customHash: get_file_timestamp('./public/css/custom.scss'),
+                                    styleHash: get_file_timestamp('./public/css/style.scss'),
+                                    themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'),
+                                    page_title_prefix: settings.coin.name + ' Transaction ' + utx.txid
+                                  }
+                                );
                              });
                            } else
-                              res.render('tx', { active: 'tx', tx: utx, confirmations: settings.shared_pages.confirmations, blockcount: (blockcount ? blockcount : 0), showSync: db.check_show_sync_message(), styleHash: get_file_timestamp('./public/css/style.scss'), themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'), page_title_prefix: settings.coin.name + ' Transaction ' + utx.txid });
+                              res.render(
+                                'tx',
+                                {
+                                  active: 'tx',
+                                  tx: utx,
+                                  confirmations: settings.shared_pages.confirmations,
+                                  blockcount: (blockcount ? blockcount : 0),
+                                  showSync: db.check_show_sync_message(),
+                                  customHash: get_file_timestamp('./public/css/custom.scss'),
+                                  styleHash: get_file_timestamp('./public/css/style.scss'),
+                                  themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'),
+                                  page_title_prefix: settings.coin.name + ' Transaction ' + utx.txid
+                                }
+                              );
                          });
                        } else {
                          // cannot load tx
@@ -153,10 +270,36 @@ function route_get_tx(res, txid) {
                      lib.get_blockcount(function(blockcount) {
                        if (settings.claim_address_page.enabled == true) {
                          db.populate_claim_address_names(utx, function(utx) {
-                            res.render('tx', { active: 'tx', tx: utx, confirmations: settings.shared_pages.confirmations, blockcount: (blockcount ? blockcount : 0), showSync: db.check_show_sync_message(), styleHash: get_file_timestamp('./public/css/style.scss'), themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'), page_title_prefix: settings.coin.name + ' Transaction ' + utx.txid });
+                            res.render(
+                              'tx',
+                              {
+                                active: 'tx',
+                                tx: utx,
+                                confirmations: settings.shared_pages.confirmations,
+                                blockcount: (blockcount ? blockcount : 0),
+                                showSync: db.check_show_sync_message(),
+                                customHash: get_file_timestamp('./public/css/custom.scss'),
+                                styleHash: get_file_timestamp('./public/css/style.scss'),
+                                themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'),
+                                page_title_prefix: settings.coin.name + ' Transaction ' + utx.txid
+                              }
+                            );
                          });
                        } else
-                          res.render('tx', { active: 'tx', tx: utx, confirmations: settings.shared_pages.confirmations, blockcount: (blockcount ? blockcount : 0), showSync: db.check_show_sync_message(), styleHash: get_file_timestamp('./public/css/style.scss'), themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'), page_title_prefix: settings.coin.name + ' Transaction ' + utx.txid });
+                          res.render(
+                            'tx',
+                            {
+                              active: 'tx',
+                              tx: utx,
+                              confirmations: settings.shared_pages.confirmations,
+                              blockcount: (blockcount ? blockcount : 0),
+                              showSync: db.check_show_sync_message(),
+                              customHash: get_file_timestamp('./public/css/custom.scss'),
+                              styleHash: get_file_timestamp('./public/css/style.scss'),
+                              themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'),
+                              page_title_prefix: settings.coin.name + ' Transaction ' + utx.txid
+                            }
+                          );
                      });
                    }
                  }
@@ -176,11 +319,35 @@ function route_get_index(res, error) {
  if (settings.index_page.page_header.show_last_updated == true) {
    // lookup last updated date
    db.get_stats(settings.coin.name, function (stats) {
-      res.render('index', { active: 'home', error: error, last_updated: stats.blockchain_last_updated, showSync: db.check_show_sync_message(), styleHash: get_file_timestamp('./public/css/style.scss'), themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'), page_title_prefix: settings.coin.name + ' Block Explorer' });
+      res.render(
+        'index',
+        {
+          active: 'home',
+          error: error,
+          last_updated: stats.blockchain_last_updated,
+          showSync: db.check_show_sync_message(),
+          customHash: get_file_timestamp('./public/css/custom.scss'),
+          styleHash: get_file_timestamp('./public/css/style.scss'),
+          themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'),
+          page_title_prefix: settings.coin.name + ' Block Explorer'
+        }
+      );
    });
  } else {
    // skip lookup of the last updated date and display the page now
-    res.render('index', { active: 'home', error: error, last_updated: null, showSync: db.check_show_sync_message(), styleHash: get_file_timestamp('./public/css/style.scss'), themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'), page_title_prefix: settings.coin.name + ' Block Explorer' });
+    res.render(
+      'index',
+      {
+        active: 'home',
+        error: error,
+        last_updated: null,
+        showSync: db.check_show_sync_message(),
+        customHash: get_file_timestamp('./public/css/custom.scss'),
+        styleHash: get_file_timestamp('./public/css/style.scss'),
+        themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'),
+        page_title_prefix: settings.coin.name + ' Block Explorer'
+      }
+    );
  }
 }

@@ -190,7 +357,18 @@ function route_get_address(res, hash) {
    // lookup address in local collection
    db.get_address(hash, false, function(address) {
      if (address)
-        res.render('address', { active: 'address', address: address, showSync: db.check_show_sync_message(), styleHash: get_file_timestamp('./public/css/style.scss'), themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'), page_title_prefix: settings.coin.name + ' Address ' + (address['name'] == null || address['name'] == '' ? address.a_id : address['name']) });
+        res.render(
+          'address',
+          {
+            active: 'address',
+            address: address,
+            showSync: db.check_show_sync_message(),
+            customHash: get_file_timestamp('./public/css/custom.scss'),
+            styleHash: get_file_timestamp('./public/css/style.scss'),
+            themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'),
+            page_title_prefix: settings.coin.name + ' Address ' + (address['name'] == null || address['name'] == '' ? address.a_id : address['name'])
+          }
+        );
      else
        route_get_index(res, hash + ' not found');
    });
@@ -204,12 +382,36 @@ function route_get_claim_form(res, hash) {
    // check if a hash was passed in
    if (hash == null || hash == '') {
      // no hash so just load the claim page without an address
-      res.render("claim_address", { active: "claim-address", hash: hash, claim_name: '', showSync: db.check_show_sync_message(), styleHash: get_file_timestamp('./public/css/style.scss'), themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'), page_title_prefix: settings.coin.name + ' Claim Wallet Address' });
+      res.render(
+        'claim_address',
+        {
+          active: 'claim-address',
+          hash: hash,
+          claim_name: '',
+          showSync: db.check_show_sync_message(),
+          customHash: get_file_timestamp('./public/css/custom.scss'),
+          styleHash: get_file_timestamp('./public/css/style.scss'),
+          themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'),
+          page_title_prefix: settings.coin.name + ' Claim Wallet Address'
+        }
+      );
    } else {
      // lookup hash in the address collection
      db.get_address(hash, false, function(address) {
        // load the claim page regardless of whether the address exists or not
-        res.render("claim_address", { active: "claim-address", hash: hash, claim_name: (address == null || address.name == null ? '' : address.name), showSync: db.check_show_sync_message(), styleHash: get_file_timestamp('./public/css/style.scss'), themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'), page_title_prefix: settings.coin.name + ' Claim Wallet Address ' + hash });
+        res.render(
+          'claim_address',
+          {
+            active: 'claim-address',
+            hash: hash,
+            claim_name: (address == null || address.name == null ? '' : address.name),
+            showSync: db.check_show_sync_message(),
+            customHash: get_file_timestamp('./public/css/custom.scss'),
+            styleHash: get_file_timestamp('./public/css/style.scss'),
+            themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'),
+            page_title_prefix: settings.coin.name + ' Claim Wallet Address ' + hash
+          }
+        );
      });
    }
  } else
@@ -226,7 +428,18 @@ router.get('/info', function(req, res) {
  // ensure api page is enabled
  if (settings.api_page.enabled == true) {
    // load the api page
-    res.render('info', { active: 'info', address: req.headers.host, showSync: db.check_show_sync_message(), styleHash: get_file_timestamp('./public/css/style.scss'), themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'), page_title_prefix: settings.coin.name + ' Public API' });
+    res.render(
+      'info',
+      {
+        active: 'info',
+        address: req.headers.host,
+        showSync: db.check_show_sync_message(),
+        customHash: get_file_timestamp('./public/css/custom.scss'),
+        styleHash: get_file_timestamp('./public/css/style.scss'),
+        themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'),
+        page_title_prefix: settings.coin.name + ' Public API'
+      }
+    );
  } else {
    // api page is not enabled so default to the index page
    route_get_index(res, null);
@@ -267,7 +480,9 @@ router.get('/markets/:market/:coin_symbol/:pair_symbol', function(req, res) {
        if (settings.markets_page.page_header.show_last_updated == true) {
          // lookup last updated date
          db.get_stats(settings.coin.name, function (stats) {
-            res.render('./market', {
+            res.render(
+              './market',
+              {
                active: 'markets',
                marketdata: {
                  market_name: (market_data.market_name == null ? '' : market_data.market_name),
@@ -280,14 +495,18 @@ router.get('/markets/:market/:coin_symbol/:pair_symbol', function(req, res) {
                market: market_id,
                last_updated: stats.markets_last_updated,
                showSync: db.check_show_sync_message(),
+                customHash: get_file_timestamp('./public/css/custom.scss'),
                styleHash: get_file_timestamp('./public/css/style.scss'),
                themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'),
                page_title_prefix: locale.mkt_title.replace('{1}', (market_data.market_name == null ? '' : market_data.market_name) + ' (' + coin_symbol + '/' + pair_symbol + ')')
-            });
+              }
+            );
          });
        } else {
          // skip looking up the last updated date and display the page now
-          res.render('./market', {
+          res.render(
+            './market',
+            {
              active: 'markets',
              marketdata: {
                market_name: (market_data.market_name == null ? '' : market_data.market_name),
@@ -300,10 +519,12 @@ router.get('/markets/:market/:coin_symbol/:pair_symbol', function(req, res) {
              market: market_id,
              last_updated: null,
              showSync: db.check_show_sync_message(),
+              customHash: get_file_timestamp('./public/css/custom.scss'),
              styleHash: get_file_timestamp('./public/css/style.scss'),
              themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'),
              page_title_prefix: locale.mkt_title.replace('{1}', (market_data.market_name == null ? '' : market_data.market_name) + ' (' + coin_symbol + '/' + pair_symbol + ')')
-          });
+            }
+          );
        }
      });
    } else {
@@ -323,7 +544,9 @@ router.get('/richlist', function(req, res) {
      db.get_richlist(settings.coin.name, function(richlist) {
        if (richlist) {
          db.get_distribution(richlist, stats, function(distribution) {
-            res.render('richlist', {
+            res.render(
+              'richlist',
+              {
                active: 'richlist',
                balance: richlist.balance,
                received: richlist.received,
@@ -336,10 +559,12 @@ router.get('/richlist', function(req, res) {
                diste: distribution.t_101plus,
                last_updated: (settings.richlist_page.page_header.show_last_updated == true ? stats.richlist_last_updated : null),
                showSync: db.check_show_sync_message(),
+                customHash: get_file_timestamp('./public/css/custom.scss'),
                styleHash: get_file_timestamp('./public/css/style.scss'),
                themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'),
                page_title_prefix: 'Top ' + settings.coin.name + ' Coin Holders'
-            });
+              }
+            );
          });
        } else {
          // richlist data not found so default to the index page
@@ -360,11 +585,33 @@ router.get('/movement', function(req, res) {
    if (settings.movement_page.page_header.show_last_updated == true) {
      // lookup last updated date
      db.get_stats(settings.coin.name, function (stats) {
-        res.render('movement', {active: 'movement', last_updated: stats.blockchain_last_updated, showSync: db.check_show_sync_message(), styleHash: get_file_timestamp('./public/css/style.scss'), themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'), page_title_prefix: settings.coin.name + ' Coin Movements' });
+        res.render(
+          'movement',
+          {
+            active: 'movement',
+            last_updated: stats.blockchain_last_updated,
+            showSync: db.check_show_sync_message(),
+            customHash: get_file_timestamp('./public/css/custom.scss'),
+            styleHash: get_file_timestamp('./public/css/style.scss'),
+            themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'),
+            page_title_prefix: settings.coin.name + ' Coin Movements'
+          }
+        );
      });
    } else {
      // skip lookup of the last updated date and display the page now
-      res.render('movement', {active: 'movement', last_updated: null, showSync: db.check_show_sync_message(), styleHash: get_file_timestamp('./public/css/style.scss'), themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'), page_title_prefix: settings.coin.name + ' Coin Movements' });
+      res.render(
+        'movement',
+        {
+          active: 'movement',
+          last_updated: null,
+          showSync: db.check_show_sync_message(),
+          customHash: get_file_timestamp('./public/css/custom.scss'),
+          styleHash: get_file_timestamp('./public/css/style.scss'),
+          themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'),
+          page_title_prefix: settings.coin.name + ' Coin Movements'
+        }
+      );
    }
  } else {
    // movement page is not enabled so default to the index page
@@ -379,11 +626,33 @@ router.get('/network', function(req, res) {
    if (settings.network_page.page_header.show_last_updated == true) {
      // lookup last updated date
      db.get_stats(settings.coin.name, function (stats) {
-        res.render('network', {active: 'network', last_updated: stats.network_last_updated, showSync: db.check_show_sync_message(), styleHash: get_file_timestamp('./public/css/style.scss'), themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'), page_title_prefix: settings.coin.name + ' Network Peers' });
+        res.render(
+          'network',
+          {
+            active: 'network',
+            last_updated: stats.network_last_updated,
+            showSync: db.check_show_sync_message(),
+            customHash: get_file_timestamp('./public/css/custom.scss'),
+            styleHash: get_file_timestamp('./public/css/style.scss'),
+            themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'),
+            page_title_prefix: settings.coin.name + ' Network Peers'
+          }
+        );
      });
    } else {
      // skip lookup of the last updated date and display the page now
-      res.render('network', {active: 'network', last_updated: null, showSync: db.check_show_sync_message(), styleHash: get_file_timestamp('./public/css/style.scss'), themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'), page_title_prefix: settings.coin.name + ' Network Peers' });
+      res.render(
+        'network',
+        {
+          active: 'network',
+          last_updated: null,
+          showSync: db.check_show_sync_message(),
+          customHash: get_file_timestamp('./public/css/custom.scss'),
+          styleHash: get_file_timestamp('./public/css/style.scss'),
+          themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'),
+          page_title_prefix: settings.coin.name + ' Network Peers'
+        }
+      );
    }
  } else {
    // network page is not enabled so default to the index page
@@ -399,11 +668,33 @@ router.get('/masternodes', function(req, res) {
    if (settings.masternodes_page.page_header.show_last_updated == true) {
      // lookup last updated date
      db.get_stats(settings.coin.name, function (stats) {
-        res.render('masternodes', {active: 'masternodes', last_updated: stats.masternodes_last_updated, showSync: db.check_show_sync_message(), styleHash: get_file_timestamp('./public/css/style.scss'), themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'), page_title_prefix: settings.coin.name + ' Masternodes' });
+        res.render(
+          'masternodes',
+          {
+            active: 'masternodes',
+            last_updated: stats.masternodes_last_updated,
+            showSync: db.check_show_sync_message(),
+            customHash: get_file_timestamp('./public/css/custom.scss'),
+            styleHash: get_file_timestamp('./public/css/style.scss'),
+            themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'),
+            page_title_prefix: settings.coin.name + ' Masternodes'
+          }
+        );
      });
    } else {
      // skip lookup of the last updated date and display the page now
-      res.render('masternodes', {active: 'masternodes', last_updated: null, showSync: db.check_show_sync_message(), styleHash: get_file_timestamp('./public/css/style.scss'), themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'), page_title_prefix: settings.coin.name + ' Masternodes' });
+      res.render(
+        'masternodes',
+        {
+          active: 'masternodes',
+          last_updated: null,
+          showSync: db.check_show_sync_message(),
+          customHash: get_file_timestamp('./public/css/custom.scss'),
+          styleHash: get_file_timestamp('./public/css/style.scss'),
+          themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'),
+          page_title_prefix: settings.coin.name + ' Masternodes'
+        }
+      );
    }
  } else {
    // masternode page is not enabled so default to the index page
@@ -430,17 +721,21 @@ router.get('/reward', function(req, res) {
            return 0;
        });

-        res.render('reward', {
+        res.render(
+          'reward',
+          {
            active: 'reward',
            stats: stats,
            heavy: heavy,
            votes: votes,
            last_updated: (settings.blockchain_specific.heavycoin.reward_page.page_header.show_last_updated == true ? stats.reward_last_updated : null),
            showSync: db.check_show_sync_message(),
+            customHash: get_file_timestamp('./public/css/custom.scss'),
            styleHash: get_file_timestamp('./public/css/style.scss'),
            themeHash: get_file_timestamp('./public/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css'),
            page_title_prefix: settings.coin.name + ' Reward/Voting Details'
-        });
+          }
+        );
      });
    });
  } else {
@@ -97,12 +97,18 @@ check_argument_passed(function(retVal) {
  fs.writeFile('./public/css/_theme-selector.scss', `$theme-name: "${settings.shared_pages.theme}";`, function (err) {
    const sass = require('sass');

-    // generate minified css from scss file
+    // generate minified css from style.scss file
    const minified = sass.compile('./public/css/style.scss', {style: 'compressed'});

    // save the minified css to file
    fs.writeFile('./public/css/style.min.css', minified.css, function (err) {
+      // generate minified css from custom.scss file
+      const custom_minified = sass.compile('./public/css/custom.scss', {style: 'compressed'});
+
+      // save the minified css to file
+      fs.writeFile('./public/css/custom.min.css', custom_minified.css, function (err) {    
        // Finished pre-loading
      });
    });
+  });
 });
@@ -13,6 +13,7 @@ html(lang='en')
      link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/4.1.4/css/flag-icons.min.css')
    link(rel='stylesheet', type='text/css', href='https://cdn.datatables.net/v/bs5/dt-1.11.3/datatables.min.css')
    link(rel='stylesheet', href='/css/style.min.css' + (styleHash == null ? '' : '?h=' + styleHash))
+    link(rel='stylesheet', href='/css/custom.min.css' + (customHash == null ? '' : '?h=' + customHash))
    script(type='text/javascript', src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js', integrity='sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==', crossorigin='anonymous', referrerpolicy='no-referrer')
    script(type='text/javascript', src='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js', integrity='sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p', crossorigin='anonymous')
    if active == 'markets' || active == 'richlist'