Online Kurs: Listen- oder Gitter-Ansicht deaktivieren

Standardmäßig kann ein Besucher/Benutzer deiner Social E-Learning Spreadmind Plattform bei der Darstellung deiner Kurs-Übersicht zwischen zwei Ansichten hin und her wechseln: Gitter und Listen Ansicht.

Wie verhalten sich diese Ansichten?

Beide Ansichten sind vollständig responsive, was bedeutet, dass die Darstellung auch für mobile Endgeräte optimiert ist.

Standardmäßig werden die Kurse, in welche ein Benutzer eingeschrieben ist, auch auf dessen Profil unter dem Reiter "Kurse" angezeigt (sofern diese Einstellung nicht explizit deaktiviert wurde). Die Kursseite selbst (= Kurs-Archiv-Seite) zeigt standardmäßig immer alle Kurse an – egal ob der Benutzer Zugriff hat oder nicht. Die Darstellung der Kurse ist auf beiden Seiten identisch.

Gitter Ansicht

Bei der Gitter Ansicht werden die Kurse standardmäßig in der Desktop Ansicht in einem 4-spaltigen Raster dargestellt. Bei mobilen Endgeräten passen sich die Kurs-Boxen entsprechend der verfügbaren Breite des Darstellungsfensters optimal an.

Auf einem Tablet hochkant (ca. ab einer Breite von 820 px und schmaler) springt die Zeile auf ein 2-spaltiges Raster um:

Auf dem Smartphone (ca. ab einer Breite von 480 px und schmaler) werden die Kurse automatisch alle untereinander dargestellt:

Listen Ansicht

In der Listenansicht werden auf dem Desktop sowie auch auf allen Endgeräten die Kurse immer als Liste untereinander dargestellt:

Ansicht deaktivieren

Mit Hilfe eines CSS Codes können wir die Icons auf der Kurs Übersichtseite ansprechen und ausblenden, sodass der Besucher die Ansicht nicht mehr aktivieren kann.

Gitter Ansicht deaktivieren

Kopiere den folgenden CSS Code und füge ihn im Backend unter "Community" > "Theme Optionen" unter "Individuell" beim CSS Abschnitt ein, um das Icon für die Gitter Ansicht auszublenden:

/* do not show grid icon on course overview and not on profile page */
.bb-courses-directory .grid-filters .layout-grid-view {
    display: none;
}

Auswirkung:

Sowohl auf der Kurs Archiv- wie auch auf der Profilseite wird durch den CSS Code das Icon für die Gitter Ansicht ausgeblendet:

Soll das Icon entweder auf der Kurs Archivseite oder nur auf der Profilseite ausgeblendet werden, musst du einen der beiden folgenden CSS Codes verwenden.

CSS Code für Ausblenden des Icons nur auf der Kurs Übersichtseite:

/* do not show grid icon on course overview only */
.post-type-archive-sfwd-courses .bb-courses-directory .grid-filters .layout-grid-view {
    display: none;
}

CSS Code für das Ausblenden des Icons nur auf der Profilseite:

/* do not show grid icon on profil page only */
#bb-learndash_profile .bb-courses-directory .grid-filters .layout-grid-view {
    display: none;
}

Listen Ansicht deaktivieren

Kopiere den folgenden CSS Code und füge ihn im Backend unter "Community" > "Theme Optionen" unter "Individuell" beim CSS Abschnitt ein, um das Icon für die Listen Ansicht auszublenden:

/* do not show list icon on course overview and on profile page */
.bb-courses-directory .grid-filters .layout-list-view {
    display: none;
}
.bb-courses-directory .grid-filters .layout-grid-view {
    border-right: none;
}

Auswirkung:

Sowohl auf der Kurs Archiv- wie auch auf der Profilseite wird durch den CSS Code das Icon für die Gitter Ansicht ausgeblendet:

Soll das Icon entweder auf der Kurs Archivseite oder nur auf der Profilseite ausgeblendet werden, musst du einen der beiden folgenden CSS Codes verwenden.

CSS Code für Ausblenden des Icons nur auf der Kurs Übersichtseite:

/* do not show list icon on course overview only */
.post-type-archive-sfwd-courses .bb-courses-directory .grid-filters .layout-list-view {
    display: none;
}
.post-type-archive-sfwd-courses .bb-courses-directory .grid-filters .layout-grid-view {
    border-right: none;
}

CSS Code für das Ausblenden des Icons nur auf der Profilseite:

/* do not show list icon on profil page only */
#bb-learndash_profile .bb-courses-directory .grid-filters .layout-grid-list {
    display: none;
}
#bb-learndash_profile .bb-courses-directory .grid-filters .layout-grid-view {
    border-right: none;
}

Beiden Ansichten deaktivieren

Kopiere den folgenden CSS Code und füge ihn im Backend unter "Community" > "Theme Optionen" unter "Individuell" beim CSS Abschnitt ein, um beide Ansichten (Gitter und Liste) auszublenden:

/* do not show grid and list icons on course overview and on profile page */
.bb-courses-directory .grid-filters {
    display: none;
}

🔥 Bitte berücksichtige: Ein Wechsel zwischen den Ansichten ist ab diesem Zeitpunkt dann nicht mehr möglich! Es kann also sein, dass Benutzer nun entweder immer die Gitter oder die Listen Ansicht bei sich sehen und können nicht mehr umstellen!

Auswirkung: