Estilos con CSS

Consul Democracy usa hojas de estilo escritas utilizando Sass con la sintaxis SCSS y ubicadas en el directorio app/assets/stylesheets/.

Para cambiar estilos, puedes añadirlos directamente en algún fichero bajo app/assets/stylesheets/custom/. Como alternativa, puedes usar el fichero app/assets/stylesheets/custom.scss.

Por ejemplo, para cambiar el margen del pie de página, crear el archivo app/assets/stylesheets/custom/layout.scss con el siguiente contenido:

.footer {
  margin-top: $line-height;
}

Esto sobrescribirá la propiedad margin-top del selector .footer.

Las reglas de precedencia de CSS siguen aplicándose en ese caso, con lo que si hay una regla definiendo la propiedad margin-top para el selector body .footer, el código anterior será ignorado. Por lo tanto, para sobrescribir propiedades de ciertos elementos de forma adecuada, usa exactamente el mismo selector utilizado en el código original.

Variables de Sass

Consul Democracy utiliza variables y funciones definidas en el framework Foundation y añade algunas variables más. Para sobrescribir estas variables, usa el archivo app/assets/stylesheets/_consul_custom_overrides.scss. Por ejemplo, para cambiar el color de fondo del pie de página, añade:

$footer: #fdfdfd;

Las variables que puedes sobrescribir están definidas en los ficheros _settings.scss y _consul_settings.scss.

Para definir nuevas variables, puedes usar el fichero app/assets/stylesheets/_custom_settings.scss.

Variables de CSS

En aplicaciones multientidad, las variables de Sass tienen una limitación: su valor será el mismo para todas las entidades.

Debido a esto, para los colores más frecuentemente personalizados, Consul Democracy proporciona variables de CSS, con las que puedes definir diferentes colores para diferentes entidades.

Por ejemplo, puedes personalizar los colores de los principales elementos de la aplicación así como de enlaces y botones con:

.tenant-public {
  --anchor-color: #372;
  --anchor-color-hover: #137;
  --brand: #153;
  --brand-secondary: #134a00;
  --button-background-hover: #fa0;
  --button-background-hover-contrast: #{$black};
  --footer: #e6e6e6;
  --main-header: #351;
  --top-links: var(--main-header);
  --subnavigation: #ffd;
}

Echa un vistazo al archivo app/assets/stylesheets/custom/tenants.scss para más información.

Accesibilidad

Para mantener el nivel de accesibilidad, si añades colores nuevos, utiliza un comprobador de contraste de color (WCAG AA es obligatorio, WCAG AAA es recomendable).