Beiträge von Tom

Tom

Ich habe den Code für den Blog noch mal aktualisiert;

Beitrag

RE: Artikelbox - Herobox auch für den WoltLab Blog möglich?

Hier der Code:

(Quelltext, 73 Zeilen)

Tom

3. April 2024 um 11:44

Hier für den Marktplatz:

CSS

#content {
    .marketplaceBox {
        .boxContent {
            display: flex;
            margin-left: -20px;
            flex-wrap: wrap;
            .marketplaceEntryType {
                color: rgba(255, 255, 255, 1.0);
                &::after {
                    color: rgba(255, 255, 255, 1.0);
                }
            }
            .contentItemLink {
                position: relative;
                .contentItemContent {
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    left: 0;
                    top: initial;
                    background-color: rgba(0,0,0,0.5);
                    backdrop-filter: blur(5px);
                    -webkit-backdrop-filter: blur(5px);
                    .contentItemTitle {
                        font-size: 14px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                    }
                    .contentItemCategory {
                        color: rgba(255,255,255,0.7);
                    }
                    .contentItemTitle {
                        color: #fff;
                    }
                    .contentItemDescription {
                        color: rgba(255,255,255,0.7);
                        white-space: nowrap;
                        font-size: 12px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 1;
                        text-align: left;
                        /* display: none; */ /* Optional um die Vorschau komplett auszublenden */
                        > p:first-child {
                            display: none;
                        }
                        > p:last-child {
                            display: none;
                        }
                    }
                }
                .contentItemImageLarge {
                    min-height: 175px; /* Höhe des Bildes ändern / Standard 150px */
                }
            }
            .contentItemOptions {
                display: none;
            }
        }
    }
}

Alles anzeigen

Da das Template falsch aufgebaut ist muss die Box die Klasse:

marketplaceBox

bekommen damit der Code funktioniert. Box bearbeiten und unter CSS-Klassen einfügen.

Tom

Denke schon, ich schaue mal.

Tom

Habe den Code oben aktualisiert, bitte die Kommentare lesen.

RainerSF

Mit dem neuen Code sollte es besser funktionieren nur eine Zeile Vorschau anzuzeigen.

Mehr als eine Zeile würde ich nicht machen da man nicht weiß wie der HTML-Code an der Stelle aussieht.

Tom

Habe mal ein Auge darauf geworfen, dem Blog fehlt eine Art Teaser der nur Text ausgibt, an der Stelle wird immer HTML verwendet was unschöne Absätze usw. ergibt. Aber ich denke man kann das noch per CSS hinbiegen, muss ich mir mal im Detail angucken.

~~Bis dahin am besten die Vorschau ausblenden.~~

Edit:

Code aktualisiert

Tom

Nicht so richtig, darum gibt es optional in Zeile 46:

/* display: none; */ /* Optional */

um die Vorschau ganz auszublenden:

display: none;

Dann steht nur der Titel da.

Das Template ist leider komisch, zum einen steht der Inhalt einfach so in einem Container drin, da ist kein oder oder irgend was drin, zum anderen wird da eine Leerzeile mit HTML-Code erzeugt:

Alles in allem nicht schön.

Tom

Da fehlt noch eine Kleinigkeit in der rating.scss für die mobile Darstellung:

/style/bbcode/rating.scss

Alt:

CSS

            .rating-badge-stars {
                grid-area: ratingStars;
                text-align: left;
                padding-left: 5px;
                .icon {
                    margin-top: 5px;
                }
            }

Neu:

CSS

            .rating-badge-stars {
                grid-area: ratingStars;
                text-align: left;
                padding-left: 5px;
                .icon {
                    margin-top: 5px;
                    color: #fff;
                }
            }

187: color: #fff;

Danach den Cache im ACP löschen.

Tom

Denk daran vor dem Wiederherstellen alle Log-Files zu sichern damit man schauen kann woran es hing.

Das ist der Ordner /log/ im Stammverzeichnis wo die index.php liegt

Tom

Hier der Code:

CSS

/* WoltLab Blog Artikel Box */
#content {    
    .boxContent .blogEntryList {
        display: flex;
        @include screen-lg {
            .contentItemSingleColumn {
                flex-basis: calc(100% / 3 - 20px);
            }
        }
        @include screen-sm-md {
            .contentItemSingleColumn {
                flex-basis: calc(50% - 20px);
            }        
        }
        @include screen-xs {
            .contentItemSingleColumn {
                flex-basis: calc(100% - 20px);
            }        
        }        
        .contentItemLink {
            position: relative;
            .contentItemContent {
                position: absolute;
                bottom: 0;
                right: 0;
                left: 0;
                top: initial;
                background-color: rgba(0,0,0,0.5);
                backdrop-filter: blur(5px);
                -webkit-backdrop-filter: blur(5px);
                .contentItemTitle {
                    font-size: 14px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                }
                .contentItemCategory {
                    color: rgba(255,255,255,0.7);
                }
                .contentItemTitle {
                    color: #fff;
                }
                .contentItemDescription {
                    color: rgba(255,255,255,0.7);
                    white-space: nowrap;
                    font-size: 12px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                    text-align: left;
                    /* display: none; */ /* Optional um die Vorschau komplett auszublenden */
                    > p:first-child {
                        display: none;
                    }
                    > p:last-child {
                        display: none;
                    }
                }
            }
            .contentItemImageLarge {
                min-height: 175px; /* Höhe des Bildes ändern / Standard 150px */
            }
        }
        .contentItemOptions {
            display: none;
        }
    }
}

Alles anzeigen

Tom

Zitat von Dragosius

Ich vermute, das werden aber wieder kleinere Änderungen sind.

Also was ich so sehe kommt da schon einiges an Änderungen

Ich hänge hier ja noch auf 5.4 Muss ich auch dringend mal angehen

Tom

Ich habs mal auf Github in den projekts Ordner gepackt:

GitHub - cls-design/com.cls-design.wcf.rating.bbcode: Rating BBCode

Rating BBCode. Contribute to cls-design/com.cls-design.wcf.rating.bbcode development by creating an account on GitHub.

github.com

Beiträge von Tom

Artikelbox - Herobox auch für den WoltLab Blog möglich?

RE: Artikelbox - Herobox auch für den WoltLab Blog möglich?

Artikelbox - Herobox auch für den WoltLab Blog möglich?

Artikelbox - Herobox auch für den WoltLab Blog möglich?

Artikelbox - Herobox auch für den WoltLab Blog möglich?

Artikelbox - Herobox auch für den WoltLab Blog möglich?

Sternebewertungen

Der Chat-Ersatz-Plauder-Thread

Artikelbox - Herobox auch für den WoltLab Blog möglich?

Der Chat-Ersatz-Plauder-Thread

Sternebewertungen

cls studio

Informationen

Demoinstallationen

Hilfe