Este documento analiza los componentes utilizados para crear temas de Canvas personalizados para una institución.
El Editor de Temas permite a los administradores crear temas de Canvas personalizados para su institución usando colores e imágenes. Sin embargo, las imágenes, logotipos y marcas de agua no aparecen para los usuarios que activan la función de usuario "Estilos de Alto Contraste". Para obtener ayuda específica con archivos de imagen, consulteDocumento de recursos sobre plantillas de imágenes del editor de temas de Canvas.
También se pueden cargar archivos CSS y JavaScript de anulación en el Editor de temas para la vista HTML y la vista de la aplicación Canvas, respectivamente. Sin embargo, tenga en cuenta que los archivos personalizados pueden sobrescribir cualquier color compatible con estilos de alto contraste; por ejemplo, cambiar el color de un enlace a rojo en un archivo CSS personalizado también se mostrará en rojo para los usuarios con estilos de alto contraste, lo que puede generar problemas de accesibilidad. Como se indica en la ventana de carga del Editor de temas, usar archivos CSS/JS personalizados es una opción, pero significa que usted es responsable de mantener cualquier código que cree un conflicto con lo que Canvas admite en el Editor de temas.
A menos que se indique lo contrario, los siguientes componentes del Editor de Temas se aplican a la versión web de Canvas. Algunos componentes de Marca Global y Navegación Global también se aplican a las aplicaciones móviles de Canvas.
Marca global
Color principal de la marcaColor principal utilizado en Canvas, que se muestra principalmente en los enlaces de navegación del curso y en el icono de alternancia del Panel. Se utiliza en las apps Canvas para Estudiantes y Canvas para Profesores para los colores de Navegación Global, Bandeja de Entrada y selección de cursos. El valor predeterminado es #008ee2.
Color del texto principalColor del texto utilizado en Canvas. Se utiliza al introducir texto en la página de inicio de sesión de las apps Canvas Estudiante, Canvas Profesor y Canvas Padre. El valor predeterminado es #2d3b45.
Color del enlaceColor para los hipervínculos utilizados en Canvas. Se utiliza para iconos de enlaces externos y de descarga. También se muestra en el enlace "¿Olvidó su contraseña?" de la página de inicio de sesión móvil. El valor predeterminado es #008ee2.
Botón principal:Color para los botones principales en Canvas;Si no se define un color, el botón principal asume el color principal. Se utiliza para personalizar botones y enlaces en las apps Canvas para estudiantes y profesores. También se utiliza para el color del botón de inicio de sesión en las apps Canvas para estudiantes, profesores y padres.
Texto del botón principalColor del texto que se muestra en los botones principales. Se utiliza para el texto del botón de inicio de sesión en las apps Canvas Student, Canvas Teacher y Canvas Parent. El valor predeterminado es #ffffff.
Botón secundario:Color para los botones secundarios en Canvas.El valor predeterminado es #2d3b45.Este componente no se utiliza actualmente en la interfaz de Canvas.
Texto del botón secundarioColor del texto que se muestra en los botones secundarios. El valor predeterminado es #ffffff.Este componente no se utiliza actualmente en la interfaz de Canvas.
Navegación global
Fondo de navegaciónColor de fondo del Menú de Navegación Global. También se utiliza para colorear el fondo de la barra de direcciones en los navegadores web. El valor predeterminado es #394b58.
Icono de navegaciónColor de los iconos del Menú de Navegación Global. También se usa para colorear los iconos de Visibilidad y Configuración en SpeedGrader. El valor predeterminado es #ffffff.
Icono de navegación activoColor del icono activo (seleccionado) en el Menú de Navegación Global. Si no se define ningún color, el icono activo de navegación adopta el color principal.
Texto de navegaciónColor del texto del Menú de Navegación Global. También se usa para colorear el texto de la barra de navegación superior en las apps Canvas para Estudiantes y Canvas para Profesores. Además, el Texto de Navegación se usa para colorear el icono del Libro de Calificaciones en SpeedGrader. El valor predeterminado es #ffffff.
Texto de navegación activoColor del texto activo en el Menú de Navegación Global. Si no se establece ningún color, el texto activo de navegación asume el color del enlace.
Borde de avatar de navegaciónColor del borde del icono del enlace de la cuenta. El valor predeterminado es #ffffff.
Insignia de navegación:Color usado para la insignia de mensaje no leído en el icono de la Bandeja de entrada. Si no se establece ningún color, la Insignia de Navegación asume el color principal.
Insignia de navegación activaColor de la insignia activa (seleccionada) en el Menú de Navegación Global. Si no se establece ningún color, la Insignia de Navegación Activa asume el Color Principal.
Texto de la insignia de navegaciónColor del número en la insignia de mensajes no leídos del icono de la Bandeja de entrada. Si no se establece ningún color, la Insignia de Navegación asume el color principal.
Texto de insignia de navegación activoColor del texto activo en el Menú de Navegación Global. Si no se establece ningún color, el texto activo de la insignia de navegación asume el color del enlace.
Fondo del logotipo de navegaciónColor de fondo del logotipo en el Menú de Navegación Global. El valor predeterminado es #394b58.
Logotipo de navegaciónLogotipo en la parte superior del menú de navegación global (compatible con archivos SVG, PNG y JPG). También se usa como logotipo en la barra de navegación superior de las apps Canvas para estudiantes y Canvas para profesores en dispositivos iOS. El logotipo de Canvas aparece por defecto.
Marcas de agua y otras imágenes
FiligranaImagen de fondo clara que aparece detrás del contenido de la página. El tamaño de visualización depende del tamaño del archivo subido. Si la imagen es demasiado pequeña o demasiado grande para su diseño, ajuste el tamaño según sus preferencias (compatible con archivos png, svg, gif y jpg). La opción predeterminada es sin imagen.
Opacidad de la marca de agua:Opacidad (transparencia) de la marca de agua. El valor predeterminado es 100 % (sin transparencia de imagen).
Favicon: Ícono pequeño que se muestra en la pestaña del navegador (compatible con archivos ico de 16x16, 32x32 y 48x48). El favicon predeterminado es Canvas.
Icono de la pantalla de inicio móvil: Ícono que se muestra al marcar Canvas como favorito desde un navegador en un dispositivo móvil (admite archivos PNG de 180x180). El valor predeterminado es el ícono táctil de Apple.
Los usuarios de versiones más recientes de Windows (8+) pueden anclar sitios y aplicaciones a la pantalla de inicio de sus teléfonos Windows. Los campos de Windows son opcionales, pero permiten ofrecer opciones de personalización a los usuarios de teléfonos Windows. Sin embargo, los mosaicos de Windows siguen mostrando el favicono configurado en el Editor de temas, si lo hay.
Color de mosaico de Windows: Color para el mosaico de Windows. Si no se establece ningún color, el color del mosaico de Windows asume el color primario.
Imagen de mosaico de Windows cuadrada:Imagen para la versión cuadrada del mosaico de Windows (admite 1,8 veces el tamaño de mosaico estándar (archivos svg, png, jpg, gif de 558 x 558). El valor predeterminado es la imagen del mosaico de Windows.
Imagen de mosaico de Windows anchaImagen para la versión ancha del mosaico de Windows (compatible con archivos SVG, PNG, JPG y GIF de 558x270). La imagen predeterminada es el mosaico de Windows.
Logotipo de la barra lateral derechaEl logotipo se muestra sobre la barra lateral derecha del Panel de Canvas, pero al visualizarlo en tabletas o navegadores con resoluciones de pantalla más bajas, no es visible debido a limitaciones de espacio. El tamaño de visualización depende del tamaño del archivo subido, pero el tamaño de imagen preferido es 360x140 (compatible con SVG, PNG, JPG y GIF). La opción predeterminada es sin imagen.
Pantalla de inicio de sesión
La página de inicio de sesión móvil no es compatible actualmente con los componentes de la pantalla de inicio de sesión, pero sí con la personalización de marca de los componentes de marca global. Tenga en cuenta que los enlaces de inicio de sesión único heredan la configuración del Editor de temas.
Color de fondo:Color del fondo de inicio de sesión. El valor predeterminado es #394b58.
Imagen de fondo:Imagen para el fondo de inicio de sesión. Por defecto, no hay imagen.
Sombra corporal:Color para la sombra del cuerpo. El valor predeterminado es #2d3b45.
Logotipo de inicio de sesión:Logotipo que se muestra en la parte superior de la página de inicio de sesión. El valor predeterminado es el logotipo de Canvas.
Fondo del cuadro superiorColor para el cuadro exterior que rodea el logotipo, el formulario y el pie de página de Canvas. El valor predeterminado es sin color.
Borde del cuadro superior:Color para el borde del cuadro superior. El valor predeterminado es sin color.
Fondo de la caja interiorColor para el cuadro interior que rodea el logotipo, el formulario y el pie de página de Canvas. El valor predeterminado es sin color.
Borde interior de la caja:Color para el borde del cuadro interior. El valor predeterminado es sin color.
Antecedentes del formulario:Color para el fondo detrás de la etiqueta de inicio de sesión y los campos de contraseña, el enlace Olvidé mi contraseña y el botón Iniciar sesión. El valor predeterminado es sin color.
Borde del formulario:Color para el borde del fondo del formulario. El valor predeterminado es sin color.
Etiqueta de inicio de sesión:Color para la etiqueta de inicio de sesión, la contraseña y el texto de la casilla de verificación "Permanecer conectado". El valor predeterminado es #ffffff.
Color del enlace de inicio de sesión:Color para el contorno del botón de inicio de sesión, el texto del botón de inicio de sesión, los enlaces del cuadro interno, el contorno del botón de cierre de sesión y el texto del botón de cierre de sesión. El valor predeterminado es #ffffff.
Enlace de pie de página de inicio de sesión:Color para los enlaces del pie de página. El valor predeterminado es #ffffff.
Enlace de pie de página de inicio de sesión al pasar el mouse:Color para los enlaces de pie de página al pasar el cursor. El valor predeterminado es #ffffff.
Iniciar sesión Instructure Logotipo:Color del logotipo de By Instructure. El valor predeterminado es #ffffff.
También se puede acceder a este recurso desde las siguientes Guías de Canvas: