Artikelbox erstellen
In dieser kleinen Anleitung, erkläre ich, wie Sie mit Bordmitteln eine Artikelbox erstellen und nach Ihrem Gusto anpassen können.
Öffnen Sie das ACP Ihrer WSC Installation. Navigieren Sie hier angekommen in der linken Menüleiste auf Inhalt und im Anschluss auf Boxen. Über den Button im rechten oberen Raum, können Sie nun eine neue Box hinzufügen.
In den Allgemeinen Daten vergeben Sie einen passenden Namen für Ihre neue Artikelbox.
Wählen Sie als Controller Artikel und als Position Im Inhaltsbereich oben aus. Definieren Sie eine Reihenfolge, wenn Sie mehrere Boxen auf der selbigen Seite anzeigen möchten. Möchten Sie außerdem den Box-Titel anzeigen, markieren Sie hier die Checkbox. Vergeben Sie im nächsten Abschnitt eine maximale Anzahl an Artikeln, welche angezeigt werden sollen. Die Sortierung ist wichtig, da Sie hier entscheiden müssen, ob Artikel von Neu zu Alt oder von Alt zu Neu sortiert werden sollen. Jetzt fehlt natürlich noch eine Artikelkategorie, wählen Sie also hier eine Kategorie Ihrer Wahl aus.
Im Reiter Inhalt müssen Sie noch einen Namen als Titel definieren. Vergessen Sie nicht, im Reiter Bedingungen und Zugangsbeschränkungen die passenden Einstellungen für Sie zu wählen.
Anpassungen via CSS
Möchten Sie eine andere Darstellung, der zuvor erstellten Artikelbox bewirken, müssen Sie diese via CSS anpassen. Dies können Sie über die DEV-Tools Ihres Browsers bewerkstelligen. Wichtig hier ist der Box Identifier. Diesen Finden Sie in der Boxübersicht und wird hier in der Spalte ID dargestellt.
Code Beispiel:
.box[data-box-identifier="com.woltlab.wcf.genericBox24"] {
#tpl_wcf_articleList .contentItem, #tpl_wcf_categoryArticleList .contentItem {
flex-basis: calc(50% - 10px);
flex: 0 0 calc(50% - 10px);
max-width: calc(50% - 10px);
margin-bottom: 20px;
}
.contentItem {
border-radius: 12px;
box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 24%);
border: none;
}
.contentItemMeta {
display: none;
}
.contentItemMultiColumn {
flex-basis: calc(33% - 20px);
}
}