WPNews.nl

CSS LearnDash LMS

Learndash is een van de beste, zo niet het beste, WordPress LMS-systeem. Er zijn nog drie andere serieuze deelnemers; LifterLMS, Tutor LMS en Sensei LMS. De CSS-code op deze pagina is alleen voor Learndash!
Wat is een LMS? LMS betekent: Learning Management System. 
Learndash is een plug-in voor WordPress die een website de mogelijkheid geeft om een ​​digitale leerervaring te creëren en presenteren aan de bezoekers. Learndash is volledig compatibel met WooCommerce en meerdere betalingsaanbieders.

CSS Learndash – aanpassen Learndash

CSS-wijzigingen in Learndash.

Hoewel Learndash een uitstekend LMS is, moeten de meeste webbouwers bijna altijd wel enkele aanpassingen doen. Hier is een overzicht van nuttige en leuke CSS-codes voor Learndash. Dit zijn CSS-codes die we zelf toepassen op Learndash installaties en die hun nut hebben bewezen.
De CSS-code hier bevat vaak een kleur. Dit is alleen om ervoor te zorgen dat het Learndash CSS-codevoorbeeld werkt. Je kunt de kleurcode uiteraard vervangen door een andere kleur.

Css codeoverzicht voor Learndash

Learndash les component (onderwerp) met een andere kleur

Deze CSS-code is ideaal als je de lesonderdelen een andere kleur wilt geven in het overzicht van lessen en lesonderdelen.
/* Topic (les onderwerp) andere kleur geven */
.ld-topic-title {
color: #1E90FF !important;
}

Learndash les component (onderwerp) andere lettergrootte

Als je de lesonderdelen een groter (of kleiner) lettertype wilt geven in het overzicht van lessen en lesonderdelen.
/* Topic (les onderwerp) andere font-size*/
.ld-topic-title {
font-size: 16px !important;
}

Learndash les een andere kleur geven

Als je de lessen een andere kleur wil geven in het overzicht van lessen en lesonderdelen.
/* les andere kleur */
.ld-lesson-title {
color: #1E90FF !important;
}

Quiz Learndash Andere kleur

Als je in het overzicht van lessen en lesonderdelen de quizzen een andere kleur wilt geven.
/* Quiz andere kleur geven */
.ld-text ld-primary-color {
color: #1E90FF !important;
}

Uitklap pijl lessen kleur aanpassen

Als je in het overzicht van lessen en lesonderdelen de pijl waarmee je de les uitklapt een andere kleur wilt geven.
/* Pijl les uitklap andere kleur geven */
.ld-icon-arrow-down {
color: #1E90FF !important;
}

Lessen in grote overzicht op pagina opleiding vet (bold)

Als je in het grote overzicht van lessen en lesonderdelen de lessen bold (vet) wilt vertonen.
/* Lessen in grote overzicht op pagina opleiding BOLD */
.ld-item-title {
font-weight: bold !important;
}

Icoon van de quiz in Learndash groter maken

Als je in het grote overzicht van lessen en lesonderdelen het icoon van de quizzen groter (of kleiner) wilt maken.
/* Icoon van de quiz groter maken */
.ld-icon-quiz {
 font-size: 20px !important;
}

Maak de link onder foto profiel user onzichtbaar

Onder het profiel van de user (rechtsboven) staat standaard een link; deze kun je weghalen.
/* MAAKT LINK ONDER FOTO OP PROFIEL ONZICHTBAAR*/
.mt-0  {
 color: #F4F6F6 !important;
}

Verwijderen scrollbalk in linker lijst lessen

Standaard toont Learndash een scrollbalk. Dat kun je met deze code verwijderen.
/* VERWIJDERD DE SCROLLBAR IN LINKER LESSEN LIJST*/
.learndash-wrapper .ld-focus-sidebar-collapsed .ld-focus-sidebar .ld-focus-sidebar-wrapper {
	overflow-y: hidden;
}

Verberg de avatar rechtsboven

Standaard toont Learndash rechtsboven een avatar als de focusmode actief is. De CSS-code voor Learndash verbergt dat.
/* HIDE AVATAR MENU (IN LES)*/
.ld-user-menu .ld-profile-avatar {
    display: none;
}

Zet hamburger menu op plek Avatar

Standaard toont Learndash rechtsboven een avatar. Deze CSS-code voor Learndash zet daar een hamburger menu neer. Dat betreft het Learndash user menu.
/* ZET EEN HAMBURGER MENU OP DE PLEK VAN DE AVATAR*/
.ld-user-menu::before {
    font-family: "Dashicons";
    content: "\f349";
    margin-left: 15px;
    color: red !important;
}

Verberg de breadcrumbs in de Learndash lessen

Standaard toont Learndash de breadcrumbs in de lessen. Met deze CSS-code niet meer.
/* verberg les broodkruimels / breadcrumbs */
.ld-breadcrumbs-segments{
display:none;
}

Pas de code aan naar wens!

Bijna alle code die hier staat kun je uiteraard een andere toepassing geven. Als een CSS snippet (stukje code) een target (class) en bijvoorbeeld een font instructie bevat, kun je het CSS font instructie deel vervangen door display:none; om het geheel te verbergen.
Voorbeeld:
/* Lessen in grote overzicht op pagina opleiding BOLD */
.ld-item-title {font-weight: bold !important;}

wordt dan:
/* Lessen in grote overzicht op pagina opleiding VERBERGEN */
.ld-item-title {display:none;
}

Wil je meer weten over Learndash?

Learndash is een uitstekend Learning Management Systeem. Het is degelijk gebouwd, veelzijdig en volwassen. Zodanig dat het ook gebruikt wordt door grotere bedrijven en universiteiten. Je kunt met Learndash eigenlijk niet de fout ingaan! Wil je meer weten? Bezoek hun website!

Translate »