In Canvas können Sie den Design-Editor verwenden, um Ihr Konto zu gestalten. Wenn Sie jedoch zusätzliches Branding verwenden möchten, das derzeit im Design-Editor nicht unterstützt wird, können Sie benutzerdefinierte Cascading Style Sheets (CSS) und JavaScript (JS)-Dateien in Ihr Konto hochladen. Die Dateien werden direkt in Canvas gehostet. Jedes Design, das auf das Konto angewendet wird, gilt auch für alle Unterkonten, obwohl Sie CSS/JS-Dateien für einzelne Unterkonten hochladen können.
Der Design-Editor unterstützt den Upload von Dateien für Desktop und Mobilgeräte. Standard-CSS/JS-Dateien werden auf HTML-Seiten in der Canvas-Desktop-Anwendung angewendet, zu denen auch die Anmeldeseite für mobile Geräte gehören kann. Mobile CSS/JS-Dateien werden nur auf Benutzerinhalte angewandt, die in den Canvas-Apps für iOS oder Android sowie in Apps von Drittanbietern, die die Canvas-API verwenden, angezeigt werden. Mobile Dateien gelten jedoch nicht für Benutzerinhalte, die in mobilen Browsern angezeigt werden.
Für benutzerdefinierte JavaScript- und CSS-Dateien gelten dieselben Regeln für die Vererbung von Branding für Konten und Unterkonten wie bei der Erstellung eines Designs im Design-Editor.
Bevor Sie benutzerdefinierte JavaScript- und CSS-Dateien hinzufügen, müssen Sie sich an Ihren Kundenerfolg-Manager wenden, um das benutzerdefinierte Branding für Ihr Konto und alle Unterkonten zu aktivieren. Nach der Aktivierung steht die Option zum Hochladen benutzerdefinierter CSS- und JS-Dateien im Konto und allen Unterkonten zur Verfügung.
Risiken bei benutzerdefinierten Dateien
Wenn Sie die nativen Optionen des Design-Editors für das Branding nicht verwenden können, müssen Sie sich der Risiken bewusst sein, die mit der Verwendung von benutzerdefinierten Dateien verbunden sind. Diese können zu Problemen mit der Zugänglichkeit oder zu Konflikten mit zukünftigen Canvas-Updates führen:
- Sie sollten über fortgeschrittene Kenntnisse zu JavaScript und CSS verfügen und müssen Ihren eigenen Code pflegen.
- Benutzerdefinierte Dateien können mit zukünftigen Änderungen am Canvas DOM (z. B.: Namen von Elementklassen oder HTML-Struktur) in Konflikt geraten und werden daher nicht unterstützt. Instructure lehnt jegliche Haftung für Änderungen an Ihren benutzerdefinierten Dateien ab.
- Sie sind dafür verantwortlich, die Richtlinien für die Barrierefreiheit von Web-Inhalten zu überprüfen, um sicherzustellen, dass Ihre Dateien alle Tests zur Barrierefreiheit von Web-Inhalten oder andere in Ihrer Gerichtsbarkeit vorgeschriebene Konformitätsstandards erfüllen. Sie sind dafür verantwortlich, dass Ihre Änderungen für Bildschirmlesegeräte, Benutzer*innen mit Anpassungsbedarf bei Textkontrast und Farbkontrast sowie Benutzer*innen, die die Einstellung „Hoher Kontrast“ als Benutzerfunktion benötigen, zugänglich sind.
- Wenn Sie mit einem benutzerdefinierten Branding experimentieren, sollten Sie Ihre Änderungen immer in der Beta- oder Testumgebung Ihrer Institution überprüfen.
Hinweise:
- Der Design-Editor ist für Free-For-Teacher-Konten nicht verfügbar.
- Wenn Sie Administrator eines Unterkontos sind und der Link „Designs“ in der Kontonavigation nicht sichtbar ist, wurden Designs für Unterkonten nicht aktiviert. Wenn die Registerkarte „CSS/JS hochladen“ nicht sichtbar ist, wurde das Hochladen von Dateien für Unterkonten nicht aktiviert.
Konto öffnen
Klicken Sie in der globalen Navigation auf den Link Admin [1] und dann auf den Namen des Kontos [2].
Designs öffnen
Klicken Sie dazu in der Kontonavigation auf den Link Themes (Designs).
Hinweis: Wenn Designs für Unterkonten aktiviert wurden, enthält jedes Unterkonto auch einen Link zu Themes (Designs). Um den Design-Editor für ein Unterkonto zu öffnen, klicken Sie auf den Link Sub-Accounts (Unterkonten), um das Unterkonto zu finden und zu öffnen, und klicken Sie dann auf den Link Themes (Design) des Unterkontos.
Design-Vorlage öffnen
Wenn Sie noch kein Canvas Design für Ihr Konto erstellt haben, verwenden Sie eine Vorlage, um ein neues Design zu erstellen. Sie haben die Wahl zwischen der Standard-Canvas-Vorlage, einer minimalistischen Vorlage und einer State U. Vorlage. Wenn Ihr Kundenerfolg-Manager die Einstellung für K12 aktiviert hat, erscheint das K12-Design ebenfalls als Vorlage.
Um ein neues Design zu erstellen, fahren Sie mit dem Mauszeiger über eine Vorlage und klicken Sie auf die Schaltfläche Open in Theme Editor (Im Design-Editor öffnen) [1], oder klicken Sie auf die Schaltfläche Add Theme (Design hinzufügen) [2] und wählen Sie eine Vorlage aus der Liste.
Gespeichertes Design öffnen
Sobald Sie ein Design erstellt und gespeichert haben, können Sie es jederzeit bearbeiten. Gespeicherte Designs werden im Abschnitt „Meine Designs“ angezeigt. Um ein gespeichertes Design zu öffnen, bewegen Sie den Mauszeiger über den Namen des Designs und klicken Sie auf die Schaltfläche Open in Theme Editor (Im Design-Editor öffnen) [1].
Um ein neues Design auf der Grundlage eines gespeicherten Designs zu erstellen, klicken Sie auf die Schaltfläche Add Theme (Design hinzufügen) [2] und wählen den Namen des gespeicherten Designs aus der Liste [3]. Mit dieser Option können Sie vermeiden, dass Ihr zuvor gespeichertes Design überschrieben wird.
Registerkarte „Hochladen“ öffnen
Klicken Sie in der Seitenleiste des Design-Editors auf die Registerkarte Upload (Hochladen).
Benutzerdefinierte Dateien hochladen
Um Dateien für die Canvas-Desktop-Anwendung hochzuladen, suchen Sie die Felder für CSS-Datei/JavaScript-Dateien [1]. Um Dateien für Benutzer*innen von Canvas-Mobilgeräten und Apps von Drittanbietern hochzuladen, suchen Sie nach den Feldern für CSS-Datei/JavaScript-Dateien für Mobilgeräte [2].
Suchen Sie den Dateityp, den Sie hochladen möchten, und klicken Sie auf die Schaltfläche Select (Auswählen) [3]. Suchen Sie dann die Datei auf Ihrem Computer.
Suchen Sie bei Bedarf weitere Dateien, die hochgeladen werden sollen.
Vorschau des Designs
Um eine Vorschau Ihres Designs anzuzeigen, klicken Sie auf die Schaltfläche Preview Your Changes (Vorschau Ihrer Änderungen).
Canvas generiert die Vorschau der Komponenten auf der Grundlage Ihrer hochgeladenen Dateien.
Die Dateien verwalten
Um Ihre Dateien zu verwalten, klicken Sie erneut auf die Registerkarte Upload (Hochladen) [1].
Um eine Datei zu entfernen und eine neue hochzuladen, klicken Sie auf das Symbol Entfernen [2]. Sie können weitere Änderungen vornehmen und Ihre überarbeitete Datei hochladen.
Um den Code für Ihre Datei anzuzeigen, klicken Sie auf den Link View File (Datei anzeigen) [3]. Da die Datei direkt in Canvas gespeichert wird, verwenden Sie diesen Link, wenn Sie die Datei einmal herunterladen müssen.
Thema speichern
Wenn Sie mit den Änderungen an der Vorlage zufrieden sind, speichern Sie Ihr Design, indem Sie auf die Schaltfläche Save Theme (Design speichern) klicken.
Names des Designs erstellen
Wenn Sie ein Design anhand einer Vorlage geändert haben, erstellt der Design-Editor eine Kopie des Designs. Vorlagen können nicht direkt bearbeitet werden. Geben Sie in das Feld Theme Name (Name des Designs) [1] den Namen für Ihr Design ein. Klicken Sie auf Save Theme (Design speichern) [2].
Hinweis: Wenn Sie ein zuvor gespeichertes Design bearbeitet haben, wird beim Speichern des Designs die vorherige Version des Designs überschrieben und derselbe Designname verwendet.
Design anwenden
Um Ihr Design auf Ihr Konto anzuwenden, klicken Sie auf die Schaltfläche Apply theme (Design anwenden) [1].
Um das Design zu verlassen und zur Seite Themen zurückzukehren, klicken Sie auf die Schaltfläche Exit (Beenden) [2]. Sie können das Design jederzeit wieder öffnen und es auf Ihr Konto anwenden.
Hinweis: Wenn Ihr Konto die Möglichkeit bietet, dass Unterkonten ihre eigenen Designs anpassen können, werden alle vorgenommenen Änderungen auch auf alle zugehörigen Unterkonten übertragen. Canvas zeigt den Status Ihrer Aktualisierungen im Design-Editor an. Wenn der Prozess für ein Unterkonto abgeschlossen ist, verschwindet es aus dem Fortschrittsfenster. Wenn alle Unterkonten aktualisiert wurden, kehrt der Design-Editor zur Seite „Designs“ zurück.
