OOoES/AyudaWiki/EstilosCSS

From OpenOffice.org Wiki

Estas son las clases CSS que hemos definido para los wikis del MDC. Si por alguna razón necesita una clase CSS a medida para las páginas que edites, puedes ponerte en contacto con Dria.

Cajas de Texto

Consejos: .tip

Usa div class="tip" para crear una caja de texto con la que destacar consejos o información importante:

El siguiente código:

<div class="tip">Esto es un consejo.</div>

Se visualiza así:

Notas: .note

Usa div class="note" para crear una caja de texto con la que destacar información complementaria:

El siguiente código:

<div class="note">Esto es una nota. Una nota no muy importante.</div>

Se visualiza así:

Alertas: .warning

Use div class="warning" para destacar las puntos con los que el lector a de tener cuidado.

El siguiente código:

 <div class="warning">Esto es un aviso.</div> 

Se visualiza así:

Bugs: .bug

Use div class="bug" para referenciar bugs conocidos, con enlace a la entrada correspondiente en Bugzilla:

El siguiente código:

<div class="bug">[https://bugzilla.mozilla.org/show_bug.cgi?id=176320 Bug 176320: Minimal innerWidth/innerHeight values for popup windows]</div>

Se visualiza así:

Cajas laterales

Puede resultar útil y estéticamente conveniente, mostrar la información complementaria en cajas de texto posicionadas a los lados del texto. La caja creada tendrá el 45% del ancho de su caja padre (usualmente el ancho del artículo). Podemos hacerlo aplicando las siguientes clases:

.side-note-left

El siguiente código:

<div class="side-note-left">
 Se recomienda su uso para mejorar la lectura, así el contenido de la barra 
 lateral se alterna entre el lado izquierdo y derecho del artículo.</div>
 Usado para crear una barra lateral o al lado dentro de un artículo. 
 La caja creada tendrá el 45% del ancho de su caja padre (usualmente el ancho del artículo).

Se visualiza así:

Usado para crear una barra lateral o al lado dentro de un artículo. La caja creada tendrá el 45% del ancho de su caja padre (usualmente el ancho del artículo).

.side-note-right

El siguiente código:

<div class="side-note-right">
 Se recomienda su uso para mejorar la lectura, así el contenido de la barra 
 lateral se alterna entre el lado izquierdo y derecho del artículo.</div>
 Usado para crear una barra lateral o al lado dentro de un artículo. 
 La caja creada tendrá el 45% del ancho de su caja padre (usualmente el ancho del artículo).

Se visualiza así:

Usado para crear una barra lateral o al lado dentro de un artículo. La caja creada tendrá el 45% del ancho de su caja padre (usualmente el ancho del artículo).

Contenidos destacados: .Highlight

Destaca secciones de la página añadiendo una barra azul a la izquierda de los contenidos. Es especialmente útil para relacionar contenidos. Por ejemplo, supongamos que queremos añadir a la página un bloque con código y un párrafo de texto aclaratorio.

El siguiente código:

<div class="highlight">
 Esto es un ejemplo de no sé qué.
Y esto se supone que es un texto aclaratorio. </div>

Se visualiza así:

Esto es un ejemplo de no sé qué.

Texto y código de colores

Si dentro de un texto queremos resaltar una palabra o frase, podemos aplicarle las siguientes clases a los elementos span:

• .highlightred Cambia el color del texto a rojo.
• .highlightblue Cambia el color del texto a azul.
• .highlightgreen Cambia el color del texto a verde.

El siguiente código:

 Texto... <span class="highlightred">rojo</span>, 
 <span class="highlightblue">azul</span> y 
 <span class="highlightgreen">verde</span>. 

Se visualiza así:

Texto... rojo, azul y verde.

Ten en cuenta que si quieres usar estas clases en tus ejemplos de código, no debes usar pre para mostrar el texto preformateado. En su lugar escribe el ejemplo indentado con espacio en blanco.

Esto no funciona:

 <pre><span class="highlightred">esto No funciona</span></pre>

Esto sí:

esto SI funciona

Imágenes flotantes

También podemos hacer flotar elementos en línea (normalmente una imagen), con las clases:

.float-left

El siguiente código:

<p> <span class='float-left'> [[imagen:mdc-colabora.png]] </span> 
  Anímate a participar,  <br /> Necesitamos tu ayuda. <br/> 
  La unión hace la fuerza, <br /> Juntos seremos imparables. <br /></p>

Se visualiza así:

imagen:mdc-colabora.png Anímate a participar,
Necesitamos tu ayuda.
La unión hace la fuerza,
Juntos seremos imparables.

.float-right

El siguiente código:

<p> <span class='float-right'> [[imagen:mdc-colabora.png]] </span> 
  Anímate a participar,  <br />Necesitamos tu ayuda. <br/> 
  La unión hace la fuerza, <br /> Juntos seremos imparables. <br /></p>

Se visualiza así:

imagen:mdc-colabora.png Anímate a participar,
Necesitamos tu ayuda.
La unión hace la fuerza,
Juntos seremos imparables.

Breadcrumbs

El breadcrumbs es una extensión muy utilizada en este wiki, pero tiene sus limitaciones y en algunas páginas no funciona como debiera, esta que lees, es un ejemplo:

El siguiente código:

<breadcrumbs></breadcrumbs>

Se visualiza así:

<breadcrumbs></breadcrumbs>

Por ello en ciertas situaciones puede resultar conveniente crear el breadcrumbs manualmente:

El siguiente código:

 <div class="breadcrumbs"> [[Portada]] > [[MDC:Como ayudar|MDC]] > '''Clases CSS''' </div> 

Se visualiza así:

Tablas

Para darle estilo a las tablas y adaptarlas a las necesidades especificas de cada página disponemos de las siguientes clases CSS:

• .standard-table Estilo básico de tabla estándar.
• .fullwidth-table Tabla con un ancho fijo del 100%.

.standard-table

Sirve para crear tablas con bordes en las celdas, y fondo gris en los encabezados. Ten en cuenta que con este estilo las tablas se adaptan a las dimensiones del contenido.

El siguiente código:

<table class="standard-table">
<tr> <th>Encabezado 1</th> <th>Encabezado 2</th> </tr>
<tr> <td>Este es un ejemplo de:</td> <td><code> standard-table </code> </td> </tr>
</table> 

Se visualiza así:

.fullwidth-table

Sirve para crear tablas con estilo que ocupen el 100% del espacio disponible.

El siguiente código:

<table class="fullwidth-table">
<tr> <th>Encabezado 1</th> <th>Encabezado 2</th> </tr>
<tr> <td>Este es un ejemplo de:</td> <td><code> fullwidth-table </code> </td> </tr>
</table> 

Se visualiza así: