Hur laddar jag upp anpassade JavaScript- och CSS-filer till ett konto?

I Canvas kan du använda Temaredigeraren (Theme Editor) för att varumärkesanpassa ditt konto. Om du vill tillämpa ytterligare varumärkning som för tillfället inte stöds i Temaredigeraren, kan du ladda upp anpassade CSS-filer och JavaScript-filer (JS) till ditt konto. Filer är sparas direkt i Canvas. Alla teman som tillämpas för kontot gäller även alla underkonton, men du kan ändå ladda upp CSS/JS-filer för enskilda underkonton.

Temaredigeraren stöder uppladdning av filer från datorer och mobiler. Standard CSS / JS-filer tillämpas på HTML-sidor i datorapplikationen för Canvas, vilken kan inkludera inloggningssidan för mobila enheter. Mobila CSS / JS-filer tillämpas bara på användarinnehåll som visas i Canvas iOS- eller Android-appar, samt i tredjepartsapplikationer med hjälp av Canvas API, men mobilfiler gäller inte användarinnehåll som visas i mobila webbläsare.

Anpassade JavaScript- och CSS-filer är föremål för samma arv regler för arv av varumärkesanpassning som när man skapar ett tema i Temaredigeraren.

Innan du lägger till anpassade JavaScript- och CSS-filer måste du kontakta din Customer Success Manager för att aktivera anpassad varumärkning för ditt konto eller underkonto. När den anpassade varumärkningen är aktiverad finns alternativet att ladda upp anpassade CSS- och JS-filer i konton och underkonton tillgängligt.

Risker med anpassade filer

Om du inte kan använda de inbyggda temaredigeringsalternativen för anpassad varumärkning måste du vara medveten om riskerna med att använda anpassade filer, vilket kan orsaka tillgänglighetsproblem eller konflikter med framtida Canvas-uppdateringar:

  • Du bör ha avancerad kunskap om JavaScript och CSS och måste underhålla din egen kod.  
  • Anpassade filer kan komma i konflikt med framtida ändringar i Canvas DOM (t.ex.: elementsklassnamn eller HTML-struktur) och stöds därför inte. Instructure frånsäger sig allt ansvar för eventuella ändringar som gjorts i dina anpassade åsidosättningsfiler.
  • Du är ansvarig för att granska riktlinjer för tillgänglighet för webbinnehåll för att säkerställa att dina filer uppfyller alla test för webbtillgänglighet eller andra överensstämmelsestandarder som kan krävas i din jurisdiktion. Du är ansvarig för att göra dina ändringar tillgängliga för skärmsläsare, användare med textkontrast och färgkontrastbehov och använder sig av High Contrast Styles som en användarfunktionsinställning.
  • När du experimenterar med anpassad varumärkning, bekräfta alltid dina ändringar i ditt lärosätes betamiljö eller testmiljö.

 

Anteckningar:

  • Temaredigeraren är inte tillgänglig i gratis för lärare-konton.
  • Om du är en underkontoadministratör och temalänken inte visas i Kontonavigering har inte teman aktiverats för underkonton. Om fliken CSS/JS-uppladdning inte visas har inte filuppladdningar aktiverats för underkonton.

Öppna konto

Öppna konto

I den globala navigeringen, klicka på länken Administratör (Admin) [1], och klicka sedan på namnet på kontot [2].

Öppna teman

Öppna Temaredigeraren (Theme Editor)

I Kontonavigering (Account Navigation), klicka på länken Teman (Themes).

Obs! Om teman för underkonton har aktiverats har varje underkonto även en länk för Teman (Themes). Om du vill öppna Temaredigeraren för ett underkonto, klickar du på länken Underkonton (Sub-Accounts) för att lokalisera och öppna underkontot, klicka sedan på underkontots länk Teman (Themes).

Öppna temamall

Om du inte har ett Canvas-tema för ditt konto, använd en mall för att skapa ett nytt tema. Du kan välja mellan en standard Canvas-mall, en minimalistisk mall och en universitetsmall. Om din CSM har aktiverat inställningen av K12-funktionen, visas K12-teman också som mallar.

För att skapa ett nytt tema, sväva över en mall och klicka på knappen Öppna i Temaredigeraren (Open in Theme Editor) [1], eller klicka på knappen Lägg till tema (Add Theme) [2] och välj en mall från listan.

Öppna sparade teman

Öppna sparade teman

Om du tidigare skapat och sparat ett tema kan du när som helst redigera sparade teman. Sparade teman visas i sektionen Mina teman. För att öppna ett sparat tema, sväva över temats namn och klicka på knappen Öppna i Temaredigeraren (Open in Theme Editor) [1].

Om du vill skapa ett nytt tema baserat på ett sparat tema klickar du på knappen Lägg till tema (Add Theme) [2] och väljer namnet på det sparade temat i listan [3]. Med det här alternativet kan du undvika att skriva över ditt tidigare sparade tema.

Öppna fliken Ladda upp (Upload)

Öppna fliken Ladda upp (Upload)

I sidofältet i Temaredigeraren klickar du på fliken Ladda upp (Upload).

Ladda upp anpassade filer

Ladda upp anpassade CSS/JavaScript-filer

För att ladda upp filer till Canvas-programmet, lokalisera filrubrikerna CSS/JavaScript[1]. Om du vill ladda upp filer för användarinnehåll i Canvas mobil och tredjepartsappar, lokaliserar du Mobilapp-filrubrikerna CSS-filen/JavaScript [2].

Leta reda på filtypen du vill ladda upp och klicka på knappen Välj (Select) [3], och sök sedan filen på din dator.

Leta upp ytterligare filer för uppladdning, om det behövs.

Förhandsgranska tema

Förhandsgranska tema

För att förhandsgranska ditt tema, klicka på knappen Förhandsgranska ändringar (Preview Your Changes).

Canvas kommer därefter att skapa en förhandsgranskning av komponenterna baserad på dina uppladdade filer.

Hantera filer

Hantera filer

För att hantera dina filer, klicka på Uppladdningsfliken (Upload) igen [1].

För att ta bort och ladda upp en ny fil, klicka på ikonen Ta bort (Remove) [2]. Du kan göra ytterligare ändringar och ladda upp din reviderade fil.

För att se koden för din fil, klicka på länken Visa fil (View File) [3]. Eftersom filen är sparad direkt i Canvas kan du använda den här länken när du vill ladda ner filen.

Spara tema

Spara tema

När du är nöjd med dina ändringar för mallen kan du spara ditt tema genom att klicka på knappen Spara tema (Save Theme).

Skapa namn för temat

Skapa namn för temat

Om du ändrade ett tema från en mall skapar Temaredigeraren en kopia av temat. Mallar kan inte redigeras direkt. I fältet temanamn [1] anger du ett namn för ditt tema. Klicka på knappen Spara tema (Save Theme) [2].

Obs! Om du redigerade ett tidigare sparat tema skrivs temat över den föregående versionen av temat och använder samma temanamn.

Använd temanamn

Använd temanamn

Om du vill tillämpa ditt tema på ditt konto klickar du på knappen för att använda tema (Apply theme) [1].

För att lämna temat och återgå till Tema-sidan, klicka på knappen Avsluta (Exit) [2]. Du kan när som helst öppna temat och tillämpa det på ditt konto.

Obs! Om ditt konto tillåter att underkonton anpassar sina egna teman gäller eventuella ändringar du gjort även ner till associerade underkonton. Canvas visar statusen för uppdateringar i Temaredigeraren. När processen för varje underkonto är klar försvinner underkontot från förloppsfönstret. När alla underkonton har uppdaterats omdirigerar Temaredigeraren tillbaka till sidan Teman.