CSS avanzado

Completado

Hojas de estilos CSS (CSS) es un lenguaje que determina el estilo de una página web al describir cómo se mostrarán sus elementos HTML, incluido texto, fuentes, colores, bordes de fondos y márgenes.

Hacer cambios en el estilo de las páginas de su portal puede resultar tan sencillo como aplicar instrucciones CSS directamente a una página en la columna CSS personalizada. Por ejemplo, si necesita aumentar la altura de la barra de navegación en la parte superior de una página web para que se ajuste a un logotipo, puede editar las propiedades de la página y agregar una instrucción CSS personalizada.

.navbar-static-top.navbar { min-height: 100px; }

Nota

Las instrucciones CSS que se agregan directamente a una página web solo se aplicarán a dicha página web.

Este enfoque sirve para realizar pequeños ajustes en una única página. No obstante, es preferible registrar las personalizaciones en uno o varios archivos CSS y luego aplicarlos a todo el portal o a partes de este.

Temas del portal

Los portales usan el Marco front-end de Bootstrap para controlar el diseño y la distribución del sitio web. Bootstrap es un paquete de plantillas de diseño de HTML y CSS para tipografía, formularios, navegación por botones y otros elementos, incluidas extensiones opcionales de JavaScript. Una característica atractiva de Bootstrap es que ofrece un diseño dinámico de uso inmediato: ajusta automáticamente el sitio web para que tenga una apariencia agradable en todos los dispositivos, desde teléfonos pequeños hasta equipos de escritorio grandes.

Un tema determina la apariencia de todas las páginas web del portal, para garantizar la coherencia visual. Controla la estructura de navegación, el banner, los colores y las fuentes, así como otros elementos visuales de una página web.

Las plantillas web que se incluyen en un portal de inicio se implementan utilizando componentes Bootstrap estándar con más estilos personalizados mínimos. Como resultado, puede aprovecharse de las opciones de personalización que ofrece Bootstrap para personalizar el tema de una manera que se aplica de manera coherente a todo el portal.

Aplicar personalizaciones

En los portales de Power Apps, la característica Habilitar tema básico controla cómo se aplican las personalizaciones de CSS al portal.

Temas

Si activa la característica Habilitar tema básico, podrá usar temas predeterminados llamados Preajustes. También puede crear copias de los temas predefinidos para una mayor personalización.

Captura de pantalla de la selección de temas en los portales de Studio.

Los temas crean una apariencia general para el sitio definiendo colores para distintas áreas.

Si el sitio requiere otras personalizaciones, la característica Editar CSS se puede usar. Está disponible independientemente de si el tema básico está habilitado.

Editar CSS

Cuando la característica Habilitar tema básico está desactivada, solo puede aplicar personalizaciones editando los archivos CSS existente o agregando nuevos.

Cualquier portal de inicio tiene muchos archivos que ya están incluidos como archivos web secundarios de la página web bootstrap.min.css y theme.css. Estos archivos definen los estilos y un tema predeterminados de todo el portal. Se pueden cargar y editar más hojas de estilo. Para obtener más información, consulte Editar CSS.

Captura de pantalla de las opciones de edición de temas del cinturón de herramientas para el código de CSS

Debe considerar cómo abordar las modificaciones de estilo para su portal:

  • Cree un estilo completo para todo el sitio y luego reemplace el contenido del archivo CSS. Este proceso funciona bien si tiene acceso a buenos diseñadores que pueden asegurarse de que todos los elementos relevantes estén definidos. Este enfoque crea un estilo controlado centralmente y garantiza la coherencia en todo el portal.
  • Redefina solo los elementos que requieran modificaciones, por ejemplo, colores y tamaño de fuente. Crea y suba el archivo CSS que contiene solo estos ajustes incrementales. Este proceso bien si su diseño de destino es parecido al diseño del portal de inicio y solo se requieren modificaciones de estilo menores. Este enfoque permite modificaciones incrementales que se pueden deshacer fácilmente.

Advertencia

Si decide sobrescribir los archivos bootstrap.min.css o theme.css, asegúrese de descargar una copia de seguridad de estos archivos antes de sustituirlos. Si su CSS de sustitución no es válido o está incompleto, es posible que no pueda deshacer la sustitución y tendrá que restaurar el contenido de estos archivos si el portal deja de funcionar.

Aplicar personalizaciones a áreas específicas del portal

Puede agregar personalizaciones a páginas o secciones específicas de su portal agregando un registro de archivo web utilizando la aplicación Administración de portal con un archivo adjunto CSS a un archivo CSS. Deberá especificar la página principal en los registros del archivo web para que el tema se aplique a la página principal y a todas sus derivadas. Este enfoque hace posible que pueda crear secciones totalmente personalizadas de su sitio.

Captura de pantalla de la columna Página principal del registro del archivo web.

Importante

La dirección URL parcial debe terminar en .css para que el portal la reconozca y la aplique a la página web y a sus páginas secundarias.

Personalizar Bootstrap

La forma estándar de crear una versión personalizada de Bootstrap es a través del sitio oficial de Bootstrap. Sin embargo, debido a la popularidad de Bootstrap, también se han creado muchos otros sitios para este propósito. Estos sitios pueden proporcionar una interfaz intuitiva para la personalización de Bootstrap o versiones prediseñadas de Bootstrap que puede descargar. El sitio de Personalización oficial de Bootstrap tiene más información sobre la personalización de Bootstrap.

Sugerencia

Cuando personalice Bootstrap, seleccione únicamente elementos que requieran modificación. Por ejemplo, si desea sustituir las fuentes estándar con las fuentes estándar corporativas, seleccione el componente Tipografía de Bootstrap. Este enfoque ayudará a reducir las posibilidades de sobrescribir accidentalmente otros elementos CSS.

Una vez que haya personalizado Bootstrap, generará uno o más archivos que podría interesarle subir como archivos web. A menos que su intención sea la de sustituir completamente los estilos originales, asegúrese de evitar usar archivos bootstrap.css, bootstrap.min.css, theme.css o theme.min.css en sus direcciones URL parciales, debido a la forma en que el portal maneja múltiples archivos CSS.

Imágenes de fondo

Cuando inicie las personalizaciones del portal, una de las solicitudes más comunes que puede que tenga es sustituir las imágenes de fondo. Estas imágenes se aplican usando CSS, pero se puede sustituir sin cambiar el CSS. Busque archivos web .jpg en la página de inicio del portal, por ejemplo homehero.jpg. Su único requisito es sustituir los anexos de estos archivos web con sus propias imágenes. Asegúrese de que el tamaño de las nuevas imágenes sea compatible, para mantener un diseño coherente.

CSS para ajustes sencillos

El CSS se omite a menudo cuando se requieren ajustes sencillos, como ocultar un elemento o ajustar los márgenes para dejar sitio a una etiqueta ancha. El marco Bootstrap es la base del diseño en los portales de Power Apps y define muchos estilos que controlan el aspecto y el diseño dinámico con varias columnas. Por ejemplo, si desea ocultar una determinada columna y enviar un valor predeterminado, en lugar de recoger la entrada del usuario, puede usar metadatos de formulario de tabla para la columna y definir los siguientes parámetros:

  • Establezca Etiqueta en un único espacio.
  • Establezca la clase CSS en hide.
  • Establezca el valor predeterminado según sea necesario.

Captura de pantalla de las columnas de metadatos del formulario de nueva tabla con Etiqueta, Clase CSS y Establecer valor al guardar.

En lugar de acudir a JavaScript, puede llevar a cabo esta tarea utilizando solo la configuración. El uso de CSS, cuando sea posible, ofrece ciertas ventajas:

  • CSS se aplica durante la carga; es más rápido porque no tiene que esperar a que el documento termine de cargarse.
  • El CSS siempre está activado y continúa aplicándose a los elementos relevantes, incluso si JavaScript cambia la estructura del documento y agrega o elimina los elementos.
  • Para ciertas tareas relacionadas con la visibilidad de un elemento y el diseño dinámico, CSS puede resultar mucho más sencillo de usar que JavaScript, lo que se traduce en menos mantenimiento y margen de error.