v1.4.0
MLG Theme — Documentación CSS
Guía para integrar el sistema de diseño de la Municipalidad de Lucas González en herramientas externas, páginas fuera de WordPress o bloques HTML personalizados.
ℹ️ El CSS está publicado en lucasgonzalez.gob.ar y puede referenciarse directamente desde cualquier página HTML.
Cómo incluir el CSS
Opción A — Link directo al tema (recomendado)
Incluí la hoja de estilos del tema directamente en el <head> de tu página. WordPress agrega automáticamente el parámetro de versión para manejo de caché.
HTML
<link rel="stylesheet"
href="https://lucasgonzalez.gob.ar/wp-content/themes/mlg-theme/style.css?ver=1.4.0">
⚠️ Cada vez que se actualice el tema, el número de versión cambia. Actualizá el parámetro
?ver= en tu integración si necesitás la versión exacta, o quitalo para obtener siempre el archivo más reciente.
Opción B — Solo las variables CSS
Si tu herramienta tiene su propio CSS y solo querés usar la paleta de colores y tokens de diseño, podés declarar las variables en tu propio archivo:
CSS
:root {
--lg-primary: #2e8b3a;
--lg-primary-dark: #1e6b2e;
--lg-secondary: #4caf52;
--lg-accent: #e8b84b;
--lg-light: #f1f8f2;
--lg-dark: #1c2833;
--lg-text: #333333;
--lg-muted: #777777;
--lg-border: #cce0d0;
--lg-radius: 8px;
--lg-shadow: 0 2px 14px rgba(46,139,58,0.12);
}Opción C — Bloque HTML en WordPress
Dentro de WordPress no necesitás incluir el CSS, ya está cargado. Usá directamente las clases .mlg-* en un bloque HTML personalizado.
HTML (dentro de WordPress)
<div class="mlg-container">
<a class="mlg-btn-primary" href="#">Mi botón</a>
</div>Variables CSS
Todas las variables se declaran en :root y pueden sobreescribirse localmente si necesitás adaptar algún componente.
| Variable | Valor | Uso |
|---|---|---|
--lg-primary | #2e8b3a | Color principal (verde) |
--lg-primary-dark | #1e6b2e | Verde oscuro, topbar, hover |
--lg-secondary | #4caf52 | Verde medio, acentos secundarios |
--lg-accent | #e8b84b | Amarillo dorado, botones CTA, eyebrows |
--lg-light | #f1f8f2 | Fondos suaves, tarjetas |
--lg-dark | #1c2833 | Footer, textos de título |
--lg-text | #333333 | Texto de cuerpo |
--lg-muted | #777777 | Texto secundario, subtítulos |
--lg-border | #cce0d0 | Bordes de tarjetas y separadores |
--lg-radius | 8px | Radio de borde estándar |
--lg-shadow | 0 2px 14px … | Sombra suave en tarjetas |
--lg-max-width | 1200px | Ancho máximo del contenedor |
--lg-header-h | 96px / 62px mobile | Alto del header |
Botones
Vista previa
HTML
<!-- Botón principal (amarillo dorado) -->
<a class="mlg-btn-primary" href="URL">Texto del botón</a>
<!-- Botón secundario (contorno verde) -->
<!-- Nota: en fondo oscuro el outline muestra blanco -->
<a class="mlg-btn-outline" href="URL">Texto del botón</a>| Clase | Descripción |
|---|---|
.mlg-btn-primary | Fondo amarillo dorado, texto oscuro. CTA principal. |
.mlg-btn-outline | Contorno blanco semitransparente. Para usar sobre fondos verdes o oscuros. |
Tarjetas de acceso rápido
Vista previa
📄
Habilitaciones Comerciales
Tramitá tu habilitación online
Ver trámite →
💧
Servicios Municipales
Agua, residuos y más
Ver servicios →
HTML
<!-- Grilla de tarjetas (auto-fill) -->
<div class="mlg-cards-grid">
<a class="mlg-card" href="URL">
<div class="mlg-card-ico">📄</div>
<div class="mlg-card-title">Habilitaciones</div>
<div class="mlg-card-desc">Tramitá tu habilitación online</div>
<div class="mlg-card-arrow">Ver trámite →</div>
</a>
</div>| Clase | Descripción |
|---|---|
.mlg-cards-grid | Contenedor grid con columnas auto-fill (mínimo 220px). |
.mlg-card | Tarjeta individual. Puede ser <a> o <div>. |
.mlg-card-ico | Emoji o ícono SVG grande (1.8rem). |
.mlg-card-title | Título de la tarjeta. |
.mlg-card-desc | Descripción breve. |
.mlg-card-arrow | Texto de llamada a la acción inferior. |
Barra de título de página
Se usa automáticamente en páginas internas (page.php). También podés incluirla en bloques externos.
Vista previa
HTML
<div class="mlg-page-title-bar">
<div class="mlg-container">
<h1>Título de la sección</h1>
<div class="mlg-breadcrumb">
<a href="/">Inicio</a> → Sección
</div>
</div>
</div>Etiqueta Eyebrow
Pequeña etiqueta de categoría o identificación, usada en el slider y encabezados de sección.
Vista previa
Municipalidad de Lucas González
HTML
<span class="mlg-slide-eyebrow">Etiqueta de categoría</span>Tipografía
El tema usa Segoe UI con fallback a Arial y Helvetica. No se carga ninguna fuente externa (Google Fonts). El tamaño base es 16px con line-height: 1.65.
Jerarquía
Título H1 — 2rem 800
Título H2 — 1.5rem
Título H3 — 1.15rem
Texto normal — 1rem / 16px
Texto secundario — 0.85rem
ETIQUETA — 0.75rem uppercase
Layout / Contenedor
El contenedor principal centra el contenido con un ancho máximo de 1200px y padding lateral de 24px (16px en mobile).
HTML
<!-- Sección a ancho completo -->
<section class="mlg-quick-access">
<div class="mlg-container">
<h2 class="mlg-section-title">Accesos Rápidos</h2>
<p class="mlg-section-sub">Los servicios más consultados</p>
<!-- tarjetas acá -->
</div>
</section>| Clase | Descripción |
|---|---|
.mlg-container | Centra contenido, max-width 1200px, padding 24px. |
.mlg-quick-access | Sección de fondo blanco con padding vertical. |
.mlg-section-title | Título de sección en verde, 1.4rem. |
.mlg-section-sub | Subtítulo en gris, 0.90rem. |
.mlg-page-content | Padding de contenido de página (40px arriba, 60px abajo). |
Índice de clases
| Clase | Elemento | Descripción |
|---|---|---|
.mlg-container | div | Contenedor centrado max 1200px |
.mlg-btn-primary | a / button | Botón CTA amarillo |
.mlg-btn-outline | a / button | Botón contorno (fondo oscuro) |
.mlg-cards-grid | div | Grilla de tarjetas |
.mlg-card | a / div | Tarjeta individual |
.mlg-card-ico | div | Ícono de tarjeta |
.mlg-card-title | div | Título de tarjeta |
.mlg-card-desc | div | Descripción de tarjeta |
.mlg-card-arrow | div | CTA inferior de tarjeta |
.mlg-page-title-bar | div | Barra de título de página |
.mlg-breadcrumb | div | Ruta de navegación |
.mlg-page-content | div | Contenedor de contenido de página |
.mlg-quick-access | section | Sección de accesos rápidos |
.mlg-section-title | h2 | Título de sección |
.mlg-section-sub | p | Subtítulo de sección |
.mlg-slide-eyebrow | span | Etiqueta eyebrow amarilla |
Paleta de colores
Primary
#2e8b3a
Dark
#1e6b2e
Secondary
#4caf52
Accent
#e8b84b
Light
#f1f8f2
Dark BG
#1c2833
Border
#cce0d0