Editar CSS para temas

  • Artículo

Nota

Las hojas de estilo en cascada (CSS) le permiten controlar el formato de la página web. De forma predeterminada, los archivos bootstrap.min.css y theme.css están disponibles. Puede editar los archivos CSS existentes y cargar los nuevos archivos CSS. Cuando carga un nuevo archivo CSS, estará disponible como archivo web en la aplicación de administración de portales.

Importante

Los portales de Power Apps se basan en Bootstrap 3.3.x con la excepción del Portal de eventos. Los desarrolladores del portal no deben reemplazar Bootstrap 3 con otras bibliotecas CSS ya que algunos de los escenarios en Power Apps dependen de Bootstrap 3.3.x. Para obtener más información, consulte las secciones Descripción del marco Bootstrap y Personalizar Bootstrap de este artículo.

Abrir un CSS en el editor de código

Para abrir un CSS en el editor de código, edite el portal para abrirlo en Portales de Power Apps Studio.

  1. Seleccionar Tema Icono Tema. desde el lado izquierdo de la pantalla. Se muestran los temas disponibles.

    Tema.

  2. Seleccione la plantilla CSS requerida para abrirla en el editor de código.

  3. Edite el código y guarde los cambios.

Cargar un nuevo archivo CSS

Para cargar un nuevo archivo CSS, edite el portal para abrirlo en Portales de Power Apps Studio.

  1. Seleccionar Tema Icono Tema. desde el lado izquierdo de la pantalla. Se muestran los temas disponibles.

  2. Seleccionar Cargar CSS personalizada.

    Cargar CSS personalizada.

  3. Busque el archivo CSS, y selecciónelo para cargarlo.

Eliminar un archivo CSS personalizado

Los archivos CSS se almacenan como archivos web.

  1. Para eliminar el archivo CSS, vaya a la Aplicación Administración del portal y seleccione Archivos web.

  2. Localice el registro del archivo CSS. Es posible que deba filtrar los valores Nombre y Sitio web para localizar el registro correcto.

  3. Una vez seleccionado el registro del archivo web, seleccione Eliminar.

  4. En el estudio del portal, seleccione Sincronizar configuración para eliminar los cambios de estilo del archivo CSS personalizado.

Descripción del marco Bootstrap

Bootstrap es un marco de cliente que incluye componentes de CSS y JavaScript para elementos comunes de interfaz de aplicación web. Incluye estilos para elementos de navegación, formularios, botones y un sistema de diseño de cuadrícula dinámica, que permite que los diseños de sitios se ajusten dinámicamente a dispositivos con diferentes tamaños de pantalla, como teléfonos y tabletas. Mediante el sistema de diseño de Bootstrap, puede desarrollar un solo sitio que presente una interfaz adecuada a todos los dispositivos que los clientes pueden usar.

Las plantillas incluidas con los portales se implementan mediante los componentes de Bootstrap estándar con estilos personalizados adicionales mínimos. Por lo tanto al implementar plantillas, puede aprovechar las opciones de personalización de Bootstrap. Puede personalizar el tema (fuentes, colores, etc.) rápidamente de manera que se aplique de forma consistente a través del portal.

Personalizar Bootstrap

Bootstrap admite la personalización a través de un conjunto de variables. Puede establecer cualquiera o todas estas variables con valores personalizados, y después descargar una versión personalizada de Bootstrap que se compila en función de estos valores.

La eficacia de las variables de Bootstrap es que no dictan el estilo de un solo elemento. Todos los estilos del marco se basan y se calculan de estos valores. Por ejemplo, considere la variable @font-size-base. Especifica el tamaño que Bootstrap asigna al texto del cuerpo normal. Sin embargo, Bootstrap también usa esta variable para indicar el tamaño de fuente de los encabezados y otros elementos. El tamaño de un elemento H1 podría definirse como el 300 % del tamaño de @font-size-base. Al establecer esta variable, puede controlar la escala tipográfica completa del portal de una manera coherente. De forma similar, la variable @link-color controla el color de hipervínculos. Para el color que asigne a este valor, Bootstrap definirá el color de pasar el ratón por encima para vínculos como un 15 % más oscuro que el valor personalizado.

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 sitios de terceros para este propósito. Estos sitios pueden proporcionar una interfaz más fácil de usar 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.

Al descargar una versión personalizada de Bootstrap, contiene la siguiente estructura de directorios.

css/
    |-- bootstrap.min.css 
img/
    |-- glyphicons-halflings-white.png 
    |-- glyphicons-halflings.png 
js/ 
    |-- bootstrap.min.js

O, en función de la aplicación de personalizador utilizada, solo podría contener bootstrap.min.css. De todos modos, bootstrap.min.css. es el archivo que contiene las personalizaciones. Los demás archivos son los mismos para todas las versiones personalizadas de Bootstrap y ya están incluidas en el portal.

Consulte también

Nota

¿Puede indicarnos sus preferencias de idioma de documentación? Realice una breve encuesta. (tenga en cuenta que esta encuesta está en inglés)

La encuesta durará unos siete minutos. No se recopilan datos personales (declaración de privacidad).