# 🚀 Homarr Setup Walkthrough (Logged In) You're logged in! Let's create your boards step by step. --- ## Step 1: Create Your First Board ### 1.1 Go to Board Management ``` 1. Click your profile icon (top right) 2. Select "Manage" 3. Click "Boards" in left sidebar 4. Click "New Board" button ``` ### 1.2 Create "Main Dashboard" Board ``` Name: Main Dashboard Description: Public dashboard with news and quick links Visibility: Public ``` Click **Create** --- ## Step 2: Add Apps (Before Adding to Board) ### 2.1 Go to App Management ``` 1. While in Manage section 2. Click "Apps" in left sidebar 3. Click "New App" button ``` ### 2.2 Add Common Apps **Add Gmail:** ``` Name: Gmail Description: Email Icon URL: gmail (just type "gmail", it will find it) URL: https://mail.google.com ``` **Add GitHub:** ``` Name: GitHub Description: Code Repository Icon URL: github URL: https://github.com ``` **Add Proxmox (if you have it):** ``` Name: Proxmox Description: Virtualization Icon URL: proxmox URL: https://proxmox.lemonlink.eu (or your IP) ``` **Add 10-15 more apps you use regularly...** Click **Create** for each app. --- ## Step 3: Add Widgets to Your Board ### 3.1 Open Your Board for Editing ``` 1. Go back to "Boards" in Manage 2. Click on "Main Dashboard" 3. Click "Open Board" 4. Click the "Pencil Icon" (Edit Mode) ``` ### 3.2 Add Clock Widget ``` 1. Click "Add Item" button 2. Select "Clock" 3. It appears on board 4. Click the 3 dots (⋮) on the widget → "Edit Item" 5. Settings: - Show date: ✅ - Time format: 24h (or your preference) - Size: Make it 2x2 (drag bottom-right corner) 6. Click Save ``` ### 3.3 Add Weather Widget ``` 1. Click "Add Item" 2. Select "Weather" 3. Edit item (3 dots → Edit) 4. Enter your location (City, Country) 5. Set temperature unit 6. Save ``` ### 3.4 Add RSS Feed Widget (Homelab News) ``` 1. Click "Add Item" 2. Select "RSS Feed" 3. Edit item 4. Settings: Name: Homelab News Feed URLs (one per line): https://selfh.st/rss/ https://noted.lol/rss/ https://feeds.fireside.fm/selfhosted/rss Posts limit: 10 Description line clamp: 3 Hide description: No 5. Save 6. Resize to make it wider (3x2 or 4x2) ``` ### 3.5 Add More RSS Widgets **Cybersecurity News:** ``` Feed URLs: https://www.bleepingcomputer.com/feed/ https://feeds.feedburner.com/TheHackersNews https://krebsonsecurity.com/feed/ ``` **Tech News:** ``` Feed URLs: https://news.ycombinator.com/rss https://techcrunch.com/feed/ https://feeds.arstechnica.com/arstechnica/index ``` ### 3.6 Add Apps to Board ``` 1. Click "Add Item" 2. Select "App" 3. Edit item (3 dots → Edit) 4. Select the app from dropdown (Gmail, GitHub, etc.) 5. Save 6. Repeat for each app ``` ### 3.7 Arrange Everything ``` - Drag widgets/apps to position them - Resize by dragging bottom-right corner - Align items nicely in rows - Exit edit mode (click "Exit" or checkmark) to save ``` --- ## Step 4: Create System Monitor Board (Private) ### 4.1 Create New Board ``` Manage → Boards → New Board Name: System Overview Description: Server monitoring Visibility: Private (requires login) ``` ### 4.2 Add Dash. Widget ``` 1. Open board → Edit Mode 2. Add Item → iFrame 3. Edit settings: Name: System Monitor URL: http://YOUR-SERVER-IP:3001 4. Make it FULL WIDTH (6x4 or largest size) 5. Save and exit edit mode ``` --- ## Step 5: Create Infrastructure Board (Private) ### 5.1 Create Board ``` Name: Infrastructure Visibility: Private ``` ### 5.2 Add Docker Integration ``` 1. Go to Manage → Integrations 2. Click "New Integration" 3. Select "Docker" 4. Name: Local Docker 5. Socket: /var/run/docker.sock 6. Test connection 7. Save ``` ### 5.3 Add Apps to Board ``` Add apps you created earlier: - Proxmox - Portainer - TrueNAS - Pi-hole - Grafana - etc. ``` --- ## Step 6: Theme Customization ### 6.1 Open Board Settings ``` 1. Open a board 2. Click "Settings" (gear icon) in top bar 3. Click "Appearance" tab ``` ### 6.2 Dark Theme Colors ``` Primary Color: #6366f1 (Indigo) Secondary Color: #8b5cf6 (Purple) Background Color: #0a0a0f (Very dark) Text Color: #e2e8f0 (Light gray) Accent Color: #fbbf24 (Amber/Gold) ``` ### 6.3 Custom CSS (Optional) ``` In Appearance settings, find "Custom CSS" box: .homarr-card { background: rgba(255, 255, 255, 0.05) !important; backdrop-filter: blur(10px) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 16px !important; } .homarr-card:hover { transform: translateY(-4px) !important; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important; } ``` --- ## Step 7: Quick Tips ### Keyboard Shortcuts ``` Ctrl + K (or /) → Open search Esc → Close search ``` ### Search Usage ``` 1. Press Ctrl+K 2. Type "proxm" → Finds Proxmox 3. Press Enter → Opens it ``` ### Edit Mode Tips ``` - Drag to move items - Drag corner to resize - 3 dots menu → Edit, Delete, Move - Items snap to grid automatically ``` --- ## Example Layouts ### Main Dashboard Layout ``` ┌─────────────────────────────────────────┐ │ [CLOCK] [WEATHER] [SEARCH] │ ├─────────────────────────────────────────┤ │ [RSS - Homelab] [RSS - Cyber] │ │ (2 columns) │ ├─────────────────────────────────────────┤ │ [Gmail] [GitHub] [Reddit] [YouTube] │ │ [Proxmox] [Portainer] [Plex] │ └─────────────────────────────────────────┘ ``` ### System Overview Layout ``` ┌─────────────────────────────────────────┐ │ │ │ [DASH. IFRAME] │ │ (Full Screen) │ │ │ └─────────────────────────────────────────┘ ``` --- ## ✅ Check Your Progress - [ ] Created Main Dashboard (Public) - [ ] Created System Overview (Private) - [ ] Added 5-10 Apps - [ ] Added Clock + Weather - [ ] Added 3 RSS feeds - [ ] Arranged items nicely - [ ] Set dark theme colors - [ ] Tested search (Ctrl+K) --- ## 🆘 Common Issues ### Can't find apps in dropdown? ``` You need to CREATE apps first in Manage → Apps THEN add them to boards ``` ### Widgets not loading? ``` - Check if URLs are correct - For RSS: Verify feed URLs work in browser - For Dash: Check if http://IP:3001 is accessible ``` ### Changes not saving? ``` Make sure to EXIT EDIT MODE (click checkmark or "Exit") ``` --- **Need more help?** Check the other guides in your repo or ask!