Omnira Docs v1.0.0

Name, logo and contact details

All of these live in one file, src/config/site.json, and appear on every page of every demo: header, footer, page titles, top bar and contact sections.

Business name#

src/config/site.json
{
  "name": "Harbour & Vine",
  "tagline": "Seasonal cooking on the waterfront"
}

name appears next to the logo, in the footer, in the copyright line and in every browser tab title (About | Harbour & Vine). tagline is used as the page description when a page doesn't set its own.

To use a different name on one demo only, add "brand": "Another Name" to that demo's demo.json.

By default the logo is the round Omnira mark plus your business name as text. The mark automatically takes each demo's primary colour. To use your own logo file:

  1. Copy your logo into src/img/, for example src/img/my-logo.svg. SVG or PNG both work; SVG stays sharp at every size.
  2. If your logo is dark, also make a white version for dark and transparent headers, e.g. my-logo-white.svg.
  3. Set it in site.json:
    src/config/site.json
    "logo": {
  "image": "assets/img/my-logo.svg",
  "imageLight": "assets/img/my-logo-white.svg",
  "height": 40
}

height is in pixels; the width follows automatically. Leave image empty ("") to go back to the built-in mark.

To keep the built-in mark but change its colour, set "logoMark": "#1d4ed8" in a demo's theme.

In the HTML files#

The logo is inside <a class="brand"> in the header (twice: once for the normal header and once for the scrolled header), in the mobile menu and in the footer. Replace the <svg>…</svg><span class="logo-text">…</span> with:

HTML
&lt;img class="logo-img" src="../assets/img/my-logo.svg" alt="Harbour &amp; Vine" style="height:40px"&gt;

Favicon (browser tab icon)#

Replace src/img/logo-mark.svg (or template/assets/img/logo-mark.svg) with your own square icon, keeping the same file name. For a PNG icon, change the <link rel="icon"> line in the page <head> to point at your file.

Phone, email and address#

src/config/site.json
"email": "hello@harbourandvine.com",
"phone": "+1 (555) 014-2290",
"address": "240 Market Street, San Francisco, CA"

These fill the footer, the top bar and contact sections. Each demo already has its own example details in a contact block in its demo.json, which overrides site.json:

src/demos/restaurant/demo.json
"contact": {
  "address": "12 Harbour Walk, Portland, ME",
  "phone": "+1 (555) 013-4400",
  "email": "reservations@harbourandvine.com"
}

Replace the details in both places, or delete the demo's contact block so site.json is used everywhere. Some pages also mention contact details in their text (for example a contact page's info boxes); search the demo's pages folder for the old phone number to catch them all.

src/config/site.json
"social": {
  "facebook": "https://facebook.com/yourpage",
  "instagram": "https://instagram.com/yourname",
  "x": "https://x.com/yourname",
  "linkedin": "https://linkedin.com/company/yourcompany",
  "youtube": "https://youtube.com/@yourchannel"
}

The name on the left picks the icon. Any Bootstrap Icons brand name works, for example facebook, instagram, linkedin, youtube, tiktok, pinterest, whatsapp, threads, github, dribbble, behance, telegram; use x for X (Twitter). Remove a line to remove the icon. Links open in a new tab.

src/config/site.json
"footer": {
  "copyright": "© {year} {name}. All rights reserved.",
  "credit": ""
}

{year} becomes the current year and {name} your business name. credit is the small “Built with the Omnira template” text on the right of the footer; set it to "" to remove it.