Help > Forum > Designs und Erscheinungsbild > Gemeinsame CSS-Theme-Anpassungen

Gemeinsame CSS-Theme-Anpassungen

Diese Anweisungen gelten nur für die neue Themen.

Diese Anleitung soll die wichtigsten CSS-Klassen im Forum zeigen, zusammen mit Beispielen, wie sie angepasst werden können. Diese Anweisungen geben Sie an, wo Sie CSS zu Ihrem Forum oder Ihrem Thema hinzufügen können.

Um mehr über CSS zu erfahren, versuchen Sie die W3Schools CSS Tutorial.

Körper

Passen Sie Ihre gesamte Forumseite mit dem Selektor an .wt-body.

<style>
.wt-body {
    background-color: skyblue;
}
</style>

Schriftart

Verwenden Sie eine andere Schriftart für Ihr Forum, indem Sie den Code der Google-Schriftart in das Forum Head Tag HTML-Code -Textfeld.

<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

Geben Sie dann Ihre Schriftart mit dem Selektor an *.

<style>
* {
    font-family: 'Lato', sans-serif;
}
</style>

Kopfzeile

Stylen Sie die Kopfzeile Ihres Forums mithilfe des Selektors header.

<style>
header {
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
}
</style>

Links

Stylen Sie die Links Ihres Forums mithilfe des Selektors .wt-body a.

<style>
.wt-body a {
    font-weight: bold;
}
.wt-body a:hover {
    text-decoration: underline;
}
.wt-body a {
    color: #222 !important;
}
.wt-body a:visited {
    color: #555 !important;
}
</style>

Avatare

Anpassen der Darstellung von Avataren in Ihrem Forum mithilfe des Selektors .image-wrapper.

<style>
.image-wrapper {
    border-radius: 100%;
}
</style>

Modal

Passen Sie an, wie Modal/Dialoge in Ihrem Forum angezeigt werden, indem Sie den Selektor .modal-content.

<style>
.modal .modal-content {
    border-radius: 20px;
    overflow: hidden;
}
</style>

Passen Sie an, wie der Titel Ihrer Modal- oder Popup-Dialoge in Ihrem Forum angezeigt wird, indem Sie den Selektor .modal-header.

<style>
.modal-header {
    background: black;
    color: white
}
</style>

Folienbereich und Hauptmenü

Passen Sie die Darstellung des linken Folienbereichs und des Hauptmenüs in Ihrem Forum an, indem Sie den Auswahlbereich #slide-panel.

<style>
#slide-panel {
    background-color:#00ff00
}
</style>

Kalender

Passen Sie die Darstellung des Kalenders in Ihrem Forum an, indem Sie den Selektor .calendar.

<style>
.calendar {
    width: 100% !important;
}
</style>

Kopfzeilenbild

Passen Sie die Darstellung des Kopfzeilenbildes in Ihrem Forum an, indem Sie den Selektor .header-image.

<style>
.header-image {
    height: 185px;
    margin: 10px auto 20px;
}
</style>

Kategorien und Themenseiten

Passen Sie an, wie die Kategorienlistenseite in Ihrem Forum angezeigt wird, indem Sie den Selektor .forum-list.

<style>
.wt-categories {
    width: 700px !important;
    margin-top: 50px;
}
</style>

Passen Sie an, wie die Themenlistenseite in Ihrem Forum angezeigt wird, mithilfe des Auswahlfeldes .all-topics-list.

<style>
.all-topics-list {
    width: 800px !important;
}
</style>

Angebotsseite posten

Passen Sie an, wie die Seiten der Beitragsliste in Ihrem Forum angezeigt werden, indem Sie den Selektor #posts-list.

<style>
#posts-list {
    margin: 0 auto;
    width: 72%;
}
</style>

Passen Sie die Darstellung von Beiträgen in Ihrem Forum an, indem Sie den Selektor .post-body.

<style>
.post-body {
    background-color: #00ff00;
}
</style>

Paneelkörper

Passen Sie die Darstellung von Panels in Ihrem Forum mithilfe des Auswahlfeldes an .content-panel.

<style>
.content-panel {
    width: 70% !important;
}
</style>

Alarmstufe

Passen Sie die Anzeige der Warnmeldungen in Ihrem Forum mithilfe des Auswahlknopf an .alert.

<style>
.alert {
    background: #f38282;
}
</style>

Album

Anpassen der Darstellung von Alben in Ihrem Forum mithilfe des Selektors .album-wrapper.

<style>
.album-wrapper {
    padding: 2px;
    border: 2px #eee solid;
}
</style>

Textfeld

Anpassen der Darstellung von Formulartextfeldern in Ihrem Forum mithilfe des Auswahlfelds .form-control.

<style>
.form-control {
    background: #c6dede !important;
    color: #019c9c;
}
</style>

Buttons

Passen Sie die Darstellung von Schaltflächen in Ihrem Forum mithilfe des Auswahlfeldes an .btn, .btn-primary, and .btn-subtle.

<style>
.btn {
    border-color: #d07c73 !important;
    background-color: #397373 !important;
    color: #242727 !important;
}
.btn-primary {
    border-color: #39d84f !important;
    background-color: #386f6f !important;
    color: #0d2b2b !important;
}
.btn-subtle {
    border-color: #969291 !important;
    background-color: #1bf9f9 !important;
    color: #4b5252 !important;
}
</style>

Dropdown-Menü

Anpassen der Darstellung von Dropdown-Menüs in Ihrem Forum mithilfe des Auswahlknopfs .dropdown-menu.

<style>
.dropdown-menu {
    background-color: #b4dada
}
.dropdown-menu a:hover {
    background-color: #97caca !important;
}
</style>

Logo-Bild

Passen Sie die Darstellung Ihres Logos in Ihrem Forum an, indem Sie den Auswahlbereich #forum_logo.

<style>
#forum_logo {
    width: 50%;
    margin-left: 20%;
}
</style>

Verwandte Artikel:


If you still need help, please contact us.