Estilos

Es importante que las páginas internas de nuestro sitio web, guarden cierta similitud en cuanto a su formato y diseño. Los Estilos están pensados para que podamos utilizar formatos de texto predeterminados en diferentes páginas internas. Es decir, podemos definir las características que va a tener el formato de texto de los títulos, textos, enlaces, etc. Y esos parámetros asignarlos a los contenidos de cada página.

La creación de Estilos requiere un nivel de conocimientos informáticos un poco mas elevado, ya que debemos introducir manualmente el código de cada atributo que queremos asignar a cada estilo.

En la administración veremos una pantalla como esta, donde encontraremos algunos Estilos ya predefinidos:

 

Estos estilos son los que aparecen en la pestaña Estilos en la vista de diseño cuando queremos agregar/modificar el contenido de una página o sección.

Asignar un estilo al texto del diseño de una página es muy simple, solo hay que seleccionar el texto y buscar en la lista el estilo que deseamos colocarle. Automáticamente el texto seleccionado adquiere el formato predeterminado de ese estilo.

 

Agregar un Estilo

Para crear nuevos estilos, debemos escribir en el editor, debajo de todo, el nombre del nuevo Estilo y a continuación entre {} los atributos de dicho estilo, como se muestra en el ejemplo a continuación:

Código

Resultado

.nuevo_estilo {

COLOR: #CC0000;

FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;

FONT-SIZE: 12px;

FONT-WEIGHT: bold;

TEXT-DECORATION: none

}

Texto con el estilo: “nuevo_estilo”

Cuando escribamos el nuevo código del estilo debemos presionar el botón MODIFICAR para que los cambios se guarden.

En el caso de que queramos modificar las características de uno de los estilos existentes solo debemos editar el código del mismo y luego presionar el botón Modificar.

Una opción más que nos ofrece este editor es la de Previsualizar los estilos, de esta manera podemos verlos antes de agregarlos al sistema. Para eso, solo debemos presionar el botón Previsualizar y se abrirá una ventana donde mostrará un ejemplo de cada estilo, cada uno con su nombre y decorado con los atributos que le pertenecen.