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);
|
||||
}
|
||||
|
||||
@@ -20,19 +20,13 @@
|
||||
<body <?php body_class(); ?> data-bs-spy="scroll" data-bs-target=".toc-container" data-bs-offset="100">
|
||||
<?php wp_body_open(); ?>
|
||||
|
||||
<!-- Top Notification Bar (Template líneas 255-262) -->
|
||||
<div id="topNotificationBar" class="top-notification-bar">
|
||||
<!-- Top Notification Bar (Template líneas 55-63) -->
|
||||
<div class="top-notification-bar">
|
||||
<div class="container">
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<i class="bi bi-megaphone-fill me-2"></i>
|
||||
<span class="notification-text">
|
||||
<span class="text-highlight"><?php esc_html_e('Nuevo:', 'apus-theme'); ?></span>
|
||||
<span class="d-none d-md-inline"><?php esc_html_e('Accede a 200,000+ APUs actualizados para 2025', 'apus-theme'); ?></span>
|
||||
<span class="d-md-none"><?php esc_html_e('200K+ APUs 2025', 'apus-theme'); ?></span>
|
||||
</span>
|
||||
<a href="<?php echo esc_url(home_url('/catalogo')); ?>" class="ms-2 notification-link">
|
||||
<?php esc_html_e('Ver Catálogo', 'apus-theme'); ?>
|
||||
</a>
|
||||
<span><strong>Nuevo:</strong> Accede a más de 200,000 Análisis de Precios Unitarios actualizados para 2025.</span>
|
||||
<a href="<?php echo esc_url(home_url('/catalogo')); ?>" class="ms-2 text-white text-decoration-underline">Ver Catálogo</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -475,7 +475,12 @@ add_action('wp_enqueue_scripts', 'apus_enqueue_cta_box_sidebar_assets', 17);
|
||||
|
||||
/**
|
||||
* Enqueue Top Notification Bar styles and scripts (Issue #39)
|
||||
*
|
||||
* DESHABILITADO: CSS ahora está en assets/css/style.css (líneas 658-685)
|
||||
* siguiendo el template fuente apus-theme-template/index.html
|
||||
* El componente no requiere JavaScript, es solo HTML/CSS estático.
|
||||
*/
|
||||
/*
|
||||
function apus_enqueue_notification_bar_assets() {
|
||||
// Notification Bar CSS
|
||||
wp_enqueue_style(
|
||||
@@ -500,6 +505,7 @@ function apus_enqueue_notification_bar_assets() {
|
||||
}
|
||||
|
||||
add_action('wp_enqueue_scripts', 'apus_enqueue_notification_bar_assets', 18);
|
||||
*/
|
||||
|
||||
/**
|
||||
* Enqueue Footer Contact Form styles and scripts (Issue #37)
|
||||
|
||||
Reference in New Issue
Block a user