Luft-Thema

Thema
,
327

Hinzufügen der Spalte “Aufrufe” zur Themenliste

Ich bin keineswegs Entwickler oder Programmierer. Ich habe ein paar Stunden damit verbracht, mit dem CSS-Code über die Funktion “Element untersuchen” in Google Chrome herumzuspielen. Ich konnte die Spalte “Aufrufe” korrekt anzeigen lassen und habe auch die Größe jeder Spalte nach meinen Wünschen angepasst. Sie können die Breite im folgenden CSS-Code gerne anpassen. Ich habe auch Kommentare im Code hinzugefügt, damit Sie leicht erkennen können, welcher Code für welche Spalte bestimmt ist. Für jede Spalte gibt es 2 Bereiche (Kopfzeile und Zeile). Diese Breiten müssen übereinstimmen.

Ich hoffe, das hilft Ihnen allen: @daming @bksubhuti @eddy2

Anweisungen

1. Eine neue Komponente erstellen.

2. Diesen CSS-Code kopieren

Verwenden Sie den folgenden aktualisierten CSS-Code anstelle des von @jordan.vidrine oben bereitgestellten Codes.

Option A) Fügt die Spalte “Aufrufe” nur für Desktops hinzu (empfohlen)

  • Fügen Sie den CSS-Code in den Tab Desktop ein.

Option B) Fügt die Spalte “Aufrufe” sowohl für Desktops als auch für Mobilgeräte hinzu.

  • Fügen Sie den CSS-Code in den Tab Common ein.

Option C) Fügt die Spalte “Aufrufe” nur für Mobilgeräte hinzu.

  • Fügen Sie den CSS-Code in den Tab Mobile ein.

Hinweis: Wenn Sie Option B oder C gewählt haben…

Auf Mobilgeräten nehmen die 3 Spalten (Antworten, Aufrufe, Aktivität) zu viel Platz ein und sind gequetscht. Wenn Sie dies für Mobilgeräte benötigen, empfehle ich, eine der 3 Spalten zu entfernen. Sie können dies tun, indem Sie Display: none zu beiden Bereichen (Kopfzeile, Zeilen) im folgenden CSS-Code für die Spalte hinzufügen, die Sie ausblenden möchten.

/* [Topic] */

    /* Topic Header */
    .full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.main-link {
        width: 66%;
    }
    
    /* Topic Row */
    .full-width .contents .topic-list .topic-list-header .topic-list-data.default {
        width: 66%;
    }

/* [Replies] */

    /* Replies Header */
    .full-width .contents .topic-list .topic-list-header .topic-list-data.posts {
        width: 7%;
        order: 2;
    }
    
    /* Replies Rows */
    .full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.posts {
        width: 7%;
        order: 2;
    }

/* [Views] */

    /* Views Header */
    .full-width .contents .topic-list .topic-list-header .topic-list-data.views {
        display: block;
        width: 7%;
        order: 3;
    }
    
    /* Views Rows */
    .full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.views {
        width: 7%;
        order: 3;
        display: flex;
        justify-content: center;
        align-items: center;
    }

/* [Activity] */

    /* Activity Header */
    .full-width .contents .topic-list .topic-list-header .topic-list-data.activity {
        display: block;
        width: 7%;
        order: 4;
    }
    
    /* Activity Rows */
    .full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.age {
        width: 7%;
        order: 4;
    }

@jordan.vidrine Wenn Sie Überarbeitungen am von mir geschriebenen CSS haben, lassen Sie es mich bitte wissen. Ich weiß nicht genau, was ich tue… aber es funktioniert, lol.

6 „Gefällt mir“