Hoe upload ik aangepaste JavaScript- en CSS-bestanden naar een account?

In Canvas kun je de Theme Editor gebruiken om je account een eigen (huis)stijl te geven. Als je echter een andere stijl wilt toepassen die nog niet in de Theme Editor wordt ondersteund, kun je CSS- (Custom Cascading Style Sheets) en JS- (JavaScript)-bestanden naar je account uploaden. De bestanden worden rechtstreeks in Canvas gehost. Een thema dat op het account wordt toegepast, wordt ook op alle subaccounts toegepast, maar je kunt nog steeds CSS/JS-bestanden uploaden voor afzonderlijke subaccounts.

De Theme Editor ondersteunt het uploaden van bestanden op zowel desktops als mobiele apparaten. Standaard CSS/JS-bestanden worden toegepast op HTML-pagina's in de Canvas-desktoptoepassing, waarin de aanmeldingspagina voor mobiele apparaten kan zijn opgenomen. Mobiele CSS/JS-bestanden worden alleen toegepast op gebruikersinhoud die wordt weergegeven in de Canvas iOS- of Android-apps, maar ook in apps van derden die gebruikmaken van de Canvas API. Mobiele bestanden zijn echter niet van toepassing op gebruikersinhoud die in mobiele browsers wordt weergegeven.

Voor aangepaste JavaScript- en CSS-bestanden gelden dezelfde regels voor het overnemen van de huisstijl voor accounts en subaccounts wanneer je een thema in de Theme Editor maakt.

Voordat je aangepaste JavaScript- en CSS-bestanden gaat toevoegen, moet je contact opnemen met je Customer Success Manager voor het inschakelen van een aangepaste stijl voor je account en eventuele subaccounts. Nadat aangepaste huisstijl is ingeschakeld, is de optie om aangepaste CSS- en JS-bestanden te uploaden beschikbaar in het account en alle subaccounts.

Het risico van aangepaste bestanden

Als je de native Theme Editor-opties voor de huisstijl niet kunt gebruiken, moet je je wel bewust zijn van de risico's die verbonden zijn aan het gebruik van aangepaste bestanden, die kunnen leiden tot problemen met toegankelijkheid of conflicten met toekomstige Canvas-updates:

  • Je moet goed op de hoogte zijn van het gebruik van JavaScript en CSS en je moet tevens je eigen code kunnen onderhouden.  
  • Aangepaste bestanden kunnen conflicteren met toekomstige wijzigingen aan de Canvas-DOM (zoals de namen van elementklassen of de HTML-structuur) en worden om die reden niet ondersteund. Instructure aanvaardt geen enkele aansprakelijkheid voor wijzigingen aan je aangepaste bestanden met overschrijvingen.
  • Je bent verantwoordelijk voor het doornemen van richtlijnen voor toegang tot webinhoud om te waarborgen dat je bestanden voldoen aan tests voor webtoegang of andere compliance-normen die in jouw rechtsgebied gelden. Je bent verantwoordelijk voor het maken van je wijzigingen die toegankelijk zijn voor schermlezers, gebruikers die tekstcontrast en kleurcontrast nodig hebben en gebruikers die stijlen met hoog contrast als functie-instellingen voor gebruikers nodig hebben.
  • Bevestig bij het experimenteren met aangepaste huisstijlen altijd je stijlwijzigingen in de bèta- of testomgeving van je organisatie.

 

Opmerkingen:

  • De Theme Editor is niet beschikbaar voor Free-For-Teacher-accounts.
  • Als je beheerder van een subaccount bent en de link Thema's niet zichtbaar is in Accountnavigatie, is Thema's niet ingeschakeld voor subaccounts. Als het tabblad CSS/JS uploaden niet wordt weergegeven, zijn er geen bestandsuploads ingeschakeld voor subaccounts.

Account openen

Account openen

Klik in Globale navigatie op de link Beheerder (Admin) [1] en klik daarna op de naam van het account [2].

Thema's openen

Theme Editor openen

Klik op de link Thema's (Themes) in Accountnavigatie.

Opmerking: Als er subaccountthema's zijn ingeschakeld, heeft elk subaccount een link Thema's (Themes). Als je de Theme Editor wilt openen voor een subaccount, klik je op de link Subaccounts (Sub-Accounts) om te zoeken naar het subaccount en dat te openen, waarna je op de link Thema's (Themes) van het subaccount klikt.

Themasjabloon openen

Als je nog geen Canvas-thema voor je account hebt, gebruik dan een sjabloon om een nieuw thema te maken. Je hebt de keuze uit de standaard Canvas-sjabloon, een minimalistische sjabloon en een State U.-sjabloon. Als je CSM de K12-specifieke functie-instelling heeft ingeschakeld, wordt ook het K12-thema als sjabloon weergegeven.

Je maakt een nieuw thema door de muisaanwijzer boven een sjabloon te houden en te klikken op de knop Openen in Theme Editor (Open in Theme Editor) [1] of de knop Thema toevoegen (Add Theme) [2] en een sjabloon uit de lijst te selecteren.

Opgeslagen thema openen

Opgeslagen thema openen

Als je eerder een thema hebt gemaakt en opgeslagen, kun je dat op elk gewenst bewerken en weer opslaan. Opgeslagen thema's worden weergegeven in de sectie Mijn thema's (My Themes). Je kunt een opgeslagen thema openen door de muisaanwijzer boven de naam van het thema te houden en op de knop Openen in Theme Editor (Open in Theme Editor) [1] te klikken.

Als je een nieuw thema wilt maken op basis van een opgeslagen thema, klik je op de knop Thema toevoegen (Add Theme) [2] en selecteer je de naam van het opgeslagen thema in de lijst [3]. Met deze optie kun je voorkomen dat een eerder opgeslagen thema wordt overschreven.

Tabblad Uploaden openen

Tabblad Uploaden openen

Klik in de zijbalk van de Theme Editor op het tabblad Uploaden (Upload).

Aangepaste bestanden uploaden

Aangepaste CSS/JavaScript-bestanden uploaden

Als je bestanden voor de Canvas-desktoptoepassing wilt uploaden, zoek dan naar de koppen voor CSS-/JavaScript-bestanden [1]. Als je bestanden wilt uploaden voor gebruikersinhoud in mobiele apps van Canvas en derden, zoek dan naar de koppen voor CSS-/JavaScript-bestanden voor mobiele apps [2].

Zoek het bestandstype dat je wilt uploaden en klik op de knop Selecteren (Select) [3] en zoek vervolgens naar het bestand op je computer.

Bepaal welke bestanden zo nodig nog meer moeten worden geüpload.

Voorbeeld van thema bekijken

Voorbeeld van thema bekijken

Je kunt een voorbeeld van je thema bekijken door op Een voorbeeld van je wijzigingen bekijken (Preview Your Changes) te klikken.

Canvas genereert een voorbeeld van de componenten op basis van je geüploade bestanden.

Bestanden beheren

Bestanden beheren

Je kunt je bestanden beheren door nogmaals op het tabblad Upload te klikken [1].

Klik op het pictogram voor verwijderen [2] om een bestand te verwijderen en een nieuw bestand te uploaden. Je kunt extra wijzigingen aanbrengen en je gewijzigde bestand uploaden.

Je kunt de code van je bestand bekijken door te klikken op de link Bestand bekijken (View File) [3]. Omdat het bestand rechtstreeks in Canvas wordt opgeslagen, kun je deze link gebruiken als je het bestand ooit zou moeten downloaden.

Thema opslaan

Thema opslaan

Zodra je tevreden bent over je wijzigingen, sla je het thema op door te klikken op Thema opslaan (Save Theme).

Themanaam maken

Themanaam maken

Als je een thema op basis van een sjabloon hebt gewijzigd, maakt de Theme Editor een kopie van het thema. Sjablonen kunnen niet rechtstreeks worden bewerkt. Voer in het veld Themanaam (Theme Name) [1] een naam voor het thema in. Klik op de knop Thema opslaan (Save Theme) [2].

Opmerking: Als je een eerder opgeslagen thema hebt bewerkt, wordt door het bestand op te slaan de eerdere versie van het thema overschreven en wordt dezelfde themanaam gebruikt.

Thema toepassen

Thema toepassen

Je past het thema toe op je account door op de knop Thema toepassen (Apply theme) [1] te klikken.

Als je het thema wilt verlaten en wilt terugkeren naar de pagina Thema's, klik je op Afsluiten (Exit) [2]. Je kunt het thema openen en dat op elk gewenst moment op je account toepassen.

Opmerking: Als subaccounts in je account hun eigen thema's kunnen aanpassen, worden alle wijzigingen die je aanbrengt doorgevoerd in alle gekoppelde subaccounts. Canvas toont de status van je updates met Theme Editor. Wanneer het proces voor een afzonderlijk subaccount voltooid is, verdwijnt dat subaccount uit het voortgangsvenster. Wanneer alle subaccounts zijn bijgewerkt, keert de Theme Editor terug naar de pagina Thema's.