Von Hause aus lässt Learnpress leider nicht viele Gestaltungsmöglichkeiten der Kursübersichten zu. Aus diesem Grund stelle ich dir verschiedene Codes zur Verfügung, mit denen du u.a. unwichtige Informationen ausblenden und auch andere Einstellungen vornehmen kannst.
Bitte beachte, dass sich der Code ne nach gewählter Ansicht (Grid- oder Listenansicht) leicht unterscheiden kann. Dies habe ich dann entsprechend vermerkt.
Sollte dir eine Anpassungsmöglichkeit fehlen, dann kontaktiere mich mit deinen Wünschen, damit ich diese hier noch ergänzen kann.
Und solltest du generelle Hinweise zur Verwendung der Codes benötigen, dann schaue dir zunächst das Video im Beitrag Learnpress – Darstellung an deine Website anpassen an.
Inhalt
Namen des Dozenten rausnehmen
Code
/* Learnpress-Kursübersicht - Name Dozent rausnehmen */
.course-instructor {
display: none !important;
}
Anzahl Teilnehmer nicht anzeigen
Code
/* Learnpress-Kursübersicht - Anzahl teilnehmer ausblenden */
.meta-item.meta-item-student {
display: none !important;
}
Anzahl Lektionen und Quiz-Aufgaben nicht anzeigen
Code
/* Learnpress-Kursübersicht - Anzahl Lektionen und Quiz ausblenden */
.meta-item.meta-item-lesson {
display: none !important;
}
.meta-item.meta-item-quiz {
display: none !important;
}
Stufe nicht anzeigen
Code
/* Learnpress-Kursübersicht - Stufe ausblenden */
.meta-item.meta-item-level {
display: none !important;
}
Schriftgröße Kurstitel anpassen (Listenansicht)
Code
Der Code umfasst Einstellungsmöglichkeiten für große Bildschirme, Tablets und Handys. Passe die „px“-Werte an deine Wünsche an und teste es anschließend.
/* Learnpress-Kursübersicht - Schriftgröße Kurstitel */
/* Für Handys */
.learn-press-courses[data-layout=list] .course-title {
font-size: 16px !important;
}
/* Für Tablets */
@media only screen and (min-device-width: 600px) {
.learn-press-courses[data-layout=list] .course-title {
font-size: 18px !important;
}
}
/* Für große Bildschirme */
@media only screen and (min-width: 1024px) {
.learn-press-courses[data-layout=list] .course-title {
font-size: 20px !important;
}
}
Schriftgröße Kurstitel anpassen (Grid-Ansicht)
Code
Der Code umfasst Einstellungsmöglichkeiten für große Bildschirme, Tablets und Handys. Passe die „px“-Werte an deine Wünsche an und teste es anschließend.
/* Learnpress-Kursübersicht - Schriftgröße Kurstitel */
/* Für Handys */
.learn-press-courses[data-layout=grid] .course-content .course-title {
font-size: 16px !important;
}
/* Für Tablets */
@media only screen and (min-device-width: 600px) {
.learn-press-courses[data-layout=grid] .course-content .course-title {
font-size: 18px !important;
}
}
/* Für große Bildschirme */
@media only screen and (min-width: 1024px) {
.learn-press-courses[data-layout=grid] .course-content .course-title {
font-size: 20px !important;
}
}
"Kostenlos" - Schriftdicke und Schriftfarbe anpassen
Code
Tausche die „600“ durch einen anderen Wert (bspw. 400 oder 500), um die Schriftdicke zu beeinflussen. Den Farbcode kannst du durch eine eigene Farbe ersetzen. Falls du dir eine Farbe aussuchen möchtest, nutze einen HTML Color Picker.
Der Code ist für die Listen- und für die Grid-Ansicht identisch.
/* Learnpress-Kursübersicht - Kostenlos anpassen */
.free {
font-weight: 600 !important;
color: #870940 !important;
}
Farbliche Abhebung der Kurse (Listenansicht)
Diese Code ermöglicht dir, deine Listenansicht etwas hübscher zu gestalten, indem deine Kurse eine Hintergrundfarbe erhalten und die Ecken leicht abgerundet werden.
Der Code ist so gestaltet, dass er nur Auswirkungen auf die Listenansicht hat. Die Grid-Ansicht bleibt davon unberührt.
Code
Passe den Farbcode hinter „background-color“ an, um die Hintergrundfarbe zu ändern.
Um die Farbe des dünnen Rahmens zu ändern, passe den Farbcode hinter „border:“ an (ab der #)
/* Learnpress-Kursübersicht - Farblicher Hintergrund Listenansicht */
.learn-press-courses[data-layout=list] li.course {
background-color: #f7f7f7 !important;
padding-bottom: 0px !important;
padding-right: 30px !important;
border-radius: 15px !important;
border-bottom: 0px !important;
border: 1px solid #ebe8e8 !important;
}
.learn-press-courses[data-layout=list] .course-content {
padding: 20px !important;
}
.learn-press-courses[data-layout=list] img.attachment-500x300.size-500x300.wp-post-image {
border-radius: 15px 0 0 15px !important;
}
Farbliche Abhebung der Kurse (Grid-Ansicht)
Diese Code ermöglicht dir, deine Grid-Ansicht etwas hübscher zu gestalten, indem deine Kurse eine Hintergrundfarbe erhalten und die Ecken leicht abgerundet werden.
Der Code ist so gestaltet, dass er nur Auswirkungen auf die Grid-Ansicht hat. Die Listen-Ansicht bleibt davon unberührt.
Code
Passe den Farbcode hinter „background-color“ an, um die Hintergrundfarbe zu ändern.
Um die Farbe des dünnen Rahmens zu ändern, passe den Farbcode hinter „border:“ an (ab der #)
/* Learnpress-Kursübersicht - Farblicher Hintergrund Gridansichtnsicht */
.learn-press-courses[data-layout=grid] .course-item {
background-color: #f7f7f7 !important;
border-radius: 15px !important;
border: 1px solid #ebe8e8 !important;
}
.learn-press-courses[data-layout=grid] img.attachment-500x300.size-500x300.wp-post-image {
border-radius: 15px 15px 0 0 !important;
}
