143 lines
3.0 KiB
Markdown
143 lines
3.0 KiB
Markdown
# 🍋 LemonLink.eu Theme for Homarr
|
|
|
|
Based on your website lemonlink.eu, here's the matching theme configuration.
|
|
|
|
## 🎨 Color Scheme
|
|
|
|
From your website's dark theme:
|
|
|
|
```css
|
|
/* Primary Colors */
|
|
--primary: #6366f1; /* Indigo */
|
|
--secondary: #8b5cf6; /* Purple */
|
|
--accent: #fbbf24; /* Amber/Gold */
|
|
|
|
/* Background */
|
|
--bg-dark: #0a0a0f; /* Near black */
|
|
--bg-card: rgba(255,255,255,0.03); /* Glass effect */
|
|
|
|
/* Text */
|
|
--text-primary: #e2e8f0; /* Light gray */
|
|
--text-secondary: #94a3b8; /* Muted gray */
|
|
```
|
|
|
|
## 🖼️ Favicon & Logo
|
|
|
|
### Option 1: Direct from lemonlink.eu
|
|
```
|
|
Favicon URL: https://lemonlink.eu/favicon.ico
|
|
Logo URL: https://lemonlink.eu/logo.png (or .svg)
|
|
```
|
|
|
|
### Option 2: Upload Custom
|
|
|
|
If you have the logo files locally, upload them to Homarr:
|
|
```
|
|
Settings → Appearance → Logo
|
|
Settings → Appearance → Favicon
|
|
```
|
|
|
|
## ⚙️ Homarr Settings
|
|
|
|
### Appearance Settings:
|
|
|
|
**Colors:**
|
|
```
|
|
Primary Color: #6366f1
|
|
Secondary Color: #8b5cf6
|
|
Background Color: #0a0a0f
|
|
Text Color: #e2e8f0
|
|
```
|
|
|
|
**Custom CSS:**
|
|
Use the full CSS from `config/custom-boards.css` - it matches lemonlink.eu style!
|
|
|
|
### Board Names (Matching Your Site Sections):
|
|
|
|
Based on your website's "Infrastructure" section:
|
|
|
|
| Board Name | Content |
|
|
|------------|---------|
|
|
| **🏠 Infrastructure** | Proxmox, Portainer, TrueNAS, Network |
|
|
| **📊 Monitoring** | Grafana, Prometheus, Dash. |
|
|
| **💾 Storage** | TrueNAS details |
|
|
| **🖧 Network** | UniFi, Tailscale, VPN |
|
|
|
|
## 🚀 Quick Setup
|
|
|
|
### Step 1: Set Favicon & Logo
|
|
```
|
|
1. Go to Settings (gear icon)
|
|
2. Appearance tab
|
|
3. Favicon: Enter https://lemonlink.eu/favicon.ico
|
|
OR upload your favicon file
|
|
4. Logo: Enter https://lemonlink.eu/logo.svg (if exists)
|
|
OR upload your logo
|
|
```
|
|
|
|
### Step 2: Apply Theme Colors
|
|
```
|
|
Settings → Appearance
|
|
|
|
Primary: #6366f1
|
|
Secondary: #8b5cf6
|
|
Background: #0a0a0f
|
|
```
|
|
|
|
### Step 3: Add Custom CSS
|
|
Copy the entire CSS from `config/custom-boards.css` and paste into Custom CSS box.
|
|
|
|
## 📝 Matching Your Website Structure
|
|
|
|
Your website shows these sections - we can mirror in Homarr:
|
|
|
|
### Main Dashboard (Public)
|
|
```
|
|
🏠 Infrastructure
|
|
- Proxmox, Docker, TrueNAS icons
|
|
- Quick stats widgets
|
|
```
|
|
|
|
### System Board (Private)
|
|
```
|
|
📊 System Overview
|
|
- Full Dash. monitoring
|
|
- CPU, RAM, Storage, Network
|
|
```
|
|
|
|
### Network Board (Private)
|
|
```
|
|
🖧 Network Stack
|
|
- UniFi, Tailscale, VPN status
|
|
- 1 Gbps indicator
|
|
```
|
|
|
|
## 🎨 Logo Ideas
|
|
|
|
If you want to create a logo for Homarr:
|
|
|
|
**Option A: Text Logo**
|
|
```
|
|
Font: Modern sans-serif (Inter, Roboto)
|
|
Text: "lemonlink" or "LL"
|
|
Color: White on indigo background
|
|
```
|
|
|
|
**Option B: Icon Logo**
|
|
```
|
|
Icon: Lemon 🍋 or Chain link 🔗
|
|
Style: Minimalist, outlined
|
|
Colors: Indigo/Purple gradient
|
|
```
|
|
|
|
**Option C: Use Your Existing**
|
|
Just reference your current favicon/logo from lemonlink.eu!
|
|
|
|
## 🔗 Resources
|
|
|
|
- Your website: https://lemonlink.eu
|
|
- Favicon: https://lemonlink.eu/favicon.ico
|
|
- Logo: Check if https://lemonlink.eu/logo.svg exists
|
|
|
|
Want me to create a branded import package with lemonlink.eu styling? 🍋
|