Aplicar estilos en línea a los componentes de un formulario adaptable inline-styling-of-adaptive-form-components
Puede definir el aspecto y el estilo generales de un formulario adaptable especificando los estilos mediante el Editor de temáticas. Además, puede aplicar estilos CSS en línea a componentes de formulario adaptable individuales y previsualizar los cambios sobre la marcha. Los estilos en línea reemplazan el estilo proporcionado en el tema.
Aplicar propiedades CSS en línea apply-inline-css-properties
Para añadir estilos en línea a un componente:
-
Abra el formulario en el Editor de formularios y cambie el modo al modo Estilo. Para cambiar el modo al modo de estilo, en la barra de herramientas de la página, seleccione
-
Seleccione un componente de la página y seleccione el botón Editar
También puede seleccionar componentes en el árbol de jerarquía del formulario de la barra lateral. El árbol de jerarquía del formulario está disponible como Objetos del formulario en la barra lateral.
En el modo Estilo, puede ver los componentes que aparecen en Objetos de formulario. Sin embargo, la lista Objetos de formulario de la barra lateral muestra componentes como los campos y los paneles. Los campos y los paneles son componentes genéricos que pueden contener otros componentes como, por ejemplo, cuadros de texto y botones de opción.
Cuando seleccione un componente en la barra lateral, verá una lista de todos los subcomponentes y las propiedades del componente seleccionado. Puede seleccionar un subcomponente específico y aplicarle un estilo.
-
Haga clic en una de las pestañas de la barra lateral para especificar las propiedades CSS. Puede especificar propiedades como las siguientes:
- Dimensiones y posición (Mostrar configuración, relleno, altura, anchura, margen, posición, índice Z, flotante, borrar, desbordamiento)
- Texto (Familia de fuentes, grosor, color, tamaño, altura de línea y alineación)
- Fondo (Imagen y degradado, color de fondo)
- Borde (Anchura, estilo, color, radio)
- Efectos (Sombra, opacidad)
- Avanzadas (Permite escribir CSS personalizado para el componente)
-
Del mismo modo, puede aplicar estilos a otras partes de un componente, como Widget, Pie de ilustración y Ayuda.
-
Seleccione Listo para confirmar los cambios o Cancelar para descartarlos.
Ejemplo: estilos en línea de un componente de campo example-inline-styles-for-a-field-component
Las siguientes imágenes muestran un campo de texto antes y después de que se le apliquen estilos en línea.
Componente de cuadro de texto antes de aplicar propiedades de estilo en línea
Observe el cambio en el estilo del cuadro de texto después de aplicar las siguientes propiedades CSS, como se muestra en la imagen.
Componente de cuadro de texto después de aplicar propiedades de estilo en línea
Siguiendo los pasos anteriores, puede seleccionar y aplicar estilos a otros componentes, como paneles, botones de envío y botones de opción.
Copiar y pegar estilos copy-paste-styles
También puede copiar y pegar un estilo de un componente a otro en un formulario adaptable. En el modo Estilo, seleccione el componente y seleccione el icono Copiar
Seleccione el otro componente del mismo tipo y seleccione el icono Pegar
Definir estilos para diferentes estados de un componente set-styles-for-states
Puede definir estilos para los diferentes estados de un tipo de componente. Los diferentes estados incluyen: Enfoque, Desactivado, Mantener el puntero, Error, Correcto y Obligatorio.
Para definir el estilo de un estado de un componente:
-
En el modo Estilo, seleccione el componente y seleccione el icono Editar
-
Seleccione el estado del componente mediante la lista desplegable Estado.
-
Defina el estilo para el estado seleccionado del componente y seleccione
También puede simular los estados de éxito y error. Seleccione el icono Expandir para ver las opciones Simular éxito y Simular error.
Ver también see-also
- Crear un formulario adaptable de AEM
- Añadir un formulario adaptable de AEM a la página de AEM Sites
- Aplicar temáticas a un formulario adaptable de AEM
- Añadir componentes a un formulario adaptable de AEM
- Usar el servicio Captcha en un formulario adaptable de AEM
- Generar la versión en PDF (DoR) de un formulario adaptable de AEM
- Traducir un formulario adaptable de AEM
- Habilitar Adobe Analytics para un formulario adaptable con el fin de hacer un seguimiento del uso del formulario
- Conectar el formulario adaptable a Microsoft SharePoint
- Conectar formularios adaptables a Microsoft Power Automate
- Conectar el formulario adaptable a Microsoft OneDrive
- Conectar el formulario adaptable al almacenamiento de Microsoft Azure Blob
- Conectar el formulario adaptable a Salesforce
- Uso de Adobe Sign en un formulario adaptable de AEM
- Agregar una nueva configuración regional para un formulario adaptable
- Enviar datos de formulario adaptable a una base de datos
- Enviar datos de formulario adaptable a un punto final REST
- Enviar datos de formulario adaptable al flujo de trabajo de AEM
- Utilizar el portal de Forms para ver una lista de Formularios adaptables de AEM en un sitio web de AEM
- Añadir versiones, comentarios y anotaciones a un formulario adaptable
- Comparar formularios adaptables