Download Apariencia y estilo gráfico

NEWTENBERG ENGINE - Manual de instalación
1
Administración y configuración
Apariencia y estilo gráfico
Los estilos gráficos se definen fuera del CMS. Ésto permite al diseñador usar
cualquier aplicación externa para generar las hojas de estilos y los html según
su definición del diseño.
Estilo gráfico
• Los estilos en la versión W3 del CMS
Ahora los estilos se definen fuera del CMS. Ésto permite al diseñador usar cualquier
aplicación externa para generar las hojas de estilos y los html que estime necesarios.
•
Las hojas de estilos por omisión
Para facilitar la puesta en marcha del sitio, el sistema entrega un conjunto base de
estilos compuesto por varios archivos css, que permiten diagramar los moldes y darle el estilo
a las representaciones.
Nombre de la hoja de estilo
screen.css
layout.css
header.css
nav.css
main.css
footer.css
• Hojas de estilos especiales
Función
Su función es invocar a todas las hoja de
estilos que ocupará el sitio con el método
@import "url"
Permite definir los elementos tranversales
al sitio tales como el body, estructura y
diagramación de las páginas.
Define todos los estilos usados en esta
zona, reservada principalmente para
colocar el banner o imagen que identifica
al sitio.
Define todos los estilos usados en la zona
definida para la navegación principal.
Define todos los estilos asociados a
los contenidos. En este css está la
mayoría de las definiciones gráficas de
las principales representaciones, tales
como: Artículo completo, Recuadros. Lista
itemizada, etc. (
ver Guía de salidas de html
por representación [http://
engine.newtenberg.com/static/cache/
binaries/articles-93262_salidas_html.pdf?
binary_rand=8800]
).
Permite dar estilo al footer o pie de
página.
NEWTENBERG ENGINE - Manual de instalación
2
Las hojas de estilo especiales generalmente vienen asociadas a tecnologías jquery
(framework Javascript) que permiten potenciar las representaciones nativas del CMS, tales
como articulo completo, recuadros, etc., permitiendo, por ejemplo, que las secciones de
un eidox se desplieguen como tabuladores o acordeones. jQuery UI es la biblioteca de
componentes preferida para los desarrollos Engine y la hoja de estilo por omisión que entrega
esta biblioteca se llama " jquery-ui-1.7.2.custom.css".
Aplicación de estilos gráficos
• Vincular las hojas de estilos
La integración de los estilos se puede hacer de dos maneras:
• En la opción "Recurso: Hoja de estilo / Agregar "style" de la caja de encabezado html.
La hoja de estilo que se adjunta por omisión permite llamar a la hoja de estilo screen.css
con el método @import"url"
• En la opción "CSS:Texto a incluir como definición de estilos gráficos" de la caja de
encabezado html. Se llama directamente con el método @import"url"
Aplicación de estilos en las cajas
La aplicación de estilos se hace en la opción "Regla de Estilo" de las cajas. El nombre
del estilo se escribe en un campo de texto. Ésto permite asociar más de un estilo a la caja.
• Cambiar los tags y estilos a los elementos de una caja
En todas las cajas que tienen la opción de seleccionar y ordenar los elementos de
un eidox (articulo completo y recuadros, por ejemplo), se puede cambiar el estilo y el tag
predefinido por el sistema. Para esto se debe seleccionar el elemento (1), luego hacer clic
en "Parámetros adicionales"(2) y cambiar el tag usando las opciones del select "HTML tag"
y/o el estilo escribiéndolo en la caja de "CSS class". Para hacer efectivos los cambios debe
presionar el botón Actualizar.
Aplicación de estilos a los recursos del eidox
Los recursos que se insertan en un eidox vienen con un estilo predefinido, que para
las imágenes en general es "figure", para los documentos (word, excel, pdf, ppt, etc) es
"bajardoc", y si es un video o flash, "video".
Estos class permiten controlar desde la hoja de estilo todos los recursos de un eidox,
pero si necesitamos que una o varias imágenes tengan otras características diferentes al
estándar, en la ventana que se abre al insertar un recurso en un eidox, existe la opción de dar
un estilo diferente a la imagen.
La alineación estándar de las imagenes (figure) es a la derecha y flotante, para que
floten a la izquierda el estilo que se debe escribir es "figure2", si se necesita centrada y sin
flotar es "grafico".
NEWTENBERG ENGINE - Manual de instalación
3