Blog Sidebar — Propiedades CSS personalizables

Referencia completa de las propiedades CSS personalizables disponibles en el campo de CSS personalizado de los ajustes del Blog Sidebar (Theme Editor > Theme settings > App embeds > Blog Sidebar).

Cómo usar

Pega cualquiera de las siguientes variables en el campo de CSS personalizado para sobrescribir los valores por defecto:

--sidebar-bg: #1a1a2e;
--sidebar-text: #e0e0e0;
--sidebar-accent: #e94560;
--sidebar-radius: 16px;

Propiedad	Valor por defecto	Descripción
--sidebar-width	280px	Ancho del panel lateral
--sidebar-bg	#ffffff	Color de fondo del sidebar
--sidebar-text	#333333	Color de texto principal
--sidebar-border	#e2e8f0	Color de bordes y divisores
--sidebar-accent	#0d6efd	Color de acento (botón toggle y hover de etiquetas)
--sidebar-radius	8px	Radio de borde del sidebar y botón
--sidebar-shadow	-2px 0 12px rgba(0,0,0,0.08)	Sombra (posición derecha)
--sidebar-z-index	1000	Z-index para superposición
--sidebar-toggle-size	36px	Ancho del botón toggle
--sidebar-toggle-bg	var(--sidebar-accent)	Fondo del botón toggle
--sidebar-toggle-color	#ffffff	Color del icono/texto del toggle
--sidebar-toggle-icon-size	28px	Tamaño del icono SVG
--sidebar-offset	0px	Distancia desde el borde de la ventana
--sidebar-tag-bg	#e2e8f0	Fondo de las etiquetas
--sidebar-tag-color	#333333	Color de texto de las etiquetas

Ejemplos

Tema oscuro

:root {
  --sidebar-bg: #1a1a2e;
  --sidebar-text: #eee;
  --sidebar-border: #16213e;
  --sidebar-accent: #e94560;
  --sidebar-tag-bg: #0f3460;
  --sidebar-tag-color: #eee;
}

Esquinas redondeadas + separación

:root {
  --sidebar-radius: 16px;
  --sidebar-offset: 16px;
}

Sidebar compacto

:root {
  --sidebar-width: 200px;
  --sidebar-toggle-size: 28px;
  --sidebar-toggle-icon-size: 20px;
}

Catppuccin Mocha

:root {
  --sidebar-bg: #1e1e2e;
  --sidebar-text: #cdd6f4;
  --sidebar-accent: #cba6f7;
  --sidebar-radius: 12px;
  --sidebar-tag-bg: #313244;
  --sidebar-tag-color: #a6adc8;
}

📄 /catppuccin-custom.css

Clean transparente

:root {
  --sidebar-bg: transparent;
  --sidebar-text: #1a1a1a;
  --sidebar-accent: #7c3aed;
  --sidebar-radius: 0;
  --sidebar-shadow: none;
  --sidebar-border: transparent;
}

📄 /clean-custom.css