usefull hints
Completion requirements
Session: Moodle in Unternehmen
Sessiongeber: Kai Lorenz, Akademie für Hörakustik
Die Akademie ist ein Fort- und Weiterbildner für das Hörakustik-Handwerk und uneigenständige Tochter der Bundesinnung Hörakustik. Wir betreiben seit über 20 Jahren ein moodle, welches eher als Dateiablage genutzt wurde, seit einigen Jahren aber vermehrt - gerade im Hinblick auf Seminare und Workshops - auch als "echtes" Lernmanagementtool verwendet wird.
Wir haben ein "relatives Standard-Moodle" mit Admin-Rechten, aber keinen Schreibrechten auf dem Server. Es wird bei oncampus gehostet, der Kontakt zur Akademie ist gut und wir bekommen alle Plugins installiert, die wir wollen - aber nicht sofort. Damit war mir wichtig, nicht X Plugins zum Ausprobieren zu installieren, sondern möglichst viel "selbst" zu lösen.
Daher habe ich ein paar Plugins für Kurs-Layouts installiert (One-Topic, Grid, ...), mit diesen experimentiert und zusätzliche CSS-Erweiterungen eingebaut, um das Look'n'Feel zu verbessern.
Verwendete Plugins:
One-Topic Format: https://moodle.org/plugins/format_onetopic
H5P Filter: https://moodle.org/plugins/filter_h5p
Atto Styles (Moodle 4.5 im Einsatz) https://moodle.org/plugins/atto_styles
Fortschrittsbalken: https://moodle.org/plugins/block_completion_progress
quasi ungenutzt: Reengagement (Erinnerungsfunktion) https://moodle.org/plugins/mod_reengagement
Universelles Textfeld https://moodle.org/plugins/mod_unilabel
Badge Designer: https://badge.design/
Gamification
Vorschlag: Pulse(https://moodle.org/plugins/mod_pulse) (v. BDecent) als Erinnerungsfunktion. Kostenpflichtig, aber "vehementer".
Badges für alle Kurse steigern die Motivation
Moodlebande
Die MoodleBande trifft sich jeden Donnerstag um 20 Uhr in einem BBB. Mehr unter https://bildung.social/@Bot_Moodlebande
Moodlebande: MoodleMeeting in https://bbb2.ccita.de/b/kat-ksj-l1v-o5d
Startseite - bildung.social
Plugin für Gamification Level up:
Blur Mode
Skript zum Blur Mode:
Textfeld im Block über "Block hinzufügen" erstellen
Skript-Text in den HTML-Modus einfügen.
(Anleitung über GitHub folgt noch)
<!-- This is a checkbox that supports the event onchange.
So if the checkbox changes the function switchBlurMode() is called.
-->
<div>
<input type="checkbox" id="blur" value="blurmode" onchange="switchBlurMode()"> Blur Mode
</div>
<!-- This is a div that show a text 'blur inactive' as an indicator for the actual setting. If blur is active than this text is blured an not readable. If blur is inactive the text is NOT blured and readable.
-->
<div id="blurme" class="alert alert-danger" role="alert">
blur inactive
</div>
<script>
/* This function switches the value of blurmode in the local storage depending on the state of the checkbox.
Also the function changeBlurMode is called. */
function switchBlurMode() {
if (document.querySelector("#blur").checked) {
localStorage.setItem("blurmode", true);
} else {
localStorage.setItem("blurmode", false);
}
changeBlurMode();
}
function setBlurMode() {
if (localStorage.getItem("blurmode") == "true") {
document.querySelector("#blur").checked = true;
} else if (localStorage.getItem("blurmode") == "false") {
document.querySelector("#blur").checked = false;
}
}
window.onload = (event) => {
setBlurMode();
};
</script>
<script>
function changeBlurMode() {
// This is the list of selectors that should be controlled by the blurmode controller.
let selector = ":is(\n" +
"#blurme,\n" +
"#reportuser,\n" +
"#menuuser,\n" +
".reportloglive,\n" +
".author-info,\n" +
".useremail,\n" +
".col-fullname,\n" +
"header.header .mr-2, header.header .mb-3,\n" +
"#page-admin-user #page-content #users tbody,\n" +
"#page-admin-user #page-content #users tbody a[href*=\"user/view\"],\n" +
"#page-admin-user #page-content #users tbody .c1,\n" +
"#page-admin-user #page-content .roleholder,\n" +
"#page-course-view-participants #page-content #participants tbody a[href*=\"user/view\"],\n" +
"#page-course-view-participants #page-content #participants tbody .c2,\n" +
"#page-course-view-participants #page-content #participants tbody .c6,\n" +
"#page-grade-report-singleview-index .userinitials,\n" +
"#page-grade-report-singleview-index a[href*=\"user/view\"],\n" +
"#page-grade-report-singleview-index .selected-option-text,\n" +
"#page-grade-report-singleview-index .searchresultitemscontainer,\n" +
"#page-grade-report-overview-index .user-heading .userinitials,\n" +
"#page-grade-report-overview-index .user-heading a[href*=\"user/view\"],\n" +
"#page-grade-report-overview-index #graded_users_selector .custom-select.singleselect,\n" +
"#page-grade-report-user-index .search-widget .dropdown-menu .searchresultscontainer,\n" +
"#page-grade-report-user-index .user-heading .userinitials,\n" +
"#page-grade-report-user-index .user-heading a[href*=\"user/view\"],\n" +
"#page-grade-report-user-index .selected-option-text,\n" +
"#page-grade-report-user-index .searchresultitemscontainer,\n" +
"#page-grade-report-user-index .userinitials,\n" +
"tbody .userrow .username,\n" +
"tbody .userrow .userfield.useridnumber,\n" +
"tbody .userrow .useremail\n" +
"tbody .author .d-flex \n" +
")";
let blurmode = '';
page = document.createElement('style');
if (localStorage.getItem("blurmode") == "true") {
blurmode = " {filter: blur(10px);}";
} else if (localStorage.getItem("blurmode") == "false") {
blurmode = " {filter: blur(0px);}";
}
page.innerHTML = selector + blurmode;
document.body.appendChild(page);
}
</script>
<script>
setBlurMode();
changeBlurMode();
</script>
Änderungen am 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 {
background-size: cover;
background-position: center;
transition: background-image 0.5s ease;
background-image: var(--normal-image);
aspect-ratio: auto; /* sorgt dafür, dass Höhe nach Inhalt kommt */
}
.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;
}
/* 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: 18px;
}
.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;
margin-bottom: 1em;
}
.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;
margin-bottom: 1em;
}
.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;
margin-bottom: 1em;
}
.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;
margin-bottom: 1em;
}
.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;
margin-bottom: 1em;
}
.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;
margin-bottom: 1em;
}
.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;
margin-bottom: 1em;
}
.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;
margin-bottom: 1em;
}
.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;
}