Det här dokumentet diskuterar komponenter som används för att skapa anpassade Canvas-teman för en institution.
Med temaredigeraren kan administratörer skapa anpassade Canvas-teman för sin institution med hjälp av färger och bilder. Bilder, logotyper och vattenstämplar visas dock inte för användare som aktiverar användarinställningen Högkontraststilar. För specifik hjälp med bildfiler, vänligen seResursdokument för bildmallar för Canvas-temaredigeraren.
Åsidosättande CSS- och JavaScript-filer kan också laddas upp till temaredigeraren för HTML-vyn respektive Canvas-appvyn. Tänk dock på att anpassade filer kan skriva över alla färger som stöds för högkontraststilar. Om du till exempel ändrar en länkfärg till röd i en anpassad CSS-fil visas den också som röd för användare med högkontraststilar, vilket kan skapa tillgänglighetsproblem. Som nämnts i temaredigerarens uppladdningsfönster är det ett alternativ att använda anpassade CSS/js-filer, men det innebär att du är ansvarig för att underhålla all kod som skapar en konflikt mot vad Canvas stöder i temaredigeraren.
Om inget annat anges gäller följande Temaredigerarkomponenter för webbversionen av Canvas. Vissa komponenter för global varumärkesbyggande och global navigering gäller även för Canvas mobilappar.
Global varumärkesbyggande
Primär varumärkesfärgPrimärfärg som används i hela Canvas, främst i kursnavigeringslänkar och växlingsikonen för instrumentpanelen. Används i Canvas Student- och Canvas Teacher-apparna för global navigering, inkorg och kursvalsfärger. Standardvärdet är #008ee2.
HuvudtextfärgFärg för text som används i hela Canvas. Används när text anges på inloggningssidan i Canvas Student-, Canvas Teacher- och Canvas Parent-apparna. Standardvärdet är #2d3b45.
LänkfärgFärg för hyperlänkar som används i hela Canvas. Används för ikoner för externa länkar och nedladdningsikoner. Visas även på mobilens inloggningssida för länken Glömt lösenord. Standardvärdet är #008ee2.
Primär knappFärg för de primära knapparna i Canvas;Om en färg inte är inställd antar Primärknapp primärfärgen. Används för att tema knappar och länkar i Canvas Student- och Canvas Teacher-apparna. Används även för inloggningsknappens färg i Canvas Student-, Canvas Teacher- och Canvas Parent-apparna.
Primär knapptextFärg för texten som visas som en del av de primära knapparna. Används för text på inloggningsknappar i Canvas Student-, Canvas Teacher- och Canvas Parent-appar. Standardvärdet är #ffffff.
Sekundär knappFärg för sekundära knappar i Canvas.Standardvärdet är #2d3b45.Den här komponenten används för närvarande inte i Canvas-gränssnittet.
Sekundär knapptextFärg för texten som visas som en del av de sekundära knapparna. Standardvärdet är #ffffff.Den här komponenten används för närvarande inte i Canvas-gränssnittet.
Global navigering
NavigeringsbakgrundFärg för bakgrunden i den globala navigeringsmenyn. Används även för att färglägga bakgrunden i adressfältet i webbläsare. Standardvärdet är #394b58.
NavigeringsikonFärg för ikonerna i den globala navigeringsmenyn. Används även för att färglägga ikonerna Synlighet och Inställningar i SpeedGrader. Standardvärdet är #ffffff.
Navigeringsikon aktivFärg för den aktiva (valda) ikonen i den globala navigeringsmenyn. Om ingen färg är inställd antar den aktiva navigeringsikonen primärfärgen.
NavigeringstextFärg för texten i den globala navigeringsmenyn. Används även för att färglägga texten i den övre navigeringsfältet i Canvas Student- och Canvas Teacher-apparna. Dessutom används navigeringstext för att färglägga ikonen för betygsboken i SpeedGrader. Standardvärdet är #ffffff.
Navigeringstext aktivFärg för den aktiva texten i den globala navigeringsmenyn. Om ingen färg är inställd antar den aktiva navigeringstexten länkfärgen.
Nav Avatar-kantlinjeFärg som används för kanten runt kontolänkikonen. Standardvärdet är #ffffff.
Navigeringsmärke:Färg som används för märket för olästa meddelanden i inkorgen. Om ingen färg är inställd antar navigeringsmärket primärfärgen.
Navigeringsmärke aktivtFärg för det aktiva (valda) märket i den globala navigeringsmenyn. Om ingen färg är inställd antar det aktiva navigeringsmärket primärfärgen.
NavigeringsmärkestextFärg som används för numret i det olästa meddelandemärket i inkorgsikonen. Om ingen färg är inställd antar navigeringsmärket primärfärgen.
Navigeringsmärkestext aktivFärg för den aktiva texten i den globala navigeringsmenyn. Om ingen färg är inställd antar navigeringsmärkets aktiva text länkfärgen.
Nav-logotypbakgrundBakgrundsfärg för logotypen i den globala navigeringsmenyn. Standardvärdet är #394b58.
Nav-logotypLogotyp högst upp i den globala navigeringsmenyn (stöder svg-, png- och jpg-filer). Används även som logotyp i den övre navigeringsfältet i Canvas Student- och Canvas Teacher-apparna på iOS-enheter. Standard är Canvas-logotypen.
Vattenmärken och andra bilder
Vattenstämpel: Ljus bakgrundsbild som visas bakom sidans innehåll; visningsstorleken är subjektiv baserat på den uppladdade filstorleken, så om bilden är för liten eller för stor för dina designpreferenser, ändra storleken på bilden därefter (stöder png-, svg-, gif- och jpg-filer). Standardinställningen är ingen bild.
Vattenstämpelns opacitet:Opacitet (transparens) för ditt vattenmärke. Standardinställningen är 100 % (ingen bildtransparens).
FaviconLiten ikon som visas i webbläsarfliken (stöder 16x16, 32x32 och 48x48 ico-filer). Standard är Canvas favicon.
Ikon för mobil startskärmIkonen visas när Canvas är bokmärkt från en webbläsare på en mobil enhet (stöder 180x180 png-filer). Standard är Apple Touch-ikonen.
Användare av nyare Windows-versioner (8+) kan fästa webbplatser och appar på startskärmen på sina Windows-telefoner. Windows-fälten är valfria men låter dig erbjuda anpassningsalternativ till Windows-telefonanvändare. Windows-paneler visar dock fortfarande den favicon som angetts i temaredigeraren, om någon finns.
Färg på fönsterrutanFärg för Windows-panelen. Om ingen färg är inställd antar Windows-panelens färg primärfärgen.
Windows-ruta Bild KvadratBild för den fyrkantiga versionen av Windows-panelen (stöder 1,8 gånger standardstorleken för paneler (558x558 svg-, png-, jpg-, gif-filer). Standard är Windows-panelbilden.
Windows-ruta Bild BredBild för den breda versionen av Windows-panelen (stöder 558x270 svg-, png-, jpg- och gif-filer). Standard är Windows-panelbilden.
Logotyp i höger sidofältLogotypen visas ovanför den högra sidofältet på Canvas-instrumentpanelen, men när den visas på surfplattor eller i webbläsarfönster med lägre skärmupplösningar syns logotypen inte på grund av utrymmesbegränsningar. Visningsstorleken är subjektiv baserat på uppladdad filstorlek, men den föredragna bildstorleken är 360x140 (stöder svg, png, jpg, gif). Standardinställningen är ingen bild.
Inloggningsskärm
Den mobila inloggningssidan stöds för närvarande inte med inloggningsskärmskomponenterna, men har begränsad stöd för varumärkesbyggande från komponenterna för global varumärkesbyggande. Observera att länkar för enkel inloggning ärver inställningar från temaredigeraren.
Bakgrundsfärg:Färg på inloggningsbakgrunden. Standardvärdet är #394b58.
Bakgrundsbild:Bild för inloggningsbakgrunden. Standardinställningen är ingen bild.
Kroppsskugga:Färg för kroppsskuggan. Standardvärdet är #2d3b45.
Inloggningslogotyp:Logotypen visas högst upp på inloggningssidan. Standardinställningen är Canvas-logotypen.
Bakgrund för toppboxFärg för den yttre rutan runt Canvas-logotypen, formuläret och sidfoten. Standardinställningen är ingen färg.
Översta lådans kant:Färg för kanten för den översta rutan. Standardinställningen är ingen färg.
Bakgrund för inre lådaFärg för den inre rutan runt Canvas-logotypen, formuläret och sidfoten. Standardinställningen är ingen färg.
Inre boxkant:Färg för kanten för den inre rutan. Standardinställningen är ingen färg.
Bakgrund för formulär:Färg för bakgrunden bakom inloggningsetiketten och lösenordsfälten, länken Glömt lösenord och knappen Logga in. Standardinställningen är ingen färg.
Formulärgräns:Färg för kanten runt formulärets bakgrund. Standardinställningen är ingen färg.
Inloggningsetikett:Färg för inloggningsetiketten, lösenordet och kryssrutans text "Fortsätt inloggad". Standardvärdet är #ffffff.
Färg på inloggningslänk:Färg för konturen för inloggningsknappen, texten för inloggningsknappen, länkarna i den inre rutan, konturen för utloggningsknappen och texten för utloggningsknappen. Standardvärdet är #ffffff.
Länk till inloggningssidfot:Färg för sidfotslänkarna. Standardvärdet är #ffffff.
Håll muspekaren över länken i sidfoten:Färg för sidfotslänkar vid muspekning. Standardvärdet är #ffffff.
Inloggningslogotyp:Färg för By Instructure-logotypen. Standardvärdet är #ffffff.
Denna resurs kan också nås från följande Canvas-guider: