Artikelbox - Herobox auch für den WoltLab Blog möglich?
-
-
Denke schon, ich schaue mal.
-
Ich habe den Code für den Blog noch mal aktualisiert;
Hier für den Marktplatz:
CSS
Alles anzeigen#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; } } } }
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.
-
Ja jetzt sieht das richtig gut aus!
Sieht wirklich sehr gut aus.
-
-
-
Guck ich mal, sollte gehen.
-
Guck ich mal, sollte gehen.
Bin gespannt! Ergibt halt Sinn, sich an den Altmeister zu wenden.
-
Ich bin grad über dieses Thema gestolpert. Da es mich auch immer gestört hat dass die Blog-Artikel in der Blog-Box untereinander gelistet werden, während die Artikel in der Artikel-Box nebeneinander angezeigt werden, habe ich den Code sofort ausprobiert. Ich hätte aber gerne dass die Optik gleich ausschaut wie bei den Artikeln, also Überschrift und Vorschautext unter dem Titelbild, außerdem dass nur 2 Blog-Artikel nebeneinander angezeigt werden, nicht 3. Das habe ich ohne wirklich Ahnung zu haben was ich da tue, mit diesem Code hinbekommen:
Code
Alles anzeigen/* WoltLab Blog Artikel Box */ #content { .boxContent .blogEntryList { display: flex; @include screen-lg { .contentItemSingleColumn { flex-basis: calc(100% / 2 - 20px); } } @include screen-sm-md { .contentItemSingleColumn { flex-basis: calc(50% - 20px); } } @include screen-xs { .contentItemSingleColumn { flex-basis: calc(100% - 20px); } } .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; } } } }
Nun schauen die Blog-Artikel in der Blog-Box fast gleich aus wie jene in der Artikel-Box:
Allerdings hätte ich gerne etwas mehr Inhalt, nicht nur diese eine Zeile und vermutlich ist mein CSS-Code ziemlicher Murks Lässt sich der Code noch etwas optimieren und was müsste getan werden wenn so 3 oder 4 Zeilen Vorschautext angezeigt werden sollen? Danke
-
Lässt sich der Code noch etwas optimieren und was müsste getan werden wenn so 3 oder 4 Zeilen Vorschautext angezeigt werden sollen? Danke
Ich gucke mal drüber, bis da hin ändere diese Zeile ab:
-webkit-line-clamp: 1;
in 3 oder 4