Admin: [Component Name]

` de Bootstrap dentro del admin de WordPress, WordPress aplica automáticamente `max-width: 520px`, limitando el ancho de tus cards. --- ### ❌ SOLUCIÓN INCORRECTA **NO cambies `.card` por `.apus-card` o cualquier otra clase custom.** **Razones:** 1. Bootstrap `.card` es un **sistema completo** con múltiples clases relacionadas: - `.card-body` - `.card-header` - `.card-footer` - `.card-title` - `.card-text` - `.card-img-top` - Y muchas más... 2. Si cambias `.card` a `.apus-card`, pierdes **TODOS** los estilos de Bootstrap 3. Tendrías que recrear manualmente TODO el sistema de cards --- ### ✅ SOLUCIÓN CORRECTA **Opción 1: Wrapper con Mayor Especificidad (RECOMENDADA)** Agregar una clase wrapper en el `` y sobreescribir el CSS de WordPress: ```html

``` **CSS:** ```css /* Sobreescribir el max-width de WordPress */ .apus-admin .card { max-width: none !important; } /* Asegurar que funcione en todos los contextos */ body.apus-admin .card, #apusAdminPanel .card { max-width: none !important; } ``` **Opción 2: Inline Style (Rápido)** Si solo tienes unos pocos cards: ```html

``` **Opción 3: CSS Global** ```html ``` --- ## Conflicto 2: Form Switches (CRÍTICO) ### El Problema Los switches de Bootstrap muestran **dos círculos** en lugar de un círculo que se desliza. ### Causa Raíz 1. **Pseudo-elemento `::before` de WordPress**: Muestra un SVG de checkmark (✓) 2. **`background-image` de Bootstrap**: Muestra el círculo del switch 3. **`background-size` incorrecto**: WordPress usa `auto` en lugar de `contain` **Resultado**: Dos elementos visuales superpuestos en el switch. --- ### ✅ Solución Definitiva ```css /* Eliminar completamente pseudo-elementos de WordPress */ body .form-switch .form-check-input[type="checkbox"]::before, body .form-switch .form-check-input[type="checkbox"]::after, .apus-admin .form-switch .form-check-input[type="checkbox"]::before, .apus-admin .form-switch .form-check-input[type="checkbox"]::after { content: none !important; display: none !important; background-image: none !important; width: 0 !important; height: 0 !important; } /* Configurar correctamente el background-size y repeat */ body .form-switch .form-check-input[type="checkbox"], .apus-admin .form-switch .form-check-input[type="checkbox"] { background-size: contain !important; background-repeat: no-repeat !important; background-position: left center !important; } body .form-switch .form-check-input[type="checkbox"]:checked, .apus-admin .form-switch .form-check-input[type="checkbox"]:checked { background-size: contain !important; background-repeat: no-repeat !important; background-position: right center !important; } ``` **Qué hace cada parte:** 1. **Elimina `::before` y `::after`**: Anula completamente los pseudo-elementos de WordPress 2. **`content: none !important`**: Elimina cualquier contenido SVG de WordPress 3. **`display: none !important`**: Oculta el pseudo-elemento aunque tenga contenido 4. **`background-size: contain`**: Asegura que el círculo de Bootstrap se escale correctamente 5. **`background-repeat: no-repeat`**: Previene que el círculo se duplique 6. **`background-position`**: Controla la posición del círculo (left cuando OFF, right cuando ON) --- ## Conflicto 3: Alineación Vertical de Switches (CRÍTICO) ### El Problema Los labels de los switches aparecen **desalineados verticalmente** con los switches, con una diferencia de aproximadamente **10.5px**. ### Causa Raíz 1. WordPress aplica `label { vertical-align: middle; }` globalmente 2. Bootstrap usa `display: block` + `float: left` en `.form-check` 3. Conflicto de layout entre elementos flotantes y `vertical-align` --- ### ✅ Solución Definitiva ```css /* Fix alineación vertical de labels en switches */ #topBarTab .form-check.form-switch { display: flex !important; align-items: center !important; } #topBarTab .form-switch .form-check-input { margin-top: 0 !important; margin-bottom: 0 !important; } #topBarTab .form-switch .form-check-label, .form-switch .form-check-label.small { line-height: 16px !important; padding-top: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } ``` **Qué hace cada parte:** 1. **`display: flex`**: Convierte el contenedor en flexbox 2. **`align-items: center`**: Alinea todos los hijos verticalmente por su centro 3. **`line-height: 16px`**: Coincide con la altura del switch para alineación perfecta 4. **Márgenes en 0**: Elimina espacios verticales no deseados **Resultado**: Diferencia de **0px** entre el centro del switch y el centro del label. --- ## Conflicto 4: `.button` (Raro) WordPress también estiliza `.button`. **Solución**: Siempre usa `.btn` de Bootstrap: ```html ``` --- ## Conflicto 5: `.row` (Raro) Algunos temas de WordPress pueden estilizar `.row`. Si tienes problemas: ```css .apus-admin .row { /* Reset de cualquier estilo de WordPress */ display: flex; flex-wrap: wrap; margin-right: calc(var(--bs-gutter-x) * -0.5); margin-left: calc(var(--bs-gutter-x) * -0.5); } ``` --- ## Conflicto 6: Colores de Links WordPress usa colores específicos. Asegúrate de que tu CSS tenga mayor especificidad: ```css /* WordPress puede tener reglas globales */ a { color: #0073aa; } /* Tu CSS debe ser más específico */ .apus-admin a { color: #FF8600; } .apus-admin .card a { color: #FF8600; } ``` --- ## Template Actualizado con Todos los Fixes ```html Admin: [Component Name] ``` --- ## Checklist Anti-Conflictos WordPress Antes de implementar un componente, verificar: - [ ] Agregar clase `.apus-admin` al `` - [ ] **CRÍTICO**: Sobreescribir `.card { max-width: none !important; }` - [ ] **CRÍTICO**: Eliminar pseudo-elementos `::before` y `::after` de switches - [ ] **CRÍTICO**: Configurar `background-size: contain` en switches - [ ] **CRÍTICO**: Configurar `background-repeat: no-repeat` en switches - [ ] **CRÍTICO**: Configurar `background-position: left/right center` en switches - [ ] **CRÍTICO**: Implementar `display: flex` + `align-items: center` en `.form-check.form-switch` - [ ] **CRÍTICO**: Configurar `line-height: 16px` en labels de switches - [ ] Usar `.btn` en lugar de `.button` - [ ] Verificar que colores custom tengan `!important` si es necesario - [ ] Usar DevTools para verificar que estilos de WordPress estén overridden - [ ] **Probar switches**: deben mostrar UN solo círculo que se desliza - [ ] **Probar alineación**: labels deben estar perfectamente alineados con switches (0px diferencia) - [ ] Probar en un admin de WordPress real (si aplica) --- ## Verificación en DevTools ### Verificar Fix de Cards ```css /* ✅ CORRECTO - Deberías ver: */ .apus-admin .card { max-width: none !important; /* ✅ Tu CSS */ } /* Y esto debería estar tachado/overridden: */ .card { max-width: 520px; /* ❌ WordPress (overridden) */ } ``` ### Verificar Fix de Switches ```css /* ✅ CORRECTO - Deberías ver: */ .form-switch .form-check-input[type="checkbox"]::before { content: none !important; /* ✅ Sin checkmark */ display: none !important; /* ✅ Oculto */ } .form-switch .form-check-input[type="checkbox"] { background-size: contain !important; /* ✅ Círculo escalado */ background-repeat: no-repeat !important; /* ✅ Sin duplicar */ } ``` --- ## Volver al Índice [← Volver al README](README.md)