Gestalten Sie Ihre Learn365-Lerninhalte mit externem CSS

Der Texteditor in Learn365 gibt Ihnen die Freiheit, für Lernende bestimmte Inhalte mit einer Vielzahl von Optionen zu gestalten und zu formatieren.

Sie können Inhalte, die im Inhaltseditor erstellt wurden, gestalten, indem Sie Stile direkt in den Quellcode einfügen, wie in diesem Artikel gezeigt wird. Das Hinzufügen von Stilen über den Quellcode wirkt sich nur auf die Inhalte aus, auf die Sie sie anwenden.

Wenn Sie dasselbe Styling auf mehrere Module und Kurse anwenden möchten, z. B. die Hintergrundfarbe, Ihr Markenlogo oder andere Branding-Elemente, ist es einfacher, ein externes Stylesheet-Dokument zu verwenden.

Um ein externes Stylesheet-Dokument zu verwenden, müssen Sie eine CSS-Datei mit den gewünschten Stilcodes erstellen und die CSS-Datei innerhalb derselben Domain speichern.

Sie können sie in einem SharePoint-Ordner oder an einem anderen Online-Ort ablegen, an dem Sie Dateien hochladen und hosten können. Ihre Lernenden müssen über „Anzeigen“-Zugriff auf den Dateiort verfügen, da die CSS-Datei jedes Mal verwendet wird, wenn ein Kurs aufgerufen wird.

Schritt #1

Beginnen Sie damit, eine CSS-Datei zu erstellen. Sie können fortgeschrittene Programmieranwendungen verwenden, oder Sie können ein einfaches Notebook oder Ähnliches verwenden. Stellen Sie sicher, dass Sie sie als Dateityp .css speichern.

Wenn Sie eine CSS-Datei erstellt und an einem geeigneten Ort abgelegt haben, auf den Lernende Zugriff haben, ist der nächste Schritt, sie in den Inhaltseditor zu integrieren.

In diesem Beispiel wurde eine Datei mit dem Namen style_demo.css erstellt und in einem SharePoint-Ordner abgelegt, von wo aus sie gelesen werden kann.

Schritt #2

Öffnen oder erstellen Sie ein Lernmodul und fügen Sie einen Inhaltseditor hinzu.

Wählen Sie das Symbol Quellcode aus, um den Quellcode-Editor zu öffnen.

Schritt #3

Im Bereich Quellcode können Sie die CSS-Datei mit diesem Code hinzufügen.

<style>
@import url('IHRE VERKNÜPFUNG ZUR CSS-DATEI');
</style>

Schritt #4

Anschließend können Sie mit dem Schreiben Ihres HTML-Codes beginnen und auf die in der hinzugefügten CSS-Datei definierten Formatvorlagen verweisen.

Dies ist der Code, der im Beispiel verwendet wird:

 

CSS

@charset "utf-8";
/* CSS-Dokument */
.description-content {
    background-color: #fff;
    background-image: linear-gradient(#ececff, #fff);
    margin: 0;
    padding: 0;
    max-width: 100%;
}
.topbar {
    color: #000;
    text-align: left;
    padding: 20px;
}
.logo_compafi {
    height: 75px;
    vertical-align: middle;
    content: url("LINK ZU IHREM LOGO");
}
.Titel {
    display: inline-block;
    margin-left: 10px;
    font-size: 28px;
    font-weight: bolder;
    vertical-align: middle;
}
.ceo_byline{
	font-style: italic; 
	font-weight: 100; 
	font-size: 18;
}
.content {
    text-align: left;
    padding: 20px;
}
.content p {
    font-size: 18px;
    margin: 20px 0;
}
.content img {
    max-width: 100%;
    height: auto;
    border-radius: 20px;
}
.content iframe {
    border-radius: 20px;
}
.endQuote {
    text-align: center;
    padding: 20px;
}
.endQuote p {
    font-size: 22px;
    font-weight: bolder;
    margin: 20px 0;
}
.endQuote img {
    max-width: 70px;
}
hr.new {
    border-top: 1px dashed #4f4fff;
}

  

HTML

<style>
@import url('IHRE VERKNÜPFUNG ZUR CSS-DATEI');
</style>

<div class="description-content">
<div class="topbar"><img class="logo_compafi" alt="Compafi Logo">
<div class="Titel">Willkommen bei Compafi</div>
</div>
<hr class="new">
<div class="content">
<p><b>Ein herzliches Willkommen von unserem CEO</b><br><br>Ich möchte Sie ganz herzlich im Learn365-Team willkommen heißen.<br><br>Wir sind eine vielfältige Gruppe von Menschen jeden Alters und Hintergrunds, verteilt auf der ganzen Welt, die gemeinsam an einer gemeinsamen Mission arbeiten: Organisationen dabei zu unterstützen, Menschen durch Lernen zu stärken. Diese Mission ist das Band, das uns alle zusammenhält.</p>
<div style="padding: 56.25% 0 0 0; position: relative;"><iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://player.vimeo.com/video/894110804?h=cf9344762e&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" title="Compafi_welcome3_2"></iframe></div>
<script src="https://player.vimeo.com/api/player.js" type="text/javascript"></script>
</div>
<div class="endQuote">
<p>Willkommen im Team</p>
<p class="ceo_byline">CEO, Kay Bradelle</p>
<img src="https://assets-usa.mkt.dynamics.com/9c949386-c0e0-4279-9d35-d0027dc8c8f2/digitalassets/images/8fcf2ab0-3273-ee11-9ae7-000d3a99892e?ts=638338340141222402" alt="Daumen hoch Symbol"></div>
</div>

Jetzt ist es ganz einfach, das gleiche Branding auf mehrere Kurse und Kataloge anzuwenden. Wenn Sie jemals Änderungen an Ihrem Branding vornehmen müssen, lassen sich in der CSS gestaltete Farben und Inhalte schnell und einfach ersetzen.
Jede Änderung an dieser Datei wirkt sich auf alle Elemente aus, auf die diese Datei angewendet wird.

Haftungsausschluss: Learn365 ist nicht für die Programmierung für Kund*innen verantwortlich. Bitte verwenden Sie diese Anleitung als Tutorial für die Anwendung Ihres eigenen Codes. Learn365 ist auch nicht für fehlerhafte Programmierarbeiten verantwortlich.