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:
- Cree una copia del tema predeterminado existente.
- 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.
- Extraiga el archivo JAR y ubique la carpeta resources/css.
- 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.
- 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.
- 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.
- Guarde los cambios.
- 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.