Edición de estilos

Utilice CSS Designer para personalizar el archivo Style.css de un tema.

Apertura de CSS Designer

Hay varias maneras de editar el estilo de un tema:
  • En Portal Designer, seleccione Editar estilo en el menú emergente. El archivo Style.css del tema activo se abrirá en CSS Designer.
En CSS Designer (pestaña etiquetada como Styles.css), hay dos vistas desde las que realizar la edición: el panel Vista previa (izquierda) y el editor Origen (derecha).

Archivo Styles.css en Page Designer

La imagen anterior muestra el archivo themeskin.html en el panel Vista previa. En este archivo, puede comprobar estilos, como por ejemplo los fonts, que afectan a la textura y al tema activos. A la izquierda del panel Vista previa, observe que la vista Esquema cambia a la vista Estilos. Para realizar cambios en el tema y la textura, pulse en el nombre de un elemento de estilo en la vista Estilos. En este ejemplo, observe que si resalta el elemento .wpsToolBar, también se resalta el elemento correspondiente del panel Vista previa y el panel Origen del archivo Styles.css.

Para personalizar los estilos en las aplicaciones de portlet, utilice el archivo portlet.html. Para mostrar el archivo portlet.html en el panel Vista previa, elija "portlet.html" en el menú desplegable Vista previa con: de Styles.css.

Edición de estilos en un tema

Si abre CSS Designer mientras está editando un tema en Page Designer tendrá la posibilidad de enlazar con una hoja de estilo nueva o ya existente. Además, puede especificar clases nuevas. Para obtener más información sobre cómo utilizar Page Designer para editar temas, consulte Edición de temas.

Para abrir CSS Designer, siga estos pasos: aparecerá un recuadro de diálogo.
  • En la barra de menús, elija Editar > Editar estilo. Aparecerá un recuadro de diálogo.
  • Elija qué aspecto del estilo desea editar y, a continuación, pulse Aceptar.

o bien

Desde el tema abierto en Page Designer, seleccione el elemento que desee editar y efectúe el cambio en la vista Propiedades. Si se define una norma de clase de estilo para el elemento de selección, dicha norma se listará en el campo "clase" de la vista Todos los atributos. Para acceder a la vista Todos los atributos, pulse en el icono de tabla situado en la parte superior derecha de la barra de herramientas en la vista Propiedades. Esto cambiará la vista Propiedades por una lista de todos los atributos asociados al elemento que haya seleccionado en Page Designer. Pulse este icono por segunda vez para volver a la vista Propiedades.

Vista previa de estilos de portlet

Para obtener una vista previa de los efectos de los estilos para los portlets especificados en una hoja de estilos para un tema, cree un proyecto de portal que contenga el tema (y la hoja de estilos). Asocie uno de los proyectos de portlet al proyecto de portal de forma que la hoja de estilos sea efectiva en la página Diseño y la página Vista previa de Page Designer cuando abra los archivos JSP del portlet.
  1. Para crear un proyecto de Portal, seleccione Archivo > Nuevo > Proyecto de portal.
  2. En el Explorador de proyectos, sustituya PortalContent > themes > html > ie > en > styles.css por el archivo style.css del proyecto de portlet.
Nota: Una página de portlet no debe tomar ningún estilo hasta que se despliegue o se añada a un portal determinado. El proyecto de portal creado utilizando estos procedimientos es solo para poder obtener una vista previa de los efectos de un archivo styles.css de un tema sobre un portlet.
Tareas relacionadas
Utilización de Portal Designer
Definición de diseños
Trabajo con texturas
Trabajo con temas
Adición de portlets a páginas de portal

(C) Copyright IBM Corporation 2002, 2005. Reservados todos los derechos.