Corregir Top Notification Bar según template fuente real
PROBLEMA:
- Implementación previa NO coincidía con template fuente apus-theme-template/index.html
- HTML tenía estructura compleja con spans responsive e i18n
- CSS cargaba archivo separado notification-bar.css (253 líneas) con animaciones innecesarias
- Faltaban variables de color APU en style.css
SOLUCIÓN:
1. header.php (líneas 23-32):
- Reemplazado HTML complejo con estructura simple del template
- Eliminado texto responsive innecesario
- Cambiado de múltiples <span> a un solo <span><strong>Nuevo:</strong> texto</span>
- Agregado clases text-white y text-decoration-underline al enlace
2. assets/css/style.css:
- Agregadas variables de color APU (líneas 49-55):
--color-navy-dark, --color-navy-primary, --color-orange-primary, etc.
- Agregado CSS de Top Notification Bar (líneas 658-685)
- Solo 28 líneas de CSS limpio sin animaciones ni JavaScript
3. inc/enqueue-scripts.php:
- Comentada función apus_enqueue_notification_bar_assets()
- CSS ahora en style.css principal, no en archivo separado
- Componente no requiere JavaScript
FUENTE DE VERDAD:
- apus-theme-template/index.html (líneas 55-63)
- apus-theme-template/css/style.css (líneas 57-80)
ISSUE: #97
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -46,6 +46,14 @@
|
||||
--color-text: #212529; /* Contrast ratio 15.52:1 against white */
|
||||
--color-bg: #ffffff;
|
||||
|
||||
/* APU Template Colors (from apus-theme-template/css/style.css) */
|
||||
--color-navy-dark: #0E2337;
|
||||
--color-navy-primary: #1e3a5f;
|
||||
--color-navy-light: #2c5282;
|
||||
--color-orange-primary: #FF8600;
|
||||
--color-orange-hover: #FF6B35;
|
||||
--color-orange-light: #FFB800;
|
||||
|
||||
/* Spacing */
|
||||
--spacing-xs: 0.25rem;
|
||||
--spacing-sm: 0.5rem;
|
||||
@@ -646,3 +654,32 @@ img {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
TOP NOTIFICATION BAR (from apus-theme-template/css/style.css lines 57-80)
|
||||
========================================================================== */
|
||||
|
||||
.top-notification-bar {
|
||||
background-color: var(--color-navy-dark);
|
||||
color: #ffffff;
|
||||
padding: 0.5rem 0;
|
||||
font-size: 0.9rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.top-notification-bar strong {
|
||||
color: var(--color-orange-primary);
|
||||
}
|
||||
|
||||
.top-notification-bar i {
|
||||
color: var(--color-orange-primary);
|
||||
}
|
||||
|
||||
.top-notification-bar a {
|
||||
color: #ffffff;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.top-notification-bar a:hover {
|
||||
color: var(--color-orange-primary);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user