Agregar estilos personalizados al Editor web de guías
En este artículo aprenderemos a añadir estilos personalizados para cambiar el aspecto y la presentación predeterminados del editor web.
Esto implica los siguientes pasos:
- Añadir los estilos personalizados mediante la configuración del editor XML de perfil de carpeta
- Selección del perfil de carpeta respectivo en el editor web y prueba de los cambios
Implementación de mediante un ejemplo
Comprendamos esto con un ejemplo en el que queremos mostrar la descripción breve y el título como bloque independiente con algunos aspectos de estilo en el editor.
Implementación de esto
Añadir el CSS personalizado al perfil de carpeta
Use los perfiles de carpeta para comprobar css_layout.css en la pestaña "Configuración del editor XML" y agregar el archivo CSS con estilos personalizados
Utilice lo siguiente para configurar el estilo anterior en el editor web:
- Use css_layout.css y cárguelo en el perfil de carpeta que elija
- AEM Instale el paquete adjunto webeditor-styles-resources.zip mediante el administrador de paquetes para instalar los recursos utilizados en el archivo CSS anterior
This will install the resources at path "/content/dam/resources" which will include sub-folders "fonts" and "images"
Pruebas
- Abrir editor web
- En las preferencias del usuario, elija el perfil de carpeta en el que ha añadido los estilos personalizados. Si lo ha agregado al Perfil global, probablemente ya esté utilizando.
- Al abrir un tema, verá que el área de edición debe tener una interfaz de usuario personalizada
Please note this is compatible to AEM Guides version 4.2 and AEM Guides cloud version 2303 (March)
Referencias
También le puede interesar la sesión de expertos sobre las configuraciones y personalizaciones de webeditor que se tratan en Sesión de expertos sobre webeditor