Page:
Personalización
Clone
Table of Contents
- Personalización
- 🎨 Temas
- 🖼️ Fondos
- 🔍 Búsqueda
- 🎯 Iconos
- 🎨 Colores de Aplicaciones
- 📐 Layout y Organización
- 🔤 Tipografía
- 🌙 Modo Oscuro Automático
- 💾 Exportar/Importar Configuración
- 📱 Responsive
- 🚀 Siguiente Paso
Personalización
Guía completa para personalizar Heimdall: temas, fondos, iconos, búsqueda y configuraciones avanzadas.
🎨 Temas
Heimdall incluye varios temas predefinidos.
Cambiar Tema
- Modo edición (icono llave 🔧)
- Settings (engranaje arriba)
- Theme: Seleccionar tema
- Save
Temas Disponibles
Classic (Claro)
Fondo: Blanco
Tarjetas: Blancas con sombra
Texto: Negro
Ideal: Uso diurno
Dark (Oscuro)
Fondo: Gris oscuro (#1a1a1a)
Tarjetas: Gris medio (#2d2d2d)
Texto: Blanco
Ideal: Uso nocturno, menos fatiga visual
Nord
Basado en paleta Nord
Tonos azules fríos
Aspecto: Moderno y minimalista
Gruvbox
Basado en esquema Gruvbox
Tonos cálidos tierra
Aspecto: Retro y acogedor
Custom (Personalizado)
Permite definir colores propios mediante CSS.
Crear Tema Custom
- Settings → Theme:
Custom - Custom CSS (se habilita):
/* Fondo principal */
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
/* Tarjetas de aplicaciones */
.item {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
/* Texto */
.item-title {
color: #ffffff;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
- Save
Ejemplos de CSS Custom
Glassmorphism
body {
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
}
.item {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(15px);
border-radius: 15px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}
Matrix Theme
body {
background: #000000;
}
.item {
background: #001a00;
border: 1px solid #00ff00;
box-shadow: 0 0 10px #00ff00;
}
.item-title {
color: #00ff00;
font-family: 'Courier New', monospace;
}
Dracula Theme
body {
background: #282a36;
}
.item {
background: #44475a;
border: 1px solid #6272a4;
}
.item-title {
color: #f8f8f2;
}
.item-description {
color: #6272a4;
}
🖼️ Fondos
Tipos de Fondos
1. URL de Imagen
Settings → Background image:
https://images.unsplash.com/photo-1579546929518-9e396f3cc809
2. Subir Imagen Local
- Settings → Background image
- Click en Upload
- Seleccionar archivo (JPG, PNG)
- Max: 5MB recomendado
3. Unsplash Aleatoria
URL dinámica que cambia cada vez:
https://source.unsplash.com/1920x1080/?landscape,nature
Categorías populares:
?landscape - Paisajes
?space - Espacio
?city,night - Ciudad nocturna
?nature,forest - Bosque
?mountain - Montañas
?abstract - Abstracto
?technology - Tecnología
4. Gradientes CSS
En Custom CSS:
body {
background: linear-gradient(45deg, #FF6B6B, #4ECDC4);
}
Gradientes populares:
/* Sunset */
background: linear-gradient(to right, #fa709a 0%, #fee140 100%);
/* Ocean */
background: linear-gradient(to right, #2E3192 0%, #1BFFFF 100%);
/* Purple Dream */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
/* Dark Ocean */
background: linear-gradient(to top, #0f2027, #203a43, #2c5364);
5. Animaciones
Fondo animado con CSS:
@keyframes gradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
body {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
}
Ajustes de Fondo
/* Fondo fijo (no scroll) */
body {
background-attachment: fixed;
}
/* Cubrir toda la pantalla */
body {
background-size: cover;
background-position: center;
}
/* Oscurecer fondo */
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: -1;
}
🔍 Búsqueda
Configurar Motor de Búsqueda
Settings → Search Settings:
Motores Predefinidos
- Google:
https://www.google.com/search?q= - DuckDuckGo:
https://duckduckgo.com/?q= - Bing:
https://www.bing.com/search?q= - StartPage:
https://www.startpage.com/do/search?q=
Motores Custom
Brave:
https://search.brave.com/search?q=
Ecosia:
https://www.ecosia.org/search?q=
Qwant:
https://www.qwant.com/?q=
SearX (autohosteado):
https://searx.tudominio.com/search?q=
Abrir en Nueva Pestaña
/* Force search to open in new tab */
.search-form {
target: _blank;
}
🎯 Iconos
Opciones de Iconos
1. Iconos Predefinidos
Heimdall incluye cientos de iconos. Al añadir app:
Icon: Buscar nombre (ej: portainer, plex, jellyfin)
2. URL de Icono Custom
Icon: Pegar URL directa:
https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/portainer.png
3. Font Awesome
<i class="fab fa-docker"></i>
4. Emoji
Simplemente usa el emoji:
📊 Grafana
🐳 Portainer
🎬 Jellyfin
Repositorios de Iconos
Dashboard Icons (recomendado)
https://github.com/walkxcode/dashboard-icons
Usar vía jsDelivr:
https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/[nombre].png
Home Assistant Icons
https://github.com/home-assistant/brands/tree/master/core_integrations
Simple Icons
https://simpleicons.org/
Crear Iconos Custom
Online:
- Favicon.io - Generador de favicons
- Flaticon - Miles de iconos
- Redimensionar a 128x128px o 256x256px
Local:
# Convertir y redimensionar con ImageMagick
convert icono.png -resize 128x128 icono-128.png
Subir a:
- Repositorio Git
- CDN (Cloudflare R2, AWS S3)
- Nextcloud/servidor propio
🎨 Colores de Aplicaciones
Colores por Marca
Portainer: #13bef9
Jellyfin: #00A4DC
Plex: #E5A00D
Sonarr: #35C5F4
Radarr: #FFC230
Lidarr: #159552
qBittorrent: #3889CE
Nextcloud: #0082C9
Pi-hole: #96060C
Proxmox: #E57000
Grafana: #F46800
Home Assistant: #41BDF5
Vaultwarden: #175DDC
Herramientas de Color
Obtener color de logo:
- ImageColorPicker.com
- Subir logo
- Click en color principal
- Copiar HEX
Generar paletas:
📐 Layout y Organización
Tamaño de Tarjetas
/* Tarjetas más grandes */
.item {
width: 300px;
height: 200px;
}
/* Tarjetas más pequeñas (más apps visibles) */
.item {
width: 150px;
height: 120px;
}
/* Tarjetas rectangulares */
.item {
width: 350px;
height: 180px;
}
Grid Layout
/* 3 columnas en desktop */
.items {
grid-template-columns: repeat(3, 1fr);
}
/* 5 columnas en pantallas grandes */
.items {
grid-template-columns: repeat(5, 1fr);
}
/* Auto-ajustar según espacio */
.items {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
Espaciado
/* Más espacio entre tarjetas */
.items {
gap: 30px;
}
/* Menos espacio */
.items {
gap: 10px;
}
🔤 Tipografía
Cambiar Fuente
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
body, .item-title {
font-family: 'Roboto', sans-serif;
}
Fuentes populares:
/* Moderna */
font-family: 'Inter', sans-serif;
/* Mono espaciada (tech) */
font-family: 'JetBrains Mono', monospace;
/* Elegante */
font-family: 'Playfair Display', serif;
Tamaño de Texto
/* Títulos más grandes */
.item-title {
font-size: 20px;
font-weight: 700;
}
/* Descripción más pequeña */
.item-description {
font-size: 12px;
}
🌙 Modo Oscuro Automático
Cambiar tema según hora del día:
// Añadir en Custom CSS como <script>
const hour = new Date().getHours();
if (hour >= 20 || hour < 7) {
document.body.classList.add('dark-theme');
}
💾 Exportar/Importar Configuración
Heimdall guarda todo en /config:
# Backup de configuración
docker exec heimdall cat /config/www/app.sqlite > heimdall-config.sqlite
# Restaurar
cat heimdall-config.sqlite | docker exec -i heimdall tee /config/www/app.sqlite > /dev/null
docker restart heimdall
Ver guía completa: Backup y Restauración
📱 Responsive
Heimdall es responsive por defecto, pero puedes ajustar:
/* Tablet */
@media (max-width: 1024px) {
.items {
grid-template-columns: repeat(3, 1fr);
}
}
/* Móvil */
@media (max-width: 768px) {
.items {
grid-template-columns: repeat(2, 1fr);
}
.item {
height: 100px;
}
}
🚀 Siguiente Paso
- Backup y Restauración - Protege tu configuración
- Actualización - Mantén Heimdall al día
Repositorio: groales/heimdall