Editors help

Este site semilla está basado en el mismo theme que el site corporativo, de modo que pueden emplearse los mismos recursos de OpenCms y las mismas estructuras de html y js basadas en el Theme de Unify.

Lo que se ha hecho es añadir ciertas funcionalidades y modificaciones en los estilos para adaptarnos al formato más reducido de micro-site.

El theme en el que se basa este site semilla es el mismo que el de la página corporativa: "/system/modules/com.saga.sagasuite.theme.uah/".

La hoja de estilos sobre la que se ha trabajado es la de "/system/modules/com.saga.sagasuite.theme.uah/resources/css/general.css".

Se ha creado al final de la misma un bloque que afecta sólamente a los sites que se creen a partir del site en el que estamos. Todos los estilos están asociados a asignar el valor de "microsite" a la propiedad del site de "Clase Css para la página".

El theme en el que se basa este site semilla es el mismo que el de la página corporativa: "/system/modules/com.saga.sagasuite.theme.uah/".

El fichero js que se ha modificado es "/system/modules/com.saga.sagasuite.theme.uah/resources/js/theme.js".

Se han añadido estas funcionalidades:

• Noticia destacada de la home que se muestra como una imagen sobre la que se superpone el contenido.
• Aplicar estilos específicos a la caja de Twitter.

Se han creado dos formatters nuevos que sólo pueden utilizarse en este site semilla:

Recurso Cabecera / Main Navigation

Este nuevo formatter permite elegir entre 3 tipos diferentes de cabecera (Lo veremos más adelante) a través de los settings de la cabecera. Además permite insertar un título para el portal que acompañe al logo principal.

Ruta

• "/system/modules/com.saga.sagasuite.theme.uah/formatters/sgmainnavigation-unify-formatter.jsp".
• "/system/modules/com.saga.sagasuite.theme.uah/formatters/sgmainnavigation-unify-formatter-config.xml".

Recurso de Encabezado de Navegación

Se ha modificado el que ya existía permitiendo a través de un setting incluir un título personalizado. Por defecto carga la propiedad Texto de Navegación o la de Title en el caso de que no exista la anterior.

Ruta

• "/system/modules/com.saga.sagasuite.theme.uah/formatters/f-microsite-u-navigation-main.jsp".
• "/system/modules/com.saga.sagasuite.theme.uah/formatters/f-microsite-u-navigation-main-config.xml".

Se ha modificado el formatter del recurso "Icon box". Ahora a través de un setting se puede seleccionar entre dos formatos (vertical y horizontal). Actualmente sólo existía el formato vertical. Con el cambio se puede seleccionar también un formato horizontal que muestra el icono a la izquierda y el contenido textual a su derecha.

Ruta

• "/system/modules/com.saga.sagasuite.theme.uah/formatters/f-u-sgiconbox-formatter.jsp".
• "/system/modules/com.saga.sagasuite.theme.uah/formatters/f-u-sgiconbox-formatter-config.xml".

Se han creado 7 páginas modelo diferentes:

Página interior a dos columnas (9-3) sin encabezado de imagen

Template page para páginas interiores a dos columnas con la columna auxiliar y el menú secundario a la derecha. Sin bloque de imagen que sirva como encabezado.

Ejemplo

Página interior a dos columnas (9-3) con encabezado de imagen

Template page para páginas interiores a dos columnas con la columna auxiliar y el menú secundario a la derecha. Con bloque de imagen que sirve como encabezado.

Ejemplo

Página interior a dos columnas (3-9) sin encabezado de imagen

Template page para páginas interiores a dos columnas con la columna auxiliar y el menú secundario a la izquierda. Sin bloque de imagen que sirva como encabezado.

Ejemplo

Página interior a dos columnas (3-9) con encabezado de imagen

Template page para páginas interiores a dos columnas con la columna auxiliar y el menú secundario a la izquierda. Con bloque de imagen que sirva como encabezado.

Ejemplo

Página interior a una columna sin encabezado de imagen

Ejemplo

Página interior a una columna con encabezado de imagen

Página de detalle a dos columnas (9-3) con encabezado de imagen

Template page para páginas que sirvan como detalle de recursos dinámicos a dos columnas con la columna auxiliar y el menú secundario a la derecha. Con bloque de imagen que sirva como encabezado. Además incluye containers que permiten añadir recursos pero sólo a las vistas de detalle de recursos concretos.

Ejemplo

Con el nuevo formatter de cabecera podemos elegir entre 3 tipos de cabecera a través de un setting:

1. Logotipo a la izquierda y menú principal por debajo a ancho completo.
2. Logotipo a la derecha y menú principal por debajo a ancho completo.
3. Logotipo a la izquierda y menú principal que flota a su derecha.

Pero además disponemos de otro setting que permite seleccionar si utilizamos el mega-menú desplegable por columnas (igual que la página corporativa) o uno que no ocupa el ancho completo y muestra las columnas unas debajo de otras (más adecuado cuando no existen muchas secciones).

Settings

Tipo 1

Tipo 2

Tipo 3

Tipos de menús desplegables

Mega menu

Dropdown menu

Tipos de título de página

Tipo pastilla

Tipo sólo texto

Para editar y seleccionar el tipo de título que acompaña al logo en la cabecera debemos acceder al formulario de edición del recurso de cabecera:

Una vez en el formulario hay que ir a la pestaña de "Merchant":

Después entramos en el editor "WYSIWYG" y accedemos a la opción de "Ver código fuente" :

Vemos entonces que hay dos elementos <p> y uno de ellos comentado. En función del tipo de título que queramos usar dejaremos descomentado uno de ellos:

El elemento <p> con la clase "brown-box" es el tipo de título en forma de pastilla con el texto blanco sobre fondo marrón y el que tiene la clase "no-box" es el que pinta el título en gris.