Hojas de estilo

Las hojas de estilo son tan importantes para el diseño web hoy en día como lo son las plantillas. La mayor parte de los diseñadores utilizan de manera un lenguaje de marcado y hojas de estilo para conseguir que sus sitios sean más accesibles y fáciles de modificar. CMS Made Simple cree en los estándares web y a través del gestor de hojas de estilo facilita su uso.

Aquí no se va a profundizar en los detalles de CSS, ya que esta cuestión está magníficamente cubierto en infinidad de sitios, y muchos de ellos accesibles gratuitamente en Internet. Aquí describiremos cómo se usan las hojas de estilo en conjunción con las plantillas por defecto de CMS Made Simple. Para aprender cómo cambiar ciertas propiedades en las hojas de estilo, puedes leer Personalizando las hojas de estilo.

Como ya dijimos en Soy un diseñador, las hojas de estilo son dónde se aplican todos los formatos y estilos de tu sitio, usando CSS. Por lo tanto es bueno aprender primero las bases del CSS para saber qué estás haciendo realmente. Sin embargo, te daremos algunas ideas sobre cómo cambiar algunas cosas básicas como los colores y el logotipo.

La gestión de las hojas de estilo es muy sencilla. Las hojas de estilo se adjuntan a la plantilla en la que se quieren usar esos estilos. Puedes adjuntar sólo una hoja a una plantilla si así lo deseas. Sin embargo, el método que hemos escogido para las plantillas por defecto consiste en dividir el CSS en varias hojas de estipo, agrupándolas por la similitud de sus características. Esto facilita encontrar y cambiar ciertos tipos de estilos.

Hojas de estilo usadas en las plantillas de CMS Made Simple

Hay cinco hojas de estilo adjuntas a todas las plantillas, las mismas cinco para todas ellas. Además cada plantilla tiene adjuntas una o dos hojas de estilos específicas, en función del tipo de menú que use esa plantilla.

Estas son las hojas de estilo que usan todas las plantillas:

Hojas de estilo adjuntas a todas las plantillas

• Layout (Posición )-- Aquí se definen los parámetros de posición (distribución) generales, que son los mismos para todas las plantillas por defecto de CMSMS. Pero, para cada proyecto en el que trabajes deberás personalizar esta hoja de estilo.
• Typography (Tipografía) -- Aquí es donde se aplican todos los estilos a los tipos de letra, enlaces, encabezados, imágenes, listas, etc.
• Colours (Colores) -- Todos los colores se obtienen de esta hoja de estilo. Las únicas porpiedades que hay aquí son colores, fondos, y colores de los bordes. No añadas ninguna otra propiedad aquí o puede que el diseño de su sitio se vea afectado. Los colores de los menús están en sus propias hojas de estilo.
• Forms (Formularios) -- Para facilitar el que los formularios se vean igual en varios navegadores, sus estilos tienen sus propias hojas. No necesitarás tocar esta hoja muy a menudo.
• Tools (Herramientas) -- Esta es una hoja de estilo que necesita adjuntarse a todas las plantillas para uniformizar el comportamiento entre navegadores. No necesitas tocar nada de ella.

Hojas de estilo de nevegación

• Nav-Horizontal / Nav-Vertical -- En función del diseño de tu plantilla necesitarás adjuntar una de estas hojas o ambas. Sólo tienes que cambiarles unas pocas cosas para que los menús tengan el aspecto que tú quieras.
• Default CSSMenu Horizontal / Default CSSMenu Vertical -- Si prefieres usar un menú desplegable basado en CSS, puedes usa una de estas hojas.

Hojas de estilo específicas

• Layout-XXX -- Hay una hoja de estilo específica para cada plantilla. Aquí es donde fijas la distribución (o quizás los estilos) que sólo se aplican a esa plantilla en particular. Por ejemplo, cambiando solo esta hoja puedes hacer que el menú aparezca en la parte alta o en uno de los márgenes de la página.

Si quieres leer una introducción sobre cómo cambiar los selectores y sus propiedades en estas hojas de estilo dirígete a Personalizando las hojas de estilo.

Añadir una hoja de estilo

Para añadir una hoja de estilo sigue estos pasos:

1. Dirígete al gestor de hojas de estilo en Diseño -> Hojas de estilo.
2. Pulsa sobre Añadir hoja de estilo que aparece en la parte baja de la pantalla.
3. Dale un nombre a la nueva hoja. Este nombre servirá para referirse a ella desde otras partes y para distingurla de las demás.
4. Teclea o pega el CSS de tu hoja de estilos en la casilla Contenido. Introdúcela como si la estuvieses escribiéndola en el bloc de notas.
5. Opcionalmente puedes introducir el Tipo de medio (el W3C tiene una lista de tipos de medio reconocidos). Si no sabes para qué sirve esto puedes dejarlo en blanco.
6. Pulsa OK.

¡Ya está! Ahora que has creado la hoja puedes empezar a usarla en tus diseños adjuntándola a las plantillas.

Adjuntar una hoja de estilo

Ya tienes una hoja de estilo añadida pero, ¿cómo se adjunta a una plantilla? Bien, ésto es lo que debes hacer:

1. Dirígete al gestor de hojas de estilo en Diseño -> Hojas de estilo.
2. Pulsa el icono amarillo de CSS ( ) que hay en la fila de la hoja de estilo que quieres adjuntar.
3. En la siguiente pantalla aparecerá una lista de plantillas que ya tienen esa hoja de estilo adjunta, y un menú desplegable del resto de plantillas (a las que se la puedes adjuntar). Selecciona en ese menú la plantilla a la que se la quieres adjuntar.
4. Pulsa Añadir CSS.
5. La plantilla que hayas seleccionado aparecerá en la lista de plantillas que tienen asignada esa hoja de estilo.

Recuerda que para que se incluyan las hojas de estilo adjuntas en la plantilla, debes introducir la etiqueta {stylesheet} dentro de la propia plantilla.

Ten en cuenta que también puedes adjuntar una hoja de estilo desde el administrador de plantillas (Diseño -> Plantillas), sólo que el camino es a la inversa: primero seleccionas la plantilla a la que quieres adjuntarle la hoja, y luego la hoja de estilo a adjuntar.

Quitando la asociación de una hoja de estilo

Para eliminar la asociación existente entre una hoja de estilo y la plantilla a la que se la has adjuntado, debes hacer lo siguiente:

1. Dirígete al gestor de hojas de estilo en Diseño -> Hojas de estilo.
2. Pulsa el icono amarillo de CSS ( ) que hay en la fila de la hoja de estilo que quieres eliminar.
3. En la siguiente pantalla aparecerá una lista de plantillas que tienen esa hoja de estilo adjunta. Pulsa el icono de Borrar ( ) que aparece en la fila de la plantilla de la que deseas borrar la asociación.
4. La plantilla que hayas seleccionado desaparecerá de la lista de plantillas que tienen asignada esa hoja de estilo.

Añadir estilos al editor FCKeditor

FCKeditor tiene un menú desplegable de estilos que puede usarse para aplicar estilos CSS a la página que se está editando. Para seleccionar qué estilos de todos los disponibles quieres tener en el menú desplegable de FCKeditor, debes seguir estos pasos:

1. Crea una nueva hoja de estilo que quieres aplicar al texto, por ejemplo, "div.pink { color: pink; }".
2. Asóciala a tu plantilla actual.
3. Dirígete a Extensiones -> FCKeditor X -> Pestaña Estilos y pega el mismo código que pusiste en el primer paso.
4. Cuando estés editando algún contenido, podrás seleccionar ese estilo del menú desplegable de FCKeditor.

This page in: English - Deutsch - Español - Français - Italiano - Lietuvių - Nederlands - Norsk - Polski - Česky - Русский - Svenska - Tiếng Việt - عربي - 日本語 简体中文

User Handbook/Getting Started/Designer/Stylesheets/es

From CMSMS