Custom CSS

📌 ¿Qué es el Custom CSS en WordPress?

Es un campo dentro del personalizador (en Apariencia > Personalizar > CSS adicional) donde puedes escribir código CSS directamente para cambiar colores, tamaños, márgenes, tipos de letra, ocultar elementos, etc.

Es útil si:

• Quieres modificar el estilo sin editar archivos del tema.
• Tu tema no ofrece ciertas opciones visuales desde el personalizador.
• Deseas cambios rápidos y específicos sin instalar plugins.

✅ Ventajas del CSS personalizado

• No requiere acceso FTP ni editar archivos.
• Es reversible y no destructivo.
• Se guarda en la base de datos, así que no se pierde al actualizar el tema.
• Puedes previsualizar en tiempo real.

🛠️ ¿Dónde se escribe el Custom CSS?

1. Ve al panel de WordPress.
2. Entra en Apariencia > Personalizar > CSS adicional.
3. Escribe tu código CSS.
4. Visualiza los cambios y haz clic en Publicar cuando estés conforme.

🧪 Ejemplos de uso de Custom CSS

1. Cambiar el color de fondo del sitio

body {
  background-color: #f4f4f4;
}

2. Cambiar el tamaño de fuente de los títulos <h1>

h1 {
  font-size: 36px;
}

3. Ocultar el título del sitio en la cabecera

.site-title {
  display: none;
}

4. Cambiar el color de los enlaces

a {
  color: #0055cc;
}
a:hover {
  color: #ff6600;
}

5. Alinear el logo al centro

.site-logo {
  display: block;
  margin: 0 auto;
}

6. Modificar el diseño del menú

.main-navigation a {
  text-transform: uppercase;
  padding: 10px 20px;
  font-weight: bold;
}

7. Personalizar botones

button, .wp-block-button__link {
  background-color: #ff5722;
  color: white;
  border-radius: 10px;
  padding: 10px 20px;
}

⚠️ Recomendaciones

• Usa el inspector de elementos de tu navegador (clic derecho > “Inspeccionar”) para identificar las clases y elementos que quieres modificar.
• No abuses del !important, úsalo solo si es estrictamente necesario.
• Si haces muchas modificaciones, puede ser mejor crear un child theme o usar un plugin de CSS personalizado como Simple Custom CSS.