Dieses Dokument beschreibt die Komponenten, die zur Erstellung benutzerdefinierter Canvas-Designs für eine Institution verwendet werden.
Der Design-Editor ermöglicht Administratoren die Erstellung benutzerdefinierter Canvas-Designs für ihre Institution mithilfe von Farben und Bildern. Bilder, Logos und Wasserzeichen werden jedoch nicht angezeigt, wenn die Benutzerfunktion „Stile mit hohem Kontrast“ aktiviert ist. Weitere Informationen zu Bilddateien finden Sie in der Dokumentation.Ressourcendokument für Bildvorlagen des Canvas Theme EditorsDie
Sie können CSS- und JavaScript-Dateien zum Überschreiben in den Theme-Editor für die HTML-Ansicht bzw. die Canvas-App-Ansicht hochladen. Beachten Sie jedoch, dass benutzerdefinierte Dateien die Farben von kontrastreichen Stilen überschreiben können. Wenn Sie beispielsweise die Farbe eines Links in einer benutzerdefinierten CSS-Datei auf Rot ändern, wird dieser auch Nutzern mit kontrastreichen Stilen rot angezeigt, was zu Barrierefreiheitsproblemen führen kann. Wie im Upload-Fenster des Theme-Editors erwähnt, ist die Verwendung benutzerdefinierter CSS-/JS-Dateien zwar eine Option, bedeutet aber, dass Sie für die Pflege des gesamten Codes verantwortlich sind, der mit den von Canvas im Theme-Editor unterstützten Funktionen in Konflikt steht.
Sofern nicht anders angegeben, gelten die folgenden Komponenten des Design-Editors für die Webversion von Canvas. Einige Komponenten für globales Branding und globale Navigation gelten auch für die mobilen Canvas-Apps.
Globale Markenbildung
Primäre MarkenfarbeDie Primärfarbe, die in Canvas verwendet wird und vor allem in den Kursnavigationslinks und dem Dashboard-Symbol sichtbar ist. Sie wird in den Canvas-Apps für Studierende und Lehrende für die globale Navigation, den Posteingang und die Kursauswahl verwendet. Der Standardwert ist #008ee2.
HaupttextfarbeDie in Canvas verwendete Textfarbe. Sie wird bei der Texteingabe auf der Anmeldeseite der Canvas-Apps für Schüler, Lehrer und Eltern verwendet. Der Standardwert ist #2d3b45.
LinkfarbeDie Farbe für Hyperlinks in Canvas. Wird für externe Link- und Download-Symbole verwendet. Sie wird auch auf der mobilen Anmeldeseite unter „Passwort vergessen“ angezeigt. Standardwert: #008ee2.
Primäre Schaltfläche: Farbe für die primären Schaltflächen in Canvas;Wenn keine Farbe festgelegt ist, verwendet die Schaltfläche die Standardfarbe. Diese Farbe dient zur Gestaltung von Schaltflächen und Links in den Canvas-Apps für Schüler und Lehrer. Sie wird auch für die Farbe der Anmeldeschaltfläche in den Apps für Schüler, Lehrer und Eltern verwendet.
Text der primären SchaltflächeFarbe für den Text der primären Schaltflächen. Wird für den Text der Anmeldeschaltfläche in den Apps Canvas Student, Canvas Teacher und Canvas Parent verwendet. Standardwert ist #ffffff.
Sekundärtaste: Farbe für die sekundären Schaltflächen in CanvasDieDer Standardwert ist #2d3b45.Diese Komponente wird derzeit in der Canvas-Oberfläche nicht verwendet.
Text der sekundären SchaltflächeFarbe für den Text, der als Teil der sekundären Schaltflächen angezeigt wird. Standardwert ist #ffffff.Diese Komponente wird derzeit in der Canvas-Oberfläche nicht verwendet.
Globale Navigation
NavigationshintergrundHintergrundfarbe im globalen Navigationsmenü. Wird auch zur Einfärbung des Hintergrunds der Adressleiste in Webbrowsern verwendet. Standardwert ist #394b58.
NavigationssymbolFarbe für die Symbole im globalen Navigationsmenü. Wird auch zur Einfärbung der Symbole für Sichtbarkeit und Einstellungen in SpeedGrader verwendet. Standardwert ist #ffffff.
Navigationssymbol aktivFarbe für das aktive (ausgewählte) Symbol im globalen Navigationsmenü. Wenn keine Farbe festgelegt ist, verwendet das aktive Navigationssymbol die Primärfarbe.
NavigationstextFarbe für den Text im globalen Navigationsmenü. Wird auch verwendet, um den Text der oberen Navigationsleiste in den Apps Canvas Student und Canvas Teacher einzufärben. Zusätzlich wird „Nav Text“ verwendet, um das Notenbuchsymbol in SpeedGrader einzufärben. Standardwert ist #ffffff.
Navigationstext aktivFarbe für den aktiven Text im globalen Navigationsmenü. Wenn keine Farbe festgelegt ist, verwendet der aktive Navigationstext die Linkfarbe.
Navigations-Avatar-RahmenFarbe des Rahmens um das Kontosymbol. Standardwert: #ffffff.
Navigationsabzeichen:Die Farbe, die für das Symbol für ungelesene Nachrichten im Posteingangssymbol verwendet wird. Wenn keine Farbe festgelegt ist, verwendet das Navigationssymbol die Primärfarbe.
Navigationsabzeichen aktivFarbe für das aktive (ausgewählte) Symbol im globalen Navigationsmenü. Wenn keine Farbe festgelegt ist, verwendet das aktive Symbol die Primärfarbe.
Navigations-Badge-TextDie Farbe, die für die Anzahl der ungelesenen Nachrichten im Symbol für den Posteingang verwendet wird. Wenn keine Farbe festgelegt ist, verwendet das Navigationssymbol die Primärfarbe.
Navigations-Badge-Text aktivFarbe für den aktiven Text im globalen Navigationsmenü. Wenn keine Farbe festgelegt ist, verwendet der aktive Text des Navigationssymbols die Linkfarbe.
Hintergrund des Navigationslogos: Farbe für den Hintergrund des Logos im globalen Navigationsmenü. Standardwert ist #394b58.
NavigationslogoDas Logo befindet sich oben im globalen Navigationsmenü (unterstützt SVG-, PNG- und JPG-Dateien). Es wird auch in der oberen Navigationsleiste der Canvas Student- und Canvas Teacher-Apps auf iOS-Geräten verwendet. Standardmäßig wird das Canvas-Logo angezeigt.
Wasserzeichen und andere Bilder
WasserzeichenEin helles Hintergrundbild, das hinter dem Seiteninhalt angezeigt wird. Die Anzeigegröße hängt von der Größe der hochgeladenen Datei ab. Sollte das Bild für Ihre Designvorstellungen zu klein oder zu groß sein, passen Sie es bitte entsprechend an (unterstützt PNG-, SVG-, GIF- und JPG-Dateien). Standardmäßig wird kein Bild angezeigt.
Deckkraft des Wasserzeichens:Deckkraft (Transparenz) Ihres Wasserzeichens. Standardwert ist 100 % (keine Bildtransparenz).
FaviconKleines Symbol, das im Browsertab angezeigt wird (unterstützt 16x16-, 32x32- und 48x48-ICO-Dateien). Standardmäßig wird das Canvas-Favicon verwendet.
Symbol für den Startbildschirm des MobiltelefonsSymbol, das angezeigt wird, wenn Canvas über einen Browser auf einem Mobilgerät als Lesezeichen gespeichert wird (unterstützt 180x180 PNG-Dateien). Standardmäßig wird das Apple-Touch-Symbol verwendet.
Nutzer neuerer Windows-Versionen (8+) können Websites und Apps auf dem Startbildschirm ihrer Windows-Smartphones anheften. Die Windows-Felder sind optional, bieten aber die Möglichkeit, Windows-Smartphone-Nutzern individuelle Anpassungsoptionen anzubieten. Die Windows-Kacheln zeigen jedoch weiterhin das im Design-Editor festgelegte Favicon an, sofern vorhanden.
FensterfliesenfarbeFarbe für die Windows-Kachel. Wenn keine Farbe festgelegt ist, verwendet die Windows-Kachel die Primärfarbe.
Windows-Kachelbild QuadratischBild für die quadratische Version der Windows-Kachel (unterstützt die 1,8-fache Standardkachelgröße (558x558 SVG-, PNG-, JPG- und GIF-Dateien)). Standardmäßig wird das Windows-Kachelbild verwendet.
Windows-Kachelbild breitBild für die breite Version der Windows-Kachel (unterstützt 558x270 SVG-, PNG-, JPG- und GIF-Dateien). Standardmäßig wird das Windows-Kachelbild verwendet.
Logo in der rechten SeitenleisteDas Logo wird im Canvas-Dashboard über der rechten Seitenleiste angezeigt. Auf Tablets oder in Browsern mit kleineren Bildschirmauflösungen ist es aufgrund von Platzmangel nicht sichtbar. Die Anzeigegröße hängt von der Größe der hochgeladenen Datei ab, die empfohlene Bildgröße beträgt jedoch 360 x 140 Pixel (unterstützt werden die Formate SVG, PNG, JPG und GIF). Standardmäßig wird kein Bild angezeigt.
Anmeldebildschirm
Die mobile Anmeldeseite wird derzeit nicht von den Anmeldebildschirmkomponenten unterstützt, bietet jedoch eingeschränkte Branding-Optionen der globalen Branding-Komponenten. Bitte beachten Sie, dass Single-Sign-On-Links die Einstellungen des Theme-Editors übernehmen.
Hintergrundfarbe:Farbe des Anmeldehintergrunds. Standardwert ist #394b58.
Hintergrundbild:Bild für den Anmeldehintergrund. Standardmäßig wird kein Bild angezeigt.
Körperschatten:Farbe für den Körperschatten. Standardwert ist #2d3b45.
Anmeldelogo:Das Logo wird oben auf der Anmeldeseite angezeigt. Standardmäßig wird das Canvas-Logo verwendet.
Hintergrund der oberen BoxFarbe für den äußeren Rahmen um das Canvas-Logo, das Formular und die Fußzeile. Standardmäßig keine Farbe.
Oberer Kastenrand:Farbe für den Rahmen des oberen Feldes. Standardmäßig keine Farbe.
Hintergrund der InnenboxFarbe für den inneren Rahmen um das Canvas-Logo, das Formular und die Fußzeile. Standardmäßig keine Farbe.
Innerer Kartonrand:Farbe für den Rahmen des inneren Feldes. Standardmäßig keine Farbe.
Formularhintergrund:Hintergrundfarbe für die Felder „Anmelden“, „Passwort vergessen“ und „Anmelden“. Standardmäßig keine Farbe.
Formularrahmen:Farbe für den Rahmen um den Formularhintergrund. Standardmäßig keine Farbe.
Anmeldebezeichnung:Farbe für die Beschriftung des Anmeldeformulars, des Passworts und des Kontrollkästchens „Angemeldet bleiben“. Standardwert ist #ffffff.
Farbe des Anmeldelinks:Farbe für die Umrandung und den Text der Anmeldeschaltfläche, die Links im inneren Feld, die Umrandung und den Text der Abmeldeschaltfläche. Standardwert ist #ffffff.
Link zur Anmelde-Fußzeile:Farbe für die Fußzeilenlinks. Standardwert ist #ffffff.
Link in der Fußzeile des Login-Bereichs beim Überfahren mit der Maus:Farbe für die Fußzeilenlinks beim Überfahren mit der Maus. Standardwert ist #ffffff.
Logo der Anmeldestruktur:Farbe für das By Instructure-Logo. Standardwert ist #ffffff.
Diese Ressource kann auch über die folgenden Canvas-Anleitungen aufgerufen werden: