Customization

Learn how to customize this template to match your project’s branding and requirements.

Branding

Site Title and Metadata

Edit app/layout.tsx to update the site metadata:


export const metadata: Metadata = {
  title: "Your Project Docs",
  description: "Documentation for Your Amazing Project",
};

In the same file, find the navbar constant and update:


<Navbar
  logo={
    <div className="flex items-center gap-2 hover:opacity-90 transition-opacity">
      <img src="/your-logo.svg" alt="Your Logo" className="h-8 w-auto" />
      <span className="font-bold text-2xl tracking-tight text-gradient-tri">
        Your Project
      </span>
    </div>
  }
>

Logos

Replace these files in the public/ directory:

File	Description	Recommended Size
`openland.svg`	Main project logo (navbar left)	32px height
`byteland.svg`	Secondary logo (navbar right, spins)	24x24px

Colors

Gradient Colors

The ByteLand tri-color gradient is defined in app/globals.css:


.text-gradient-tri {
  background: linear-gradient(to right, #007aff, #34c759, #ff3b30);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
 
.bg-gradient-tri {
  background: linear-gradient(to right, #007aff, #34c759, #ff3b30);
}

To use your own colors, replace the hex values:

#007aff - Blue (left)
#34c759 - Green (center)
#ff3b30 - Red (right)

Theme Colors

Nextra handles dark/light mode automatically. To customize theme colors, you can override CSS variables in app/globals.css:


:root {
  --nextra-primary-hue: 212; /* Blue hue */
}

Typography

Font

This template uses Exo 2 from Google Fonts. To change it:

Edit app/layout.tsx
Import a different font from next/font/google
Update the className on the <body> tag

Example:


import { Inter } from "next/font/google";
 
const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
  display: "swap",
});

Edit app/_meta.ts to add or modify top-level navigation:


export default {
  docs: {
    type: "page",
    title: "Documentation",
  },
  blog: {
    type: "page",
    title: "Blog",
    href: "https://your-blog.com",
  },
};

Edit app/docs/_meta.ts to customize the sidebar:


export default {
  "getting-started": "Getting Started",
  "-- Guides": {
    type: "separator",
    title: "Guides",
  },
  "basic-usage": "Basic Usage",
  "advanced-topics": "Advanced Topics",
};

External Links

GitHub Repository Link

Update the GitHub link in app/layout.tsx:


<a
  href="https://github.com/your-org/your-repo"
  target="_blank"
  rel="noreferrer"
>

ByteLand Logo Link

To change where the spinning ByteLand logo links to, edit app/BytelandLogo.tsx:


<a
  href="https://your-website.com"
  target="_blank"
  rel="noreferrer"
>

Footer

The footer is disabled by default. To enable it, edit app/layout.tsx:


<Layout
  // ... other props
  footer={
    <div className="py-8 text-center opacity-60">
      © 2024 Your Company. All rights reserved.
    </div>
  }
>