Dit document beschrijft de componenten die worden gebruikt om aangepaste Canvas-thema's voor een instelling te creëren.
Met de thema-editor kunnen beheerders aangepaste Canvas-thema's voor hun instelling maken met behulp van kleuren en afbeeldingen. Afbeeldingen, logo's en watermerken worden echter niet weergegeven voor gebruikers die de gebruikersinstelling 'Hoog contraststijlen' hebben ingeschakeld. Voor specifieke hulp met afbeeldingsbestanden kunt u de documentatie raadplegen.Bronnen document met afbeeldingensjablonen voor de Canvas-thema-editor.
Aanpassingen aan CSS- en JavaScript-bestanden kunnen ook worden geüpload naar de thema-editor voor respectievelijk de HTML-weergave en de Canvas-appweergave. Houd er echter rekening mee dat aangepaste bestanden kleuren kunnen overschrijven die worden ondersteund voor stijlen met hoog contrast; als u bijvoorbeeld de kleur van een link in een aangepast CSS-bestand wijzigt naar rood, zal deze ook rood worden weergegeven voor gebruikers met stijlen met hoog contrast, wat toegankelijkheidsproblemen kan veroorzaken. Zoals vermeld in het uploadvenster van de thema-editor, is het gebruik van aangepaste CSS/JS-bestanden een optie, maar dit betekent dat u verantwoordelijk bent voor het onderhouden van code die conflicteert met wat Canvas ondersteunt in de thema-editor.
Tenzij anders vermeld, zijn de volgende componenten van de thema-editor van toepassing op de webversie van Canvas. Sommige componenten voor globale branding en globale navigatie zijn ook van toepassing op de mobiele Canvas-apps.
Wereldwijde merkidentiteit
Primaire merkkleur: Primaire kleur die overal in Canvas wordt gebruikt, met name in de navigatielinks van cursussen en het pictogram voor het openen en sluiten van het dashboard. Wordt in de Canvas Student- en Canvas Teacher-apps gebruikt voor de globale navigatie, de inbox en de kleuren voor cursusselectie. De standaardwaarde is #008ee2.
Hoofdtekstkleur: Kleur voor tekst die overal in Canvas wordt gebruikt. Wordt gebruikt bij het invoeren van tekst op de inlogpagina van de Canvas Student-, Canvas Teacher- en Canvas Parent-apps. De standaardwaarde is #2d3b45.
Linkkleur: Kleur voor hyperlinks die in Canvas worden gebruikt. Wordt gebruikt voor pictogrammen van externe links en downloadpictogrammen. Wordt ook weergegeven in de link 'Wachtwoord vergeten' op de inlogpagina van mobiele apparaten. De standaardwaarde is #008ee2.
Primaire knop: Kleur voor de primaire knoppen in Canvas;Als er geen kleur is ingesteld, krijgt de primaire knop de primaire kleur. Deze functie wordt gebruikt om knoppen en links in de Canvas Student- en Canvas Teacher-apps van een thema te voorzien. Ook wordt deze gebruikt voor de kleur van de inlogknop in de Canvas Student-, Canvas Teacher- en Canvas Parent-apps.
Primaire knoptekst: Kleur voor de tekst die wordt weergegeven als onderdeel van de primaire knoppen. Gebruikt voor de tekst van de inlogknop in de Canvas Student-, Canvas Teacher- en Canvas Parent-apps. De standaardwaarde is #ffffff.
Secundaire knop: Kleur voor de secundaire knoppen in Canvas.De standaardwaarde is #2d3b45.Dit onderdeel wordt momenteel niet gebruikt in de Canvas-interface.
Tekst van de secundaire knop: Kleur voor de tekst die wordt weergegeven als onderdeel van de secundaire knoppen. De standaardwaarde is #ffffff.Dit onderdeel wordt momenteel niet gebruikt in de Canvas-interface.
Wereldnavigatie
Navigatieachtergrond: Kleur voor de achtergrond in het globale navigatiemenu. Wordt ook gebruikt om de achtergrond van de adresbalk in webbrowsers te kleuren. De standaardwaarde is #394b58.
Navigatie-icoon: Kleur voor de pictogrammen in het globale navigatiemenu. Wordt ook gebruikt om de pictogrammen voor zichtbaarheid en instellingen in SpeedGrader te kleuren. De standaardwaarde is #ffffff.
Actief navigatiepictogram: Kleur voor het actieve (geselecteerde) pictogram in het globale navigatiemenu. Als er geen kleur is ingesteld, krijgt het actieve navigatiepictogram de primaire kleur.
Nav Text: Kleur voor de tekst in het globale navigatiemenu. Wordt ook gebruikt om de tekst van de bovenste navigatiebalk in de Canvas Student- en Canvas Teacher-apps te kleuren. Daarnaast wordt Nav Text gebruikt om het cijferoverzichtpictogram in SpeedGrader te kleuren. De standaardwaarde is #ffffff.
Navigatietekst actief: Kleur voor de actieve tekst in het globale navigatiemenu. Als er geen kleur is ingesteld, krijgt de actieve tekst in het navigatiemenu de kleur van de link.
Nav Avatar Rand: Kleur die wordt gebruikt voor de rand rond het accountlink-pictogram. De standaardwaarde is #ffffff.
Navigatiebadge:De kleur die wordt gebruikt voor de badge voor ongelezen berichten in het Inbox-pictogram. Als er geen kleur is ingesteld, gebruikt de navigatiebadge de primaire kleur.
Navigatiebadge actief: Kleur voor de actieve (geselecteerde) badge in het globale navigatiemenu. Als er geen kleur is ingesteld, krijgt de actieve navigatiebadge de primaire kleur.
Navigatiebadge tekst: Kleur die wordt gebruikt voor het aantal ongelezen berichten in de badge van de inbox. Als er geen kleur is ingesteld, gebruikt de navigatiebadge de primaire kleur.
Navigatiebadge tekst actief: Kleur voor de actieve tekst in het globale navigatiemenu. Als er geen kleur is ingesteld, krijgt de actieve tekst van de navigatiebadge de kleur van de link.
Achtergrond van het navigatielogo: Kleur voor de achtergrond van het logo in het globale navigatiemenu. De standaardwaarde is #394b58.
Nav-logoLogo bovenaan het globale navigatiemenu (ondersteunt svg-, png- en jpg-bestanden). Wordt ook gebruikt als logo in de bovenste navigatiebalk van de Canvas Student- en Canvas Teacher-apps op iOS-apparaten. Standaard is het Canvas-logo.
Watermerken en andere afbeeldingen
WatermerkEen lichte achtergrondafbeelding die achter de pagina-inhoud verschijnt; de weergavegrootte is afhankelijk van de grootte van het geüploade bestand. Als de afbeelding te klein of te groot is voor uw ontwerpvoorkeur, kunt u deze naar wens aanpassen (ondersteunt png-, svg-, gif- en jpg-bestanden). Standaard wordt er geen afbeelding weergegeven.
Dekking van het watermerk:De dekking (transparantie) van uw watermerk. Standaard is 100% (geen transparantie van de afbeelding).
Favicon: Klein pictogram dat in het browsertabblad wordt weergegeven (ondersteunt ico-bestanden van 16x16, 32x32 en 48x48 pixels). Standaard is het Canvas-favicon.
Mobiel startschermpictogram: Pictogram dat wordt weergegeven wanneer Canvas als bladwijzer is toegevoegd vanuit een browser op een mobiel apparaat (ondersteunt 180x180 png-bestanden). Standaard is het Apple touch-pictogram.
Gebruikers van nieuwere Windows-versies (8+) kunnen sites en apps vastpinnen aan het startscherm van hun Windows-telefoon. De Windows-velden zijn optioneel, maar bieden wel aanpassingsmogelijkheden voor Windows-telefoongebruikers. De Windows-tegels tonen echter nog steeds het favicon dat is ingesteld in de thema-editor, indien aanwezig.
Kleur van de venstertegel: Kleur voor de Windows-tegel. Als er geen kleur is ingesteld, neemt de Windows-tegelkleur de primaire kleur aan.
Windows-tegelafbeelding vierkantAfbeelding voor de vierkante versie van de Windows-tegel (ondersteunt 1,8 keer de standaard tegelgrootte (558x558 svg-, png-, jpg- en gif-bestanden)). Standaard is de Windows-tegelafbeelding.
Windows-tegelafbeelding breedAfbeelding voor de brede versie van de Windows-tegel (ondersteunt SVG-, PNG-, JPG- en GIF-bestanden van 558x270 pixels). Standaard wordt de Windows-tegelafbeelding gebruikt.
Rechter zijbalklogoHet logo wordt boven de rechterzijbalk van het Canvas-dashboard weergegeven, maar is niet zichtbaar op tablets of in browsers met een lagere schermresolutie vanwege ruimtegebrek. De weergavegrootte is afhankelijk van de grootte van het geüploade bestand, maar de aanbevolen afmetingen zijn 360x140 pixels (ondersteunt svg, png, jpg en gif). Standaard wordt er geen afbeelding weergegeven.
Inlogscherm
De mobiele inlogpagina wordt momenteel niet ondersteund door de inlogschermcomponenten, maar wel door beperkte branding via de globale brandingcomponenten. Houd er rekening mee dat single sign-on-links de instellingen overnemen van de thema-editor.
Achtergrondkleur:Kleur van de inlogachtergrond. De standaardwaarde is #394b58.
Achtergrondafbeelding:Afbeelding voor de inlogachtergrond. Standaard is er geen afbeelding.
Lichaamsschaduw:Kleur voor de schaduw van het lichaam. De standaardwaarde is #2d3b45.
Inloglogo:Het logo wordt bovenaan de inlogpagina weergegeven. Standaard is het Canvas-logo.
Achtergrond van de bovenste doos: Kleur voor het kader rondom het Canvas-logo, het formulier en de voettekst. Standaard is er geen kleur.
Bovenrand van de doos:Kleur voor de rand van het bovenste vak. Standaard is geen kleur.
Achtergrond van de binnenverpakking: Kleur voor het kader rondom het Canvas-logo, het formulier en de voettekst. Standaard is geen kleur.
Binnenrand van het kader:Kleur voor de rand van het binnenste vak. Standaard is geen kleur.
Achtergrondinformatie over het formulier:Kleur voor de achtergrond achter het inloglabel en de wachtwoordvelden, de link 'Wachtwoord vergeten' en de knop 'Inloggen'. Standaard is er geen kleur.
Vormgrens:Kleur voor de rand rond de achtergrond van het formulier. Standaard is er geen kleur.
Inloglabel:Kleur voor het inloglabel, wachtwoord en de tekst van het selectievakje 'Ingelogd blijven'. De standaardwaarde is #ffffff.
Kleur van de inloglink:Kleur voor de omlijning van de inlogknop, de tekst van de inlogknop, de links in het binnenvak, de omlijning van de uitlogknop en de tekst van de uitlogknop. De standaardwaarde is #ffffff.
Inloglink in de voettekst:Kleur voor de links in de footer. De standaardwaarde is #ffffff.
Inloglink in de voettekst (zweven met muis):Kleur voor de links in de footer bij hoveren. De standaardwaarde is #ffffff.
Login Instructure-logo:Kleur voor het By Instructure-logo. De standaardwaarde is #ffffff.
Deze bron is ook toegankelijk via de volgende Canvas-handleidingen: