Temas del portal

Completado

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 de hojas de estilo en cascada (CSS) para tipografía, formularios, botones, navegación y otros elementos, además de extensiones opcionales de JavaScript. Una de las muchas funciones atractivas de Bootstrap es que ofrece un diseño dinámico de uso inmediato: ajusta automáticamente el sitio web para que tenga una apariencia estética agradable en todos los dispositivos, desde teléfonos pequeños hasta equipos de escritorio grandes.

Aspectos básicos del tema

Un tema determina la apariencia de todas las páginas web del portal, para garantizar la coherencia visual. El tema 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 estilos personalizados adicionales mínimos. En consecuencia, el portal de inicio puede aprovecharse las opciones de personalización que ofrece Bootstrap; el tema se puede personalizar de una manera que se aplica de manera coherente a todo el portal.

CSS en páginas web

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 en particular para que se ajuste a un logotipo, basta con editar la página y luego agregar una instrucción CSS personalizada.

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

Nota

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

Este proceso 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.

Aplicar personalizaciones

Puede aplicar personalizaciones agregando un archivo web que contenga CSS a su sitio. La CSS contenida en el archivo web se aplica a la página principal del archivo y a todas sus derivadas, lo que le permite crear secciones completamente personalizadas de su sitio.

Por ejemplo, si desea aplicar un estilo diferente a su sección de Noticias y a todos los artículos nuevos debajo de esta, vaya a Noticias, cree un archivo web secundario con una extensión .css, suba su archivo CSS (el nombre no importa) y el estilo se aplicará a la sección Noticias y solo a su contenido.

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.

Cualquier portal de inicio tiene dos 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. Las hojas de estilo adicionales se pueden cargar y editar en los portales de Studio usando la sección Temas del cinturón de herramientas.

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 archivo CSS de sustitución no es válido o está incompleto, no podrá deshacer dicha sustitución. Tendrá que restaurar el contenido de estos archivos, posiblemente utilizando una aplicación de portales de Power Apps, si el portal deja de funcionar.

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 de origen para este propósito. Estos sitios pueden proporcionar una interfaz más intuitiva para la personalización de Bootstrap o versiones prediseñadas de Bootstrap que puede descargar. El sitio de personalización de Bootstrap oficial tiene más información sobre la personalización de Bootstrap.

Sugerencia

Cuando personalice Bootstrap, seleccione únicamente elementos que requieran modificaciones. Por ejemplo, si solo desea sustituir las fuentes con las fuentes estándar corporativas, seleccione Componentes de tipografía de Bootstrap, lo que reducirá las posibilidades de sobrescribir accidentalmente otros elementos CSS.

Una vez que haya configurado 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 no usar bootstrap.css, bootstrap.min.css, theme.css ni 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 las personas inician las personalizaciones del portal, una de las solicitudes más comunes es que tienen que sustituir las imágenes de fondo. Estas imágenes se aplican usando CSS, pero se puede sustituir fácilmente sin cambiar el CSS. Busque archivos web .jpg en la página de Inicio del portal, por ejemplo forumhero.jpg. Sustituya los anexos de estos archivos web con sus propias imágenes y ese proceso es lo único que hay que hacer. Asegúrese de que el tamaño de las nuevas imágenes sea compatible, para mantener un diseño coherente.