Show Menu
TEMAS×

Construcciones de estilo para formularios adaptables

Requisitos previos

Conocimiento de CSS y del marco LESS.

Qué se puede personalizar

El artículo enumera las clases css de formularios adaptables disponibles públicamente. Puede aprovechar estas clases para aplicar estilo a varios componentes de un formulario adaptable. El estilo de los componentes de creación, como cuadros de diálogo y barras de estado que muestran advertencias, está fuera del alcance de este artículo. Utilice estas construcciones de estilo para crear estilos (con CSS o Menos) solo cuando no pueda aplicar estilo a los componentes con el editor de temas.

Personalización de estilos en formularios adaptables

El marco LESS simplifica el caso de uso para personalizar estilos en formularios adaptables. El marco permite definir estilos mediante un conjunto de variables y funciones (mezclas). El marco LESS ayuda a reducir el tamaño del código incorporado y aumenta su reutilización.
Puede personalizar los estilos de formulario adaptables de las siguientes formas:
  • Cambiar el tema
  • Cambiar el estilo del componente

Cambio del tema

Puede cambiar el tema de un formulario adaptable para garantizar que su aspecto sea coherente con las páginas web en las que está incrustado el formulario adaptable.
Los cambios en el aspecto general del formulario adaptable que utiliza propiedades CSS suelen formar parte de los cambios del tema. Los cambios más importantes en el aspecto y funcionamiento del formulario adaptable, como los cambios en la presentación y la colocación de los componentes, no se consideran cambios de tema.
En función del bootstrap, el siguiente conjunto de propiedades CSS define el tema de una página web:
  • Color de fondo
  • Borde (tipo, color, grosor)
  • Color de fuente
  • Espacio
  • imagen
  • Tamaño de fuente
  • LineHeight
Actualmente, las variables LESS se definen solo para estas propiedades de los distintos elementos de un formulario adaptable.

Cambio del estilo de componente

Puede realizar cambios en el aspecto, el diseño, la posición y la visibilidad de los elementos. Para realizar esta tarea, cree o actualice los archivos .css personalizados para incluir las construcciones de estilo que se enumeran en este artículo.
Para aplicar un estilo a un formulario adaptable, abra el formulario adaptable en para editarlo y abra las propiedades del contenedor de formularios adaptables, especifique la ruta de acceso del archivo CSS personalizado en la ficha básica. Las construcciones de estilo predeterminadas del formulario adaptable y sustituidas por las construcciones enumeradas en el archivo .css personalizado.

Componentes

Los componentes analizados en este artículo tienen sus clases CSS predefinidas. Puede editar las variables para modificar los estilos en las clases CSS. Como alternativa, puede volver a escribir toda la clase. En esta sección se describen las clases de los componentes y los estilos que se pueden modificar mediante variables.

Estilo de contenedor

Un contenedor es el componente de nivel superior. Otros paneles y campos se encuentran debajo del componente contenedor.
Clase de CSS
guideContainerNode
Descripción de las variables
Descripción de las variables
container-bgColor
Color de fondo del contenedor
container-padding
Relleno para el contenedor
container-margin
Margen para el contenedor
container-fontColor
Color de fuente del contenedor

Estilo de campo

Los formularios adaptables incluyen varios tipos de campos. Cada campo tiene un nombre de clase único, que es el nombre del campo. El campo también tiene un nombre de clase común guideFieldNode .
Los campos incluyen etiquetas, utilidades, descripción de la ayuda (descripción larga y breve) e iconos de ayuda de campo (signo de interrogación).
Clase de CSS
guideFieldNode
Variables
Descripción
field-padding
Relleno para el campo
field-error-font-color
Color de fuente del mensaje de error del campo
field-error-font-size
Tamaño de fuente del mensaje de error del campo

Estilo de etiqueta

La etiqueta de elemento HTML utilizada para el campo incluye las clases izquierda o arriba , dependiendo de si la etiqueta está en la parte superior o izquierda.
Clase de CSS
guideFieldLabel
Variables
Descripción
label-font-color
Color de fuente de la etiqueta de campo
label-font-size
Tamaño de fuente de la etiqueta de campo
label-line-height
Propiedad de altura de línea CSS para la etiqueta de campo
label-font-weight
Propiedad de grosor de fuente CSS para la etiqueta de campo
label-margin
Margen de la etiqueta de campo
Las reglas CSS de la etiqueta se aplican mediante la etiqueta guideFieldLabel . Si es un autor, sobrescriba esta regla para que los cambios personalizados sean visibles.

Estilo de utilidades

Según el tipo, las utilidades también incluyen clases. Normalmente, los widgets incluyen la guideFieldWidget clase. Los widgets que se envían con HTML normalmente utilizan la entrada y selección de elementos HTML estándar. El estilo se realiza en consecuencia. No se puede aplicar estilo a una utilidad personalizada cambiando las variables.
Clase de CSS
guideFieldWidget
Variables
Descripción
widgets-bg-color
Color de fondo para los widgets (no funciona para la casilla de verificación y el botón de radio)
widgets-border-color
Color del borde de los widgets
widgets-border-thickness
Tamaño del borde de los widgets
widgets-border-radius
Radio del borde de los widgets
widgets-border-type
Tipo de borde de los widgets
widget-border-focus-type
Tipo de enfoque para bordes de widget
widgets-border
Estilo de borde consolidado de widgets
widgets-font-color
Color del texto dentro del widget
widgets-font-size
Tamaño del texto dentro del widget
widgets-line-height
Propiedad de lineheight CSS para la utilidad
widgets-padding
Propiedad de relleno CSS para la utilidad
widgets-focus-border-color
Color del borde cuando el widget está en foco
widgets-mandatory-border-color
Color de borde del widget para los campos obligatorios
widgets-mandatory-bg-color
Color de fondo del widget para los campos obligatorios
widgets-disabled-bg-color
Color de fondo del widget cuando el campo está desactivado
widgets-disabled-font-color
Color de fuente del widget cuando el campo está desactivado
widgets-disabled-border-color
Color de borde del widget cuando el campo está desactivado
widget-height
Altura del widget (no funciona con la casilla de verificación y el botón de radio)
checkbutton-height
Altura de la casilla de verificación y del botón de radio.
listboxwidget-height
Altura máxima de un menú desplegable de selección múltiple

Limitaciones en el estilo de utilidades

El estilo de los campos seleccionados, obligatorios y desactivados se restringe mediante variables. Sin embargo, puede cambiarlo anulando los estilos. La restricción mediante variables se proporciona principalmente para mantener el número de variables bajo control. La restricción se puede relajar si el aspecto de un campo cambia drásticamente porque está en cualquiera de los estados mencionados anteriormente.

Descripción de la ayuda

Un autor puede especificar el contenido de la Ayuda en los campos mediante los componentes de descripción breve y larga. Ambos componentes tienen una clase común .guideHelpDescription y otra clase .long / .short , según el tipo de descripción. El contenido de la Ayuda se incluye en un elemento de párrafo para anular el estilo de la descripción. La descripción de la Ayuda (larga y corta) se modifica mediante variables que empiezan por widgetshelp, como se indica en la siguiente tabla:
Variables
Descripción
widgets-help-long-bg-color
Color de fondo de la ayuda larga de los widgets
widgets-help-long-border-color
Color del borde de la ayuda larga de los widgets
widgets-help-long-border-indicator-color
Color del borde del indicador izquierdo de la Ayuda larga de los widgets
widgets-help-short-bg-color
Color de fondo de la breve ayuda de los widgets
widgets-help-short-color
Color de fuente de la breve ayuda de los widgets
widgets-help-short-tooltip-bg-color
Color de fondo de la ayuda de información de objeto breve de los widgets
widgets-help-short-tooltip-color
Color de fuente de la ayuda de información de objeto corta de los widgets

Terms and Conditions

La utilidad Términos y condiciones (TnC ) permite especificar términos y condiciones. Puede personalizar la utilidad mediante las variables descritas en la tabla siguiente.
Variables
Descripción
tnc-unvisited Color de fuente del vínculo tnc no visitado.
tnc-visited Color de fuente del vínculo tnc visitado.

Botón

Los botones también son widgets. Sin embargo, su estilo es ligeramente distinto al de los widgets. En los formularios adaptables, cualquiera de los siguientes elementos constituye un botón:
  • botón
  • elemento con clase .button
Código HTML para el botón:
<button type="button" >
<span class="iconButtonicon"></
span>
<span class="iconButtonlabel"></
span>
</button>
Clase de CSS
Descripción
iconButton-icon
Proporciona iconos para el botón
iconButton-label
Etiqueta/rótulo del botón Estilos
Variables
Descripción
button-border-size
Tamaño del borde de los botones
button-border-type
Tipo de borde
button-padding
Propiedad de relleno CSS para el botón
button-font-size
Tamaño de fuente del botón
button-background-color
Color de fondo del botón
button-font-color
Color de fuente del botón
button-border-color
Color del borde del botón
button-large-padding
Relleno para botones grandes (botones con clase .buttonlarge)
button-large-font-size
Tamaño de fuente para botones grandes
button-small-padding
Relleno para botones pequeños (botones con clase .buttonsmall)
button-small-font-size
Tamaño de fuente para botones pequeños
button-info-background-color
Color de fondo para botones informativos (botones con clase .buttoninformative)
button-info-font-color
Color de fuente para botones informativos
button-info-border-color
Color del borde para botones informativos
button-warning-background-color
Color de fondo para botones con estilo de advertencia (botones con clase .buttonwarning)
button-warning-font-color
Color de fuente para botones con estilo de advertencia
button-warning-border-color
Color de borde para botones con estilo de advertencia
button-alert-background-color
Color de fondo para los botones de alerta (botones con clase .buttonalert)
button-alert-font-color
Color de fuente para botones de alerta
button-alert-border-color
Color del borde para los botones de alerta

Signo de interrogación

Para las utilidades, se muestra un questionMark cuando un autor agrega una descripción larga en el contenido de la Ayuda. Se utiliza el icono predeterminado que se proporciona en bootstrap. Para utilizar un icono personalizado, puede personalizar los iconos de arranque.
Clase de CSS
guideHelpQuestionMark
Variables
Descripción
questionmark-font-color
Color del icono
questionmark-hover-font-color
Color del icono cuando se pasa el ratón sobre él

Tabla

Puede cambiar el tema de color de las filas de encabezado y de trabajo en una tabla mediante las siguientes variables.
Variables
Descripción
table-header-bg-color
Color de fondo para la fila de encabezado. El valor predeterminado es #333 .
table-odd-row-bg-color
Color de fondo de la fila de trabajo impar. El valor predeterminado es rgb(255, 255, 255) .
table-even-row-bg-color
Color de fondo para la fila de trabajo par. El valor predeterminado es #eee .

Archivo adjunto

El widget de archivos adjuntos de formularios adaptables permite cargar archivos. También puede personalizar la utilidad con las variables.
Variables
Descripción
fileItemPadding
Relleno para los archivos que se muestran en la utilidad
fileItemBackground
Color de fondo del elemento de archivo
fileItemBorderColor
Color del borde superior
fileItemColor
Color de fuente del elemento de archivo
filePreviewIconColor
Color del icono Vista previa (icono de Bootstrap) en el widget
fileItemCommentHeight
Altura del comentario del elemento de archivo

Estilo del panel

Un panel incluye una barra de herramientas opcional y su contenido.
Clase de CSS
guidePanelNode
Variables
Descripción
panel-background-color
Color de fondo del panel
panel-font-size
Tamaño de fuente del texto del panel
panel-font-color
Color de fuente del texto del panel
panel-padding
Relleno dentro del panel
panel-description-font-size
Tamaño de fuente de la descripción del panel
panel-description-padding
Relleno de la descripción del panel
panel-help-bg-color
Color de fondo para la ayuda del panel
panel-help-border-indicator-color
Color del borde del indicador para la ayuda del panel
El nodo del panel se divide en navegadores y contenido. No hay un componente de estilo independiente para el contenido. Las variables descritas se aplican tanto al navegador como al contenido.
El panel superior (RootPanel) no tiene esta clase.

Estilo móvil

Header bar

Estas variables influyen en la barra de encabezado que está visible en un dispositivo móvil o en dispositivos de pantalla pequeña que contienen el título del panel y los navegadores siguiente y posterior.
Clase de CSS
guide-header-bar
Variables
Descripción
headerbar-background-color
Color de fondo de la barra de encabezado
headerbar-font-color
Color de fuente del texto dentro de la barra de encabezado
headerbar-padding
Relleno para barra de encabezado

Indicador de desplazamiento

Estas variables influyen en el indicador de desplazamiento, que es una flecha naranja que aparece en un dispositivo móvil o en dispositivos de pantalla pequeños. Un indicador de desplazamiento indica que hay contenido más allá de la parte visible de la pantalla. Puede desplazarse hacia abajo para verlo. Cuando se llega al final del contenido, la flecha desaparece.
Clase de CSS
mobileScrollIndicator
Variables
Descripción
scrollIndicatorBottom
Posición fija del indicador de desplazamiento desde la parte inferior
scrollIndicatorRight
Posición fija del indicador de desplazamiento desde la derecha
scrollIndicatorWidth
Ancho del indicador de desplazamiento
scrollIndicatorHeight
Altura del indicador de desplazamiento

Variables específicas del diseño de la barra de herramientas fijas móviles

Estas variables de la tabla siguiente influyen en el diseño de la barra de herramientas fija móvil.
Clase de CSS
mobileToolbar
Variables
Descripción
mobileToolbarBottom
Posición fija de la barra de herramientas, en dispositivos móviles, desde la parte inferior
mobileToolbarTop
Posición fija de la barra de herramientas, en dispositivos móviles, desde la parte superior
mobileToolbarLeft
Posición fija de la barra de herramientas, en el dispositivo móvil, desde la izquierda
mobileToolbarRight
Posición fija de la barra de herramientas, en dispositivos móviles, desde la derecha
mobileButtonIconTopMargin
Posición fija del icono de botones de la barra de herramientas, desde la parte superior
mobileButtonIconWidth
Anchura del icono de botones de la barra de herramientas en el dispositivo móvil
mobileButtonIconHeight
Altura del icono de botones de la barra de herramientas en el dispositivo móvil
mobilefixedtoolbarbgcolor
Color de fondo de la barra de herramientas en dispositivos móviles

Variable específica del tema

El tema de inscripción ​simple en /etc/clientlibs/fd/af/guide/simpleEnregistration y la categoría guide.theme.simpleEnrollment también presentan algunas variables. Si desea crear un tema que mejore la inscripción simple, puede utilizar las siguientes "variables adicionales":
Variables
Descripción
button-focus-bg-color
Color de fondo del botón al foco
button-hover-bg-color
Color de fondo del botón al pasar el ratón
button-radius
Radio del botón
navigation-button-bg-color
Color de fondo para los botones de navegación (atrás/siguiente)
navigation-button-bg-hover-color
Color de fondo para los botones de navegación (atrás/siguiente) al pasar el ratón
initial-nav-color
Color de fondo para los navegadores del asistente y la barra de progreso correspondiente, cuando se procesa por primera vez.
active-nav-color
Color de fondo para el navegador del asistente actual o activo y la correspondiente barra de progreso
visited-nav-color
Color de fondo para los navegadores del asistente y la barra de progreso correspondiente, que se han visitado.
tabs-bifercating-border-color
Color de borde bifurcar contenedor en navegadores y panel
tabs-navigator-separator-color
Color del borde inferior que separa las fichas de la izquierda (navegadores de fichas).
tabs-child-nav-bg-color
Color de fondo para los navegadores anidados/secundarios/secundarios del navegador