1

Personalización

groales edited this page 2025-12-03 11:16:53 +01:00

Table of Contents

• Personalización
• 🎨 Temas
• Cambiar Tema
• Temas Disponibles
• Classic (Claro)
• Dark (Oscuro)
• Nord
• Gruvbox
• Custom (Personalizado)
• Crear Tema Custom
• Ejemplos de CSS Custom
• Glassmorphism
• Matrix Theme
• Dracula Theme
• 🖼️ Fondos
• Tipos de Fondos
• 1. URL de Imagen
• 2. Subir Imagen Local
• 3. Unsplash Aleatoria
• 4. Gradientes CSS
• 5. Animaciones
• Ajustes de Fondo
• 🔍 Búsqueda
• Configurar Motor de Búsqueda
• Motores Predefinidos
• Motores Custom
• Abrir en Nueva Pestaña
• 🎯 Iconos
• Opciones de Iconos
• 1. Iconos Predefinidos
• 2. URL de Icono Custom
• 3. Font Awesome
• 4. Emoji
• Repositorios de Iconos
• Dashboard Icons (recomendado)
• Home Assistant Icons
• Simple Icons
• Crear Iconos Custom
• 🎨 Colores de Aplicaciones
• Colores por Marca
• Herramientas de Color
• 📐 Layout y Organización
• Tamaño de Tarjetas
• Grid Layout
• Espaciado
• 🔤 Tipografía
• Cambiar Fuente
• Tamaño de Texto
• 🌙 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

1. Modo edición (icono llave 🔧)
2. Settings (engranaje arriba)
3. Theme: Seleccionar tema
4. 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

1. Settings → Theme: Custom
2. 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);
}

3. 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

1. Settings → Background image
2. Click en Upload
3. Seleccionar archivo (JPG, PNG)
4. 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:

1. Favicon.io - Generador de favicons
2. Flaticon - Miles de iconos
3. 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:

1. ImageColorPicker.com
2. Subir logo
3. Click en color principal
4. Copiar HEX

Generar paletas:

• Coolors.co
• Adobe Color

📐 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