Vega Simple Custom Footer (FAUQP)

Clearinghouse Repository
,
1

VEGA FOOTER GENERIC.txt (3.0 KB)

This footer code mimics what is on the standard Vega catalog, but allows you to have multiple links, not just the single privacy policy (or the III ones), in this case a link to the classic PAC. It includes the GA tag if you don’t have that in the header (just remove the script if not needed). It’s using our color orange (#d15420).

While the attachement is using the font Vega uses off the shelf, I will be using Montserrat for our customized sites (this is one of my test sites that uses #006F79 vs. the orange). Thus I had to import the font family inside the block and set font-family: ‘Montserrat’, sans-serif !important; across the elements…

<style>
  /* Import Montserrat Font from Google Fonts */
  @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

  /* Native Vega Footer Style Override */
  .custom-vega-footer-wrapper {
    width: 100% !important;
    background-color: var(--footer-bg-color, #ffffff) !important;
    border-top: 1px solid var(--border-color, #e0e0e0) !important;
    padding: 16px 24px !important;
    box-sizing: border-box !important;
    margin-top: auto !important;
    font-family: 'Montserrat', sans-serif !important;
  }

  .custom-vega-footer-inner {
    max-width: 1400px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 16px 24px !important;
    font-family: 'Montserrat', sans-serif !important;
  }

  .custom-vega-footer-nav {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    font-family: 'Montserrat', sans-serif !important;
  }

  .custom-vega-footer-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 16px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--primary-color, #5c1d37) !important;
    background-color: transparent !important;
    border: 1px solid var(--primary-color, #5c1d37) !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
  }

  .custom-vega-footer-btn:hover,
  .custom-vega-footer-btn:focus {
    background-color: var(--primary-color, #5c1d37) !important;
    color: #ffffff !important;
    text-decoration: none !important;
  }
/* Mobile Centering Rules */
  @media screen and (max-width: 768px) {
    .custom-vega-footer-inner,
    .custom-vega-footer-nav {
      justify-content: center !important;
      text-align: center !important;
      width: 100% !important;
    }

    .custom-vega-footer-btn {
      width: 100% !important;
      max-width: 320px !important; /* Keeps buttons uniform and readable */
    }
  }
</style>
1 Like