|
Consideraciones •Este artículo está diseñado específicamente para personas que entienden CSS y HTML. •Recomendamos encarecidamente usar Google Chrome para facilitar las diferentes tareas relacionadas con esta funcionalidad. •Tenga en cuenta que en esta guía vamos a usar Visual Studio Code para crear los archivos .css y .js, pero usted es libre de usar la herramienta que prefiera. |
Si desea encontrar los IDs específicos de los elementos que quiere personalizar, consulte el artículo Encontrar IDs en el Inspector.
Introducción
Es el archivo CSS utilizado para redefinir o extender los estilos visuales predeterminados aplicados a los controles de Bizagi. Incluye selectores específicos para controles de texto, controles numéricos, selectores de fecha, combos, botones, grids y otros elementos utilizados en las formas (forms) de su aplicación. Estos selectores pueden modificarse para adaptar la interfaz a los requisitos visuales o funcionales de su aplicación.
Cuando modifica el selector body en el archivo CSS de personalización de apps, está aplicando estilos globales a toda la interfaz. El selector body define las propiedades visuales base de toda la página, por lo que cualquier cambio realizado aquí afecta todas las pantallas y controles, a menos que otra regla CSS más específica lo sobrescriba.
Estos son los elementos que puede modificar en su aplicación:
•Body
•Text
oTitle
oSubtitle
oParagraph
•Media
oImage
•Buttons
oText Button
oIcon Button
oLink
•Collections
oData table
oCard Link
oList collection
oCollections
oSmall card
•Experience Elements
oScorecards
•Embeds
oEmbed a website
oHTML iFrame
Body
Color global del texto
Los controles, etiquetas y texto en general heredan este color a menos que definan uno propio.
Ejemplo
Este ejemplo cambia el color de todo el texto predeterminado en la página de apps.
body {
color: red;
}
Color de fondo o imagen de fondo
Esto define el fondo general de la página.
Ejemplos
Ejemplo de color de fondo:
body {
background-color: purple;
}
Ejemplo de imagen de fondo:
body {
background-image: url("../images/app-background.png");
background-size: cover;
background-repeat: no-repeat;
}
Estilos de fuente predeterminados
La familia, tamaño y peso de fuente aplicados aquí sirven como base para todos los elementos.
Ejemplo:
body {
font-family: "Segoe UI", sans-serif;
font-size: 15px;
}
Espaciado de la página
Modificar margin o padding ajusta la posición general del contenido.
Ejemplos
Quitar el espaciado del navegador:
body {
margin: 0;
padding: 0;
}
Agregar espaciado personalizado:
body {
padding: 20px;
}
Comportamiento del diseño
Propiedades como display, flex o line-height influyen en la estructura principal de la página.
En resumen, actualizar el selector body cambia la base visual global de la interfaz de apps, afectando todas las pantallas y elementos salvo que otra regla más específica lo modifique.
Text
Personalización de títulos <h1>
h1 {
font-size: 28px;
font-weight: 700;
color: #003366;
margin-bottom: 12px;
}
Personalización de títulos <h2>
h2 {
font-size: 22px;
font-weight: 600;
color: #005599;
margin-top: 20px;
margin-bottom: 10px;
}
Personalización de párrafos <p>
p {
font-size: 15px;
color: #333333;
line-height: 1.6;
text-align: justify;
margin-bottom: 14px;
}
Media
Este ejemplo demuestra cómo puede aplicar múltiples mejoras visuales a los elementos de imagen utilizando una única regla CSS. Al estilizar directamente el selector img, puede ajustar la apariencia global de todas las imágenes en su app de Bizagi. La regla combina varias modificaciones comunes, incluidas el cambio de tamaño, bordes redondeados, bordes visibles, sombras, ajustes de opacidad y un efecto hover. Estas propiedades combinadas ayudan a crear una apariencia coherente y refinada para las imágenes en toda su aplicación, mejorando tanto la estética como la usabilidad.
img {
/* Size and responsiveness */
width: 200px;
max-width: 100%;
height: auto;
/* Shape and style */
border-radius: 16px; /* rounded corners */
border: 2px solid #0047ab; /* blue border */
/* Visual enhancements */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); /* shadow */
opacity: 0.9; /* slight transparency */
/* Smooth transitions */
transition: transform 0.2s ease, opacity 0.2s ease;
}
/* Hover effect */
img:hover {
transform: scale(1.05);
opacity: 1;
}
Buttons
Este ejemplo ilustra cómo mejorar la apariencia y la interactividad de los botones utilizando CSS. Al aplicar estilos directamente al selector button, puede asegurar una apariencia coherente en todos los botones de su app de Bizagi. La siguiente regla aplica un estilo moderno con esquinas redondeadas, colores personalizados, espaciado interno, transiciones suaves y efectos hover para mejorar la apariencia visual y la usabilidad.
button {
/* Structure and size */
padding: 10px 18px;
font-size: 15px;
font-weight: 600;
/* Colors and appearance */
background-color: #0074d9; /* bright blue */
color: white;
border: none;
border-radius: 8px;
/* Visual enhancements */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
/* Cursor and transitions */
cursor: pointer;
transition: background-color 0.2s ease, transform 0.2s ease;
}
/* Hover effect */
button:hover {
background-color: #0059a8; /* darker blue */
transform: translateY(-2px);
}
Collections
Este ejemplo muestra cómo puede aplicar estilos a los controles de colección (grillas o grillas agrupadas) para mejorar la legibilidad y la usabilidad. Las reglas siguientes personalizan los encabezados, las filas, la alineación del texto, los bordes y los colores de fondo utilizados para las filas alternas. Estos cambios ayudan a los usuarios a interpretar la información más rápidamente y mejoran la jerarquía visual.
/* Header styling */
.bzg-form-grid th,
.bzg-form-groupedgrid th {
background-color: #003366; /* dark blue */
color: white;
font-weight: 600;
padding: 10px;
text-align: left;
}
/* Row styling */
.bzg-form-grid td,
.bzg-form-groupedgrid td {
padding: 8px 12px;
border-bottom: 1px solid #dddddd;
color: #333333;
}
/* Alternating row color */
.bzg-form-grid tr:nth-child(even),
.bzg-form-groupedgrid tr:nth-child(even) {
background-color: #f5f8fc; /* light blue tint */
}
/* Hover effect for rows */
.bzg-form-grid tr:hover,
.bzg-form-groupedgrid tr:hover {
background-color: #e4eef7;
}
Experience Elements
Los elementos de experiencia, como tarjetas, contenedores y secciones, pueden beneficiarse de un estilo sutil para crear separación visual, profundidad y organización. El siguiente ejemplo aplica espaciado interno, bordes redondeados, color de fondo, sombras y un espaciado consistente para mejorar la presentación y la legibilidad.
.experience-card,
.experience-container,
.experience-section {
/* Layout and spacing */
padding: 16px;
margin-bottom: 20px;
/* Appearance */
background-color: #ffffff;
border-radius: 12px;
border: 1px solid #dddddd;
/* Elevation */
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}
/* Optional title styling inside elements */
.experience-card h2,
.experience-section h2 {
font-size: 20px;
color: #003366;
margin-bottom: 10px;
}
Embeds
El contenido incrustado —como videos, páginas externas, mapas o iFrames— puede volverse más atractivo visualmente y más adaptable usando reglas CSS que controlan el tamaño, los bordes, el espaciado y la relación de aspecto. El siguiente ejemplo ofrece un marco de contenido incrustado limpio, que se ajusta correctamente y se integra bien con los componentes que lo rodean.
iframe,
.embed-container {
/* Size and responsiveness */
width: 100%;
max-width: 100%;
height: 400px;
/* Appearance */
border: none;
border-radius: 12px;
overflow: hidden;
/* Visual enhancements */
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
background-color: #ffffff;
}
/* Optional hover effect */
iframe:hover,
.embed-container:hover {
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
|
Recuerde que para ciertos elementos es necesario usar los IDs específicos de los elementos que quiere personalizar, consulte el artículo Encontrar IDs en el Inspector si tiene alguna duda. |
|
Tenga en cuenta que no necesita republicar una app para ver los cambios realizados usando esta funcionalidad. Una vez que el archivo es cargado, la app mostrará automáticamente las personalizaciones. |
Last Updated 12/9/2025 9:48:54 AM