Conocimiento de CSS y del marco LESS.
El artículo lista clases css de formularios adaptables disponibles al público. 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 editor de temas.
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:
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:
Actualmente, las variables LESS se definen solo para estas propiedades de los distintos elementos de un formulario adaptable.
Puede realizar cambios en el aspecto, el diseño, la posición y la visibilidad de los elementos. Para lograr esta tarea, cree o actualice los archivos .css personalizados para incluir las construcciones de estilo enumeradas 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.
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.
Un contenedor es el componente de nivel superior. Otros paneles y campos se encuentran debajo del componente contenedor.
Clase de CSS |
|
Descripción de las variables |
Descripción de las variables |
|
Color de fondo del contenedor |
|
Relleno para el contenedor |
|
Margen del contenedor |
|
Color de fuente del contenedor |
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 |
|
Variables |
Descripción |
|
Relleno para el campo |
|
Color de fuente del mensaje de error del campo |
|
Tamaño de fuente del mensaje de error del campo |
El elemento HTML label utilizado para el campo incluye las clases left o top según si la etiqueta está en la parte superior o en la izquierda.
Clase de CSS |
|
Variables |
Descripción |
|
Color de fuente de la etiqueta de campo |
|
Tamaño de fuente de la etiqueta de campo |
|
Propiedad de altura de línea CSS para la etiqueta de campo |
|
Propiedad de peso de fuente CSS para la etiqueta de campo |
|
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.
Según el tipo, las utilidades también incluyen clases. Normalmente, los widgets incluyen la clase guideFieldWidget
. 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 |
|
Variables |
Descripción |
|
Color de fondo para los widgets (no funciona para la casilla de verificación y el botón de radio) |
|
Color del borde de los widgets |
|
Tamaño del borde de los widgets |
|
Radio del borde de los widgets |
|
Tipo de borde de los widgets |
|
Tipo de enfoque para bordes de widget |
|
Estilo de borde consolidado de widgets |
|
Color del texto dentro del widget |
|
Tamaño del texto dentro del widget |
|
Propiedad de lineheight CSS para la utilidad |
|
Propiedad de relleno CSS para la utilidad |
|
Color del borde cuando el widget está en foco |
|
Color de borde del widget para los campos obligatorios |
|
Color de fondo del widget para los campos obligatorios |
|
Color de fondo del widget cuando el campo está desactivado |
|
Color de fuente del widget cuando el campo está desactivado |
|
Color de borde del widget cuando el campo está desactivado |
|
Altura del widget (no funciona con la casilla de verificación y el botón de radio) |
|
Altura de la casilla de verificación y del botón de radio. |
|
Altura máxima de un menú desplegable de selección múltiple |
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.
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 |
|
Color de fondo de la ayuda larga de los widgets |
|
Color del borde de la ayuda larga de los widgets |
|
Color del borde del indicador izquierdo de la Ayuda larga de los widgets |
|
Color de fondo de la breve ayuda de los widgets |
|
Color de fuente de la breve ayuda de los widgets |
|
Color de fondo de la ayuda de información de objeto breve de los widgets |
|
Color de fuente de la ayuda de información de objeto corta de los widgets |
La utilidad Términos y condiciones (TnC
) permite especificar términos y condiciones. Puede personalizar la utilidad con 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. |
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:
Código HTML para el botón:
<button type="button" >
<span class="iconButtonicon"></
span>
<span class="iconButtonlabel"></
span>
</button>
Clase de CSS |
Descripción |
|
Proporciona iconos para el botón |
|
Etiqueta/rótulo del botón Estilos |
Variables |
Descripción |
|
Tamaño del borde de los botones |
|
Tipo de borde |
|
Propiedad de relleno CSS para el botón |
|
Tamaño de fuente del botón |
|
Color de fondo del botón |
|
Color de fuente del botón |
|
Color del borde del botón |
|
Relleno para botones grandes (botones con clase .buttonlarge) |
|
Tamaño de fuente para botones grandes |
|
Relleno para botones pequeños (botones con clase .buttonsmall) |
|
Tamaño de fuente para botones pequeños |
|
Color de fondo para botones informativos (botones con clase .buttoninformative) |
|
Color de fuente para botones informativos |
|
Color del borde para botones informativos |
|
Color de fondo para botones con estilo de advertencia (botones con clase .buttonwarning) |
|
Color de fuente para botones con estilo de advertencia |
|
Color de borde para botones con estilo de advertencia |
|
Color de fondo para los botones de alerta (botones con clase .buttonalert) |
|
Color de fuente para botones de alerta |
|
Color del borde para los botones de alerta |
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 |
|
Variables |
Descripción |
|
Color del icono |
|
Color del icono cuando se pasa el ratón sobre él |
Puede cambiar el tema de color de las filas de encabezado y de trabajo en una tabla mediante las siguientes variables.
Variables |
Descripción |
|
Color de fondo para la fila de encabezado. El valor predeterminado es |
|
Color de fondo de la fila de trabajo impar. El valor predeterminado es |
|
Color de fondo para la fila de trabajo par. El valor predeterminado es |
El widget de archivos adjuntos de formularios adaptables permite cargar archivos. También puede personalizar la utilidad con las variables.
Variables |
Descripción |
|
Relleno para los archivos que se muestran en la utilidad |
|
Color de fondo del elemento de archivo |
|
Color del borde superior |
|
Color de fuente del elemento de archivo |
|
Color del icono de Previsualización (icono de Bootstrap) del widget |
|
Altura del comentario del elemento de archivo |
Existen cuatro tipos de fichas del navegador. Estas incluyen fichas a la izquierda, arriba, en el asistente y acordeón. Cada navegador tiene una clase diferente.
Navegador |
Clase de CSS |
|
.acordion-navigators |
|
.tab-navigators-vertical |
|
.tab-navigators |
|
.Wizard-navigators |
El siguiente es el código HTML del elemento de navegador de fichas (similar a las fichas de arranque):
<li>
<a>tab title</a>
</li>
Accordion navigator is an exception, it has following barebone
structure:
<div class="accordion.navigators">
<div>
<div class = "guideHeader">
<a>
<span class = "guideSummary" ></code>
........................... repeatable buttons, if the repeatable configuration is set ................................
<div class = "repeatableButtons">
`<button name=“Add” class=“Add”/%3E%60%60%3Cbutton%20name=?lang=es"Remove" class=“Remove”/%3E%60%60%3C/div%3E%60%60%3C/a%3E%60%60%3C/div%3E%60%60…%20panel%20content%20…%60%60%3C/div%3E%60%60%3C/div%3E%60Puede%20cambiar%20el%20estilo%20del%20navegador%20mediante%20reglas%20CSS%20que%20seleccionan%20los%20elementos%20mediante%20selectores%20descendant.%20Por%20ejemplo,%20para%20agregar%20un%20estilo%20de%20decoraci%C3%B3n%20de%20texto%20a%20la%20etiqueta%20de%20anclaje:Navegador%20de%20fichas%20en%20la%20parte%20superior:%60.tab-navigators%60%60li%20a%20%7B%60%60text-decoration:%60%60underline%CD%BE%60%60%7D%60%60Tab%20navigator%20on%20left:%60%60.tab-navigators-vertical%60%60li%20a%20%7B%60%60text-decoration:%60%60underline%CD%BE%60%60%7D%60%60Accordion%20navigator:%60%60.accordion-navigators%20.guideHeader%20a%20.guideSummary%20%7B%60%60text-decoration:%60%60underline%CD%BE%60%60%7D%60%60Wizard%20navigator:%60%60.wizard-navigators%60%60li%20a%20%7B%60%60text-decoration:%60%60underline%CD%BE%60%60%7D%60Adem%C3%A1s,%20hay%20clases%20para%20aplicar%20estilo%20a%20los%20navegadores%20de%20fichas%20(tanto%20a%20la%20izquierda%20como%20a%20la%20parte%20superior?lang=es) en función de si tienen navegadores anidados/secundarios/secundarios.
Clase de CSS |
Descripción |
|
Navegadores de fichas (izquierda y arriba) que tienen navegadores anidados/secundarios/secundarios |
|
Navegadores de fichas (izquierda y arriba) que no tienen navegadores anidados/secundarios/secundarios |
La clase guideNavIcon proporciona un icono predeterminado para los navegadores de tabuladores (tanto izquierdos como superiores) y los navegadores de asistente.
Clase de CSS |
|
Puede cambiar el icono de un navegador concreto proporcionando una clase CSS en el panel de creación, como por ejemplo <CLASS_NAME>. Agregue un <CLASS_NAME>_nav para el icono del navegador.
Variables |
Descripción |
Navegadores de fichas |
|
|
Color de fondo para todo el navegador de fichas |
|
Color de fondo de la ficha |
|
Color de fuente de la ficha |
|
Color de fondo de la ficha al pasar el ratón |
|
Color de fuente de la ficha al pasar el ratón |
|
Color de fondo cuando el panel está enfocado (activo) |
|
Color de fuente cuando el panel está enfocado |
|
Color de fondo cuando la expresión de finalización del panel devuelve verdadero |
|
Color de fuente cuando la expresión de finalización del panel devuelve verdadero |
|
Color de fondo cuando el panel ha estado seleccionado una vez pero la expresión de finalización devuelve false |
|
Color de fuente cuando el panel ha estado seleccionado una vez pero la expresión de finalización devuelve false |
|
Color del borde de la ficha |
|
Tamaño de fuente de la ficha |
|
Relleno para la ficha |
|
Margen de la ficha |
|
Margen de las fichas verticales |
|
Tamaño del borde de las fichas |
|
Altura mínima de las fichas |
|
Sangría para las fichas anidadas |
Navegadores de asistente |
|
|
Color de fondo para todo el navegador del asistente |
|
Color de fondo del asistente |
|
Color de fuente para el asistente |
|
Color de fondo cuando el panel está enfocado (activo) |
|
Color de fuente cuando el panel está enfocado (centrado) |
|
Color de fondo cuando la expresión de finalización del panel devuelve verdadero |
|
Color de fuente cuando la expresión de finalización del panel devuelve verdadero |
|
Color de fondo cuando el panel ha estado seleccionado una vez pero la expresión de finalización devuelve false |
|
Color de fuente cuando el panel se ha seleccionado una vez pero la expresión de finalización devuelve false |
|
Color del asistente |
|
Tamaño de fuente para el asistente |
|
Relleno para el asistente |
|
Tamaño del borde del asistente |
|
Color del borde de la viñeta del navegador del asistente (anteponer el rótulo o la etiqueta) |
|
Color de fondo de la barra de progreso del navegador del asistente |
|
Color de relleno de la barra de progreso |
Exploradores de acordeón |
|
|
Relleno para acordeón |
Un panel incluye una barra de herramientas opcional y su contenido.
Clase de CSS |
|
Variables |
Descripción |
|
Color de fondo del panel |
|
Tamaño de fuente del texto del panel |
|
Color de fuente del texto del panel |
|
Relleno dentro del panel |
|
Tamaño de fuente de la descripción del panel |
|
Relleno de la descripción del panel |
|
Color de fondo para la ayuda del panel |
|
Color del borde del indicador para la ayuda del panel |
El nodo del panel se divide en navegadores y contenido. No existe
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.
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 |
|
Variables |
Descripción |
|
Color de fondo de la barra de encabezado |
|
Color de fuente del texto dentro de la barra de encabezado |
|
Relleno para barra de encabezado |
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 |
|
Variables |
Descripción |
|
Posición fija del indicador de desplazamiento desde la parte inferior |
|
Posición fija del indicador de desplazamiento desde la derecha |
|
Ancho del indicador de desplazamiento |
|
Altura del indicador de desplazamiento |
Estas variables de la tabla siguiente influyen en el diseño de la barra de herramientas fija móvil.
Clase de CSS |
|
Variables |
Descripción |
|
Posición fija de la barra de herramientas, en dispositivos móviles, desde la parte inferior |
|
Posición fija de la barra de herramientas, en dispositivos móviles, desde la parte superior |
|
Posición fija de la barra de herramientas, en el dispositivo móvil, desde la izquierda |
|
Posición fija de la barra de herramientas, en dispositivos móviles, desde la derecha |
|
Posición fija del icono de botones de la barra de herramientas, desde la parte superior |
|
Anchura del icono de botones de la barra de herramientas en el dispositivo móvil |
|
Altura del icono de botones de la barra de herramientas en el dispositivo móvil |
|
Color de fondo de la barra de herramientas en dispositivos móviles |
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 |
|
Color de fondo del botón al foco |
|
Color de fondo del botón al pasar el ratón |
|
Radio del botón |
|
Color de fondo para los botones de navegación (atrás/siguiente) |
|
Color de fondo para los botones de navegación (atrás/siguiente) al pasar el ratón |
|
Color de fondo para los navegadores del asistente y la barra de progreso correspondiente, cuando se procesa por primera vez. |
|
Color de fondo para el navegador del asistente actual o activo y la correspondiente barra de progreso |
|
Color de fondo para los navegadores del asistente y la barra de progreso correspondiente, que se han visitado. |
|
Contenedor de bifurcación de color de borde en navegadores y panel |
|
Color del borde inferior que separa las fichas de la izquierda (navegadores de fichas). |
|
Color de fondo para los navegadores anidados/secundarios/secundarios del navegador |