Skip to content

Customize Your Landing Page

Basic Set Up

To return to base configuration for landing page, navigate to your index.md file, and delete the properties at top of file: 

// Delete this text from your index.md file
---
title: Welcome to Bnkops Change Maker V3
template: home.html
---

This will allow you to write your home page in standard markdown.

Custom Set Up

Alternatively you can edit your home pages html directly in editor. To view your front/home page html, click on the table icon next to the gear icon. Edit content and click save to upload and update landing page.

But bnkops I don't read or write html 😧

Don't panic! That is what this guide is for. Learn how to update your front page effortlessly.

Prompting for Updating

The code presented is standard html, which is easy to update by large language models (LLMs), often referred to as Ai. bnkops has written a manual for creating a local llm system that can do this work entirely for free. We also supply access to Daisy, our own local, ethical, and custom LLM upon request. You can use any LLM to write this page; including freely accessible systems like chatgpt, claude, llama, or even whatsapp chat.

These same techniques can be used on the site settings (accessed through the cog icon). All documentation on site options is available here.

When asking an LLM to help customize your landing page, follow these key principles:

  1. Provide Context: Let the LLM know about the existing structure 

    I'm using MkDocs Material theme with a custom landing page. 
The template extends main.html and uses a dark theme. 
I am want to fully update my landing page.

  2. Specify Requirements: Clearly state what elements you want 

    I need:
- A hero section with a gradient background
- Feature cards with hover effects
- Smooth scroll animations
- Custom CSS styling that matches the dark theme

  3. Reference Existing Code: If you're modifying an existing design 

    I'm starting with the default home.html template. Here's the current code:
[paste your current home.html content]

Example Prompts

For Basic Modifications

Please update my home.html template to add a new feature card section about [topic].
Keep the existing dark theme (#1e2127) and yellow accents (#ffd700).

For Animation Effects

Add smooth scroll animations to my home.html template. I want:
- Elements to fade in as they scroll into view
- Subtle hover effects on cards
- No flashy or distracting animations
- Animations should complement the dark theme

For Complete Redesigns

Create a custom home.html template for MkDocs Material with:
1. Dark theme matching [#1e2127](http://localhost:4000/tags/1e2127) background
2. Yellow (#ffd700) accent colors
3. [List your specific sections]
4. [List your desired animations]

Keep the template extending from main.html and ensure all styling is contained within the content block.

Important Reminders

  • Template Structure: Always remind the LLM to use {% extends "main.html" %} and proper block structure
  • Color Scheme: Specify the exact colors (#1e2127 for background, [#ffd700] for accents)
  • Compatibility: Ask for self-contained CSS and JavaScript (no external dependencies)
  • Accessibility: Request that animations respect user preferences (prefers-reduced-motion)

Example Complete Prompt

Here's a full example of a well-structured prompt:

Please help me update my MkDocs Material landing page. I need:

1. Template Structure:
- Extend from main.html
- Keep all CSS in a style block
- Keep JavaScript in a script block

2. Design Requirements:
- Dark theme (#1e2127 background)
- Yellow accents (#ffd700)
- Responsive layout
- Smooth animations on scroll

3. Specific Sections:
- Hero section with gradient
- Feature cards with hover effects
- Documentation section
- Getting started guide

4. Animations:
- Fade-in on scroll
- Subtle hover effects
- No aggressive animations

Please provide the complete home.html template with all necessary CSS and JavaScript included.

Testing the Results

After receiving the HTML:

  1. Save it to docs/overrides/home.html. You can do this directly in editor and click the save button to upload. You may receive a error reading; remember to reload page after saving. Error messages often will automatically resolve after a few minutes and reoload.
  2. Check the template extends properly
  3. Verify all styles are contained within the template
  4. Test responsiveness at different screen sizes
  5. Ensure animations work smoothly

Iterative Improvements

If you need adjustments:

  1. Specify exactly what needs changing
  2. Provide the current code
  3. Describe the desired outcome
  4. Ask for specific sections to be updated

Remember: LLMs can be creative with designs while maintaining your core requirements. Be specific about what must be preserved (like color schemes and structure) but allow flexibility for creative elements.