Definición de un tema de comunidad

Para definir un tema personalizado para Comunidades, se suele empezar por copiar un tema existente. Las hojas de estilo para Comunidades están organizadas de forma que la información de color se almacene aparte de la estructura global de la página. Esta separación hace que sea sencillo cambiar el color de la página sin que afecte al diseño.

Antes de empezar

Para probar sus cambios de estilo, podría serle útil emplear una herramienta de desarrollo web como la extensión Firebug para el navegador Mozilla Firefox. Firebug le permite modificar colores y estilos dinámicamente en la página, para que pueda previsualizar el aspecto de la página cuando aplique su estilo nuevo.

Procedimiento

Para definir un tema de comunidad, lleve a cabo los pasos siguientes:

  1. Cree una copia del tema predeterminado existente.
    1. Copie el archivo com.ibm.oneui3.styles_build stamp.jar. de application_server\installedApps\cell_name\Common.ear\connections.web.resources.war\WEB-INF\eclipse\plugins\ en una ubicación temporal.

      A continuación se muestra un ejemplo de la vía de acceso donde es posible que encuentre el archivo JAR:
      /opt/IBM/WebSphere/AppServer/profiles/AppSrv01/installedApps/cell01/Common.ear/connections.web.resources.war/WEB-INF/eclipse/plugins

      Nota: Debe copiar el archivo JAR para poder acceder a la carpeta defaultTheme. No copie la carpeta del directorio nav/common/styles porque este directorio contiene temas anteriores.
    2. Extraiga el archivo JAR y ubique la carpeta resources/css.
    3. Copie el directorio defaultTheme desde la carpeta css en el directorio customizationDir/themes, donde customizationDir es el directorio base en el que almacena las personalizaciones. Si el subdirectorio themes/ todavía no existe, créelo ahora.
      Nota: El directorio customizationDir está ubicado en el directorio de almacén de contenido compartido que se define durante la instalación, al guardarlo como variable de IBM® WebSphere Application Server denominada CONNECTIONS_CUSTOMIZATION_PATH. Para obtener información sobre cómo averiguar dónde está ubicado su directorio de personalización base, consulte Cómo determinar dónde guardar sus personalizaciones.
    4. Cambie el nombre del directorio customizationDir/themes/defaultTheme a customizationDir/themes/corporateTheme. Cambie el nombre de la hoja de estilo defaultTheme.css dentro del directorio customizationDir/themes/corporateTheme a corporateTheme.css. Cambie el nombre de la hoja de estilo defaultThemeRTL.css a corporateThemeRTL.css..
      Notas:
      • El directorio defaultTheme contiene hojas de estilo denominadas defaultTheme.css y defaultThemeRTL.css. En otros directorios de tema, las hojas de estilo se denominan themeNameTheme.css y themeNameThemeRTL.css.
      • Los nuevos temas se deben guardar en el directorio customizationDir común de modo que pueda utilizare en todas las aplicaciones.
  2. Actualice el archivo corporateTheme.css y otros archivos CSS del directorio customizationDir/themes/corporateTheme según sea necesario. El archivo corporateTheme.css es ahora la hoja de estilos principal en la que realizará cambios. Por ejemplo, a lo mejor quiere modificar la configuración de colores para que se ajuste a los colores corporativos de su organización.
    Nota: Si utiliza una herramienta como Firebug para probar sus cambios, asegúrese de copiar los valores que ha modificado en los nuevos archivos CSS.
  3. Guarde los cambios.
  4. Para asociar una imagen de miniatura con el tema personalizado, suba un archivo theme.jpg al siguiente directorio:

    customizationDir/communities/images/

    Esta imagen se mostrará en la paleta de temas.

Qué hacer a continuación

Tras definir un tema nuevo, necesita añadirlo al archivo de configuración Comunidades, communities-config.xml. Para obtener más información, consulte Adición de un tema al archivo de configuración de Comunidades.