En Euskadi.eus Berria se han establecido una serie de estilos CSS comunes para ser utilizados en páginas y contenidos. Para usar esos estilos comunes se debe usar el siguiente codigo en el HTML:

class="estiloaren_izena"

Recuerda que para estos "class" pueden usarse de forma conjunta. Por ejemplo, para hacer que el texto que este en una etiqueta <span> se represente en negrita y letra cursiva usaremos:

class="letra_etzana letra_lodia_600"

Todos estos estilos pueden ser usados tanto en portales como en contenidos, siempre que no modifiquen los estilos generales definidos para Euskadi.eus berria. Consulta con tu Gestor Web si tienes cualquier duda.

Estilos para gestionar la visibilidad de un elemento

.inv

Ocultar el elemento (en todos los dispositivos). De cara a la accesibilidad, el elemento estara disponible para lectores de pantalla

.hidden

Ocultar el elemento (en todos los dispositivos). De cara a la accesibilidad, el elemento no estara disponible para lectores de pantalla

.inv_screen

Ocultar el elemento en pantallas grandes (PC, TV...)

.ikus_screen

Mostrar el elemento en pantallas grandes (PC, TV...)

.inv_mugik

Ocultar el elemento en pantallas pequeñas (Telefono, tablet...)

.ikus_mugik

Mostrar el elemento en pantallas pequeñas (Telefono, tablet...)

.inv_print

Ocultar el elemento en la version para imprimir

.ikus_print

Mostrar el elemento en la version para imprimir

Estilos para gestionar la apariencia de un elemento

.borobil

Elementuari borobil itxura emateko (hau da, ertz borobilak emateko)

.taula_orokorra

Para dar formato a las tablas y hacer que en moviles aparezcan con barras de scroll

.botoiak

Para dar a los enlaces y los elementos "input" la apariencia de botón

Enlaces en un listado

Daremos a la etiqueta UL la clase "botoiak":

<ul class="botoiak">
<li><a href="/eusko-jaurlaritza/-/ezagutu-eusko-jaurlaritza#9164">Pertsonak</a></li>
<li><a href="/eusko-jaurlaritza/-/ezagutu-eusko-jaurlaritza#1728">Sistema politikoa</a></li>
</ul>
    

En un solo enlace, daremos la clase "botoiak" al elemento que contenga el enlace (p, div, etc):

<div class="botoiak">
<a href="/eusko-jaurlaritza/-/ezagutu-eusko-jaurlaritza#9164">Pertsonak</a>
</div>
    

En un formulario daremos la clase "botoiak" al elemento que contenga el submit del formulario:

<div class="botoiak">
<input type="submit" value="Bilatu" id="bilaketa" />
</div>
    

.alert-info

Crea un bloque con fondo azul claro

.center-block

Centra un elemento de tipo bloque (no texto)

.margin_top_2 / .margin_top_4 / .margin_top_8

Muestra el elemento como bloque y le da un margen superior de 2em / 4em / 8em

.margin_right_2 / .margin_right_4 / .margin_right_8

Muestra el elemento como bloque y le da un margen derecho de 2em / 4em / 8em

.margin_bottom_2 / .margin_bottom_4 / .margin_bottom_8

Muestra el elemento como bloque y le da un margen inferior de 2em / 4em / 8em

.margin_left_2 / .margin_left_4 / .margin_left_8

Muestra el elemento como bloque y le da un margen izquierdo de 2em / 4em / 8em

Tipografía y colores

.kontuz

Texto en color rojo (#ff0000)

.editatu

Texto en color verde  (#669900)

.urdina

Texto en color azul (color estandar de los enlaces)

.testu_arrunta

Texto en color negro (color estandar del texto)

.testu_etzana

Texto en cursiva

.testu_lodia_600

Texto en negrita (600)

.testu_lodia_700

Texto en negrita (700, mas voluminosa que la anterior)

.testu_azpimarra

Texto subrayado

.r01AlignLeft

Texto alineado a la izquierda

.r01AlignRight:

Texto alineado a la derecha

.r01AlignCenter

Texto centrado

.r01AlignJustify

Texto justificado

.text-lowercase

Muestra el texto en minúsculas

.text-uppercase

Muestra el texto en mayúsculas

Ponte en contacto con tu Gestor Web si ante cualquier duda o si detectas alguna necesidad referente a los estilos CSS.