*Ich mach Moodle, was machst du?
*Vorab
Ich arbeite in der Akademie für Hörakustik an Moodle-Kursen. Dabei habe ich vor gut einem Jahr ein System übernommen, was schlicht als PDF-Bereitstellungs-Maschine fungierte.
Heute nutzen wir Moodle oft immer noch als PDF-Schleuder, aber: Da tut sich was!
Bei Antritt habe ich einen Schwung an Plugins installieren lassen, um ein besseres Look’n’Feel zu erzeugen. Mittlerweile sind da einige Plugins dazugekommen, ein paar nutze ich gar nicht mehr groß …
Mein Ziel ist es aber in der Regel, die Dinge, die ich implementiere, nicht nur selbst anwenden zu können: Auf lange Sicht sollen meine Dozierenden selbst in der Lage sein, die Formatierungen und Plugins, die ich hinzugefügt habe, zu verwenden. Doch dies erfordert, dass sie niedrigschwellig zugänglich sind. Und möglichst nicht erst einmal eine Kursbelegung von Selfhtml benötigen …
Ihr könnt mich gerne anschreiben, wenn ihr Dinge, die ich erläutere, noch einmal nachfragen wollt.
*Moodle-Bande
Wer „regelmäßig Problemchen“ mit Moodle findet (und tiefer aufbohrt und noch mehr davon findet), der kann auch gerne jeden Donnerstag Abend um 20 Uhr zur MoodleBande kommen. Der lose Zusammenschluss von Moodle-Enthusiast:innen trifft sich in einem BBB und erörtert bzw. löst die Ideen und Probleme der Teilnehmenden. Den Link findet man auf Mastodon, Stand 2024 in der Regel bei https://bildung.social/@FrauSensaZjohn
*Plugins
Hier eine Übersicht:
- Onetopic-Format, bietet zwei hierarchische Ebenen (Ober- und Unterthemen)
- Kachel-Format, stellt Kapitel als Kacheln dar. Schönere Darstellung des „klassischen“ Kursformats.
- Universelles Textfeld: Kann auch Bildergalerien, Grids, Ausklapp-Texte … sehr cool, um Inhalte anders darzustellen.
- Der Filter sorgt dafür, dass H5P-Inhalte direkt eingebettet angezeigt werden. Der dazu gehörige Shortcode ist leicht zu verstehen (und auch für Dozierende/Lehrkräfte ohne HTML-Kenntnisse umsetzbar)
- Ein Fortschrittsbalken (Block-Leiste), der den TN anzeigt, was sie schon gemacht haben. Zeigt ALLE (für die TN sichtbaren) Aktivitäten an, auch Textfelder, wenn diese „erledigbar“ sind.
*Blur Mode
Manchmal ist es cool, den Kurs anderen TN zu zeigen. Leider werden aber z. B. beim Ansehen der Nutzerlisten, Bewertungen etc. die Namen angezeigt. Dafür kann man den Blur Mode aktivieren. Dieser funkioniert über ein lokal laufendes Skript, wird in der Blockleiste angelegt als Textfeld und dort so konfiguriert, dass nur Lehrkräfte die Rechte haben, dieses zu sehen.
Der Block lässt sich dann in jedem Kurs einrichten, wo man ihn braucht.
Den Code habe ich hierher:
*CSS-Änderungen
Seit Moodle 4.x wird der „nutzbare“ Bildschirmbereich auf 50% gesetzt. Folgender Code (in Raw Initial CSS eingesetzt) ändert das auf eine einstellbare Prozentzahl:
$course-content-maxwidth: 75% !default;
Darüber hinaus habe ich ein paar Funktionen eingebaut, die ich vermisst habe. Dazu gehören diverse Infoboxen (mit eingearbeitetem Symbol), Bilder auf Klick vergrößert darzustellen, Bilder bei Mauskontakt zu „verändern“ (hier wird einfach ein neues im Hintergrund geladen …), aber auch banale Dinge wie automatisch formatierte HTML-Tabellen oder mehr Abstand vor Auflistungen. Diese Dinge zeige ich im Kurs, den Code gibt es weiter unten im Abschnitt Raw SCSS.
Die Inhalte müssen in das verwendete Design in „advanced settings“ eingetragen werden.
Für die Implementierung im Kurs braucht man leider ein paar HTML-Kenntnisse. Ich füge hier mal die entsprechend verwendeten HTML-Snippets ein:
*Informationskästen
- <div class=“note“><p>Text</p></div>
- (es gibt neben „note“ noch diverse andere Klassen, die ich vorführe. Diese sind unten im Raw SCSS auch definiert …)
*Bild auf Knopfdruck vergrößern
- <a href=“#_“ class=“lightbox“ id=“img1″>
- Hier wird im Endeffekt auf das Bild ein Link gesetzt, der das Bild im gleichen Fenster öffnet. Die Einstellungen im Raw SCSS sorgen für eine „Ausgrauung“ des Hintergrunds.
*Bild mit anderem Bild bei Mauskontakt überlagern
- <div class=“img-hover“ style=“
- –normal-image: url(‚BildURL1‘);
- –hover-image: url(‚BildURL2‘);
- Der Code ersetzt Bild URL1 bei Mauskontakt mit Bild URL2. Bei Geräten ohne Maus wird nach Einstellung im Raw SCSS nur Bild URL2 angezeigt. Das kann man natürlich auch wechseln. Unsere Teilnehmenden werden darauf hingewiesen, dass eine korrekte Darstellung nur im Browser bei Desktop PCs oder Laptops funktioniert …
*„kleinere“ eingefügte Klassen
- Es gibt ein paar kleinere Dinge, so habe ich eine
- erstellt, die abwechselnd die Zeilen schwarz und weiß und die erste Zeile als Überschrift fett formatiert.
- <ol class=“liste-mit-klammer“>
- , die eine a) Liste erstellt. Hintergrund: Wir haben Gesetzestexte, die wir zitieren und diesen Listenstil haben.
*Raw SCSS:
/* fügt eine div-Klasse hinzu, die ein dargestelltes Bild (cover) beim Rüberfahren mit der Maus (hover) in ein anderes Bild wandelt. */
.img-hover {
width: 300px;
height: 200px;
background-size: cover;
background-position: center;
transition: background-image 0.5s ease;
background-image: var(–normal-image);
}
.img-hover:hover{
background-image: var(–hover-image);
}
/* Deaktivierung der Hover-Funktion bei Smartphones */
@media (hover: none) and (pointer: coarse) {
.image-hover:hover {
background-image: var(–normal-image);
}
}
/* Hintergrundfarbe der Tabs beim Hovern ändern */
.nav-tabs > li > a:hover {
/* background-color: #1e5496 !important; */
filter:brightness(90%);
}
/* Mehr Abstand zum Rand vor Aufzählungen */
ul, ol {
padding-left:2em;
margin-bottom:1em;
}
/* Tabelle mit Rahmen und abwechselnd weißen und grauen Zeilen. */
.swtable {
border-collapse: collapse;
}
.swtable td:empty {
background-color: none;
border: none;
}
.swtable th, .swtable td {
border: 1px solid black;
padding: 5px;
}
.swtable tr:first-child {
font-weight: bold;
background-color: transparent;
}
.swtable tr:nth-child(2) {
background-color: transparent;
}
.swtable tr:nth-child(odd):not(:first-child) {
background-color: #e6e6e6;
}
/* Fügt für geordnete Listen <ol> den Typ a) hinzu. */
.liste-mit-klammer {
counter-reset: alpha-counter;
list-style-type:none;
padding-left: 5px;
}
.liste-mit-klammer > li {
position: relative;
padding-left: 15px;
}
.liste-mit-klammer > li::before {
counter-increment: alpha-counter;
content: counter(alpha-counter, lower-alpha) „) „;
position: absolute;
left: 0;
}
/* Dieser Abschnitt sorgt dafür, dass bei One-Tab-Kursformat der nicht ausgewählte Bereich leicht transparent wird. */
.nav-link {
opacity: .8;
}
/* Dieser Abschnitt sorgt dafür, dass bei One-Tab-Kursformat der ausgewählte Bereich einen hervorgehobenen Rahmen hat.
.nav-tabs .nav-link.active {
border-width: 3px;
border-style: groove;
opacity: 1;
}
*/
/* Bilder auf Klick vergrößern */
.lightbox{
display: none;
position: fixed;
z-index: 999;
text-align: center;
top: 135px; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.6);
}
.lightbox img {
max-width: 90%;
max-height: 80%;
margin-top: 0%;
}
.lightbox:target {
outline: none;
display: block;
overflow-y: scroll;
overflow-x: scroll;
}
/* Bootstrap-Icons Einbindung */
.custom-icon-box::before {
content: var(–icon);
float: left;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: „bootstrap-icons“;
width: 3rem;
height: 3rem;
color: #fff;
font-size: 2rem;
margin-top: 0;
background: var(–color);
transform: translate(-1.25rem,-0.25rem);
}
/* Neue Div-Klassen für Infokästen. Diese Infokästen lassen sich in Textfeldern per entsprechendem HTML-Befehl einbinden. */
/* größere Überschrift in den div-Kästen */
div h3 { font-size: 1.25em; }
div h4 { font-size: 1.2em; }
div h5 { font-size: 1.1em; }
/* Farb-Definitionen für die Kästen */
/* weinroter Achtung-Kasten */
$achtung-background-color: #5B0A13;
$achtung-border-color: #DC182F;
$achtung-link-color: #F7B6BD;
$achtung-link-hover-color: #F5A3AB;
$achtung-text-color: white;
/* blauer Notiz-Kasten */
$note-background-color: #564787;
$note-border-color: #3C315E;
$note-link-color: #c4bcdc;
$note-link-hover-color: #ADA1CE;
$note-text-color: white;
/* oranger Frage-Kasten */
$question-background-color: #fb8500;
$question-border-color: #e07800;
$question-link-color: #ffe2c2;
$question-link-hover-color: #ffce99;
$question-text-color: white;
/* Lila Externer-Link-Kasten */
$extern-background-color: #cc0058;
$extern-border-color: #a30047;
$extern-link-color: #ffc2dc;
$extern-link-hover-color: #ff85ba;
$extern-text-color: white;
/* Grüner Zeit-Block für Kalendereintragungen */
$time-background-color: #008000;
$time-border-color: #00b800;
$time-link-color: #d6ffd6;
$time-link-hover-color: #c2ffc2;
$time-text-color: white;
/* Mintgrüner Formel-Block */
$formula-background-color: #abc4b0;
$formula-border-color: #88aa8f;
$formula-link-color: #293d2e;
$formula-link-hover-color: #18251c;
$formula-text-color: black;
/* Persischblauer Paragraphen-Kasten */
$paragraph-background-color: #d4a301;
$paragraph-border-color: #15218e;
$paragraph-link-color: #b8bef4;
$paragraph-link-hover-color: #a7aef1;
$paragraph-text-color: white;
/* postgelber Exkurs-Kasten */
$excourse-background-color: #1d2ec3;
$excourse-border-color: #f4bb01;
$excourse-link-color: #3d2f00;
$excourse-link-hover-color: #291f00;
$excourse-text-color: black;
/* weinroter Achtung-Kasten */
div.achtung {
background-color: $achtung-background-color;
background-image: url(„data:image/svg+xml,<svg width=’48‘ height=’48‘ viewBox=’0 0 20 20′ fill=’white‘ xmlns=‘http://www.w3.org/2000/svg‚><path fill-rule=’evenodd‘ d=’M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2′ clip-rule=’evenodd’/></svg>“); background-position: 9px 9px;
background-repeat: no-repeat;
border: solid 1px $achtung-border-color;
border-radius: 6px;
padding: 15px 60px;
line-height: 18px;
overflow: hidden;
color: $achtung-text-color;
}
.achtung a {
color: $achtung-link-color;
}
.achtung a:hover {
color: $achtung-link-hover-color;
}
.achtung h3, .achtung h4, .achtung h5 {
border-left: none !important;
padding-left: 0 !important;
color: $achtung-text-color !important;
}
/* Dunkelblauer Notiz-Kasten */
div.note {
background-color: $note-background-color;
background-image: url(„data:image/svg+xml,<svg width=’48‘ height=’48‘ viewBox=’0 0 20 20′ fill=’white‘ xmlns=‘http://www.w3.org/2000/svg‚><path fill-rule=’evenodd‘ d=’M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z‘ clip-rule=’evenodd’/></svg>“); background-position: 9px 9px;
background-repeat: no-repeat;
border: solid 1px $note-border-color;
border-radius: 6px;
line-height: 18px;
overflow: hidden;
padding: 15px 60px;
color: $note-text-color;
}
.note a {
color: $note-link-color;
}
.note a:hover {
color: $note-link-hover-color;
}
.note h3, .note h4, .note h5 {
border-left: none !important;
padding-left: 0 !important;
color: $note-text-color !important;
}
div.question {
background-color: $question-background-color;
background-image: url(„data:image/svg+xml,<svg width=’48px‘ height=’48px‘ viewBox=’2 0 14 14′ fill=’white‘ xmlns=‘http://www.w3.org/2000/svg‚><path fill-rule=’evenodd‘ d=’M4.475 5.458c-.284 0-.514-.237-.47-.517C4.28 3.24 5.576 2 7.825 2c2.25 0 3.767 1.36 3.767 3.215 0 1.344-.665 2.288-1.79 2.973-1.1.659-1.414 1.118-1.414 2.01v.03a.5.5 0 0 1-.5.5h-.77a.5.5 0 0 1-.5-.495l-.003-.2c-.043-1.221.477-2.001 1.645-2.712 1.03-.632 1.397-1.135 1.397-2.028 0-.979-.758-1.698-1.926-1.698-1.009 0-1.71.529-1.938 1.402-.066.254-.278.461-.54.461h-.777ZM7.496 14c.622 0 1.095-.474 1.095-1.09 0-.618-.473-1.092-1.095-1.092-.606 0-1.087.474-1.087 1.091S6.89 14 7.496 14Z‘ clip-rule=’evenodd’/></svg>“); background-position: 9px 0px;
background-repeat: no-repeat;
border: solid 1px $question-border-color;
border-radius: 6px;
line-height: 18px;
overflow: hidden;
padding: 15px 60px;
color: $question-text-color;
.question a {
color: $question-link-color;
}
}
.question a:hover {
color: $question-link-hover-color;
}
.question h3, .question h4, .question h5 {
border-left: none !important;
padding-left: 0 !important;
color: $question-text-color !important;
}
/* Lila Externer-Link-Kasten */
div.extern {
background-color: #cc0058;
background-image: url(„data:image/svg+xml,<svg width=’48‘ height=’48‘ viewBox=’0 -4 20 20′ fill=’white‘ xmlns=‘http://www.w3.org/2000/svg‚><path fill-rule=’evenodd‘ d=’M7.364 3.5a.5.5 0 0 1 .5-.5H14.5A1.5 1.5 0 0 1 16 4.5v10a1.5 1.5 0 0 1-1.5 1.5h-10A1.5 1.5 0 0 1 3 14.5V7.864a.5.5 0 1 1 1 0V14.5a.5.5 0 0 0 .5.5h10a.5.5 0 0 0 .5-.5v-10a.5.5 0 0 0-.5-.5H7.864a.5.5 0 0 1-.5-.5z‘ clip-rule=’evenodd’/><path fill-rule=’evenodd‘ d=’M0 .5A.5.5 0 0 1 .5 0h5a.5.5 0 0 1 0 1H1.707l8.147 8.146a.5.5 0 0 1-.708.708L1 1.707V5.5a.5.5 0 0 1-1 0v-5z‘ clip-rule=’evenodd’/></svg>“); background-position: 9px 0px;
background-repeat: no-repeat;
border: solid 1px #a30047;
border-radius: 6px;
line-height: 18px;
overflow: hidden;
padding: 15px 60px;
color: white;
}
.extern a {
color: $extern-link-color;
}
.extern a:hover {
color: $extern-link-hover-color;
}
.extern h3, .extern h4, .extern h5 {
border-left: none !important;
padding-left: 0 !important;
color: $extern-text-color !important;
}
/* Grüner Zeit-Block für Kalendereintragungen */
div.time {
background-color: #008000;
background-image: url(„data:image/svg+xml,<svg width=’48‘ height=’48‘ viewBox=’0 -4 20 20′ fill=’white‘ xmlns=‘http://www.w3.org/2000/svg‚><path fill-rule=’evenodd‘ d=’M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM2 2a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H2z‘ clip-rule=’evenodd’/><path fill-rule=’evenodd‘ d=’M2.5 4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5V4zM11 7.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-5 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z‘ clip-rule=’evenodd’/></svg>“); background-position: 9px 0px;
background-repeat: no-repeat;
border: solid 1px #00b800;
border-radius: 6px;
line-height: 18px;
overflow: hidden;
padding: 15px 60px;
color: white;
}
.time a {
color: $time-link-color;
}
.time a:hover {
color: $time-link-hover-color;
}
.time h3, .time h4, .time h5 {
border-left: none !important;
padding-left: 0 !important;
color: $time-text-color !important;
}
/* Mintgrüner Formel-Block */
div.formula {
background-color: #abc4b0;
background-image: url(„data:image/svg+xml,<svg width=’48‘ height=’48‘ viewBox=’0 -4 20 20′ fill=’black‘ xmlns=‘http://www.w3.org/2000/svg‚><path fill-rule=’evenodd‘ d=’M12 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h8zM4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H4z‘ clip-rule=’evenodd’/><path fill-rule=’evenodd‘ d=’M4 2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-2zm0 4a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm0 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm0 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm3-6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm0 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm0 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm3-6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm0 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-4z‘ clip-rule=’evenodd’/></svg>“); background-position: 9px 0px;
background-repeat: no-repeat;
border: solid 1px #88aa8f;
border-radius: 6px;
line-height: 18px;
overflow: hidden;
padding: 15px 60px;
color: black;
}
.formula a {
color: $formula-link-color;
}
.formula a:hover {
color: $formula-link-hover-color;
}
.formula h3, .formula h4, .formula h5 {
border-left: none !important;
padding-left: 0 !important;
color: $formula-text-color !important;
}
/* Persischblauer Paragraphen-Kasten */
div.paragraph {
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
background-color: #1D2EC3;
background-image: url(„data:image/svg+xml,<svg width=’48‘ height=’48‘ viewBox=’0 0 20 20′ fill=’white‘ xmlns=‘http://www.w3.org/2000/svg‚><path fill-rule=’evenodd‘ d=’M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783′ clip-rule=’evenodd’/><text x=’10‘ y=’9′ font-family=’Arial‘ font-size=’8′ fill=’white‘>§</text></svg>“); background-position: 9px 9px;
background-repeat: no-repeat;
border: solid 1px #15218E;
border-radius: 6px;
line-height: 18px;
overflow: hidden;
padding: 15px 60px;
color: white;
}
.paragraph a {
color: $paragraph-link-color;
}
.paragraph a:hover {
color: $paragraph-link-hover-color;
}
.paragraph h3, .paragraph h4, .paragraph h5 {
border-left: none !important;
padding-left: 0 !important;
color: $paragraph-text-color !important;
}
/* postgelber Exkurs-Kasten */
div.excourse{
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
background-color: #d4a301;
background-image: url(„data:image/svg+xml,<svg width=’48‘ height=’48‘ viewBox=’0 0 20 20′ fill=’black‘ xmlns=‘http://www.w3.org/2000/svg‚><path fill-rule=’evenodd‘ d=’M8.5 10c-.276 0-.5-.448-.5-1s.224-1 .5-1 .5.448.5 1-.224 1-.5 1′ clip-rule=’evenodd’/><path fill-rule=’evenodd‘ d=’M10.828.122A.5.5 0 0 1 11 .5V1h.5A1.5 1.5 0 0 1 13 2.5V15h1.5a.5.5 0 0 1 0 1h-13a.5.5 0 0 1 0-1H3V1.5a.5.5 0 0 1 .43-.495l7-1a.5.5 0 0 1 .398.117M11.5 2H11v13h1V2.5a.5.5 0 0 0-.5-.5M4 1.934V15h6V1.077z‘ clip-rule=’evenodd’/></svg>“); background-position: 9px 9px;
background-repeat: no-repeat;
border: solid 1px #f4bb01;
border-radius: 6px;
line-height: 18px;
overflow: hidden;
padding: 15px 60px;
color: black;
}
.excourse a {
color: $excourse-link-color;
}
.excourse a:hover {
color: $excourse-link-hover-color;
}
.excourse h3, .excourse h4, .excourse h5 {
border-left: none !important;
padding-left: 0 !important;
color: $excourse-text-color !important;
}
