Blogbeiträge nebeneinander platzieren & anpassen

webpexel · January 24, 2017 at 5:49 PM

Hallo Community,

bei Version 4.1 habe ich die Blogbeiträge wie folgt beeinflusst.

Code

#tplBlog .blogEntryList > li:nth-child(2n+1),
#tplEntryList .blogEntryList > li:nth-child(2n+1) {
    width:49%; /* definiert die Breite des Artikels im Blog */
    float:left; /* Anordnung des Artikels, in diesem Fall links */
}

#tplBlog .blogEntryList > li:nth-child(2n+2),
#tplEntryList .blogEntryList > li:nth-child(2n+2) {
    width:49%; /* definiert die Breite des Artikels im Blog */
       float:right; /* Anordnung des Artikels, in diesem Fall rechts */
}

Display More

Diesbezüglich scheint sich bei der Suite etwas geändert zu haben. Es funktioniert nur bedingt, was logisch erscheint. Einen Versuch war es Wert. Leider finde ich nicht heraus, wo was geändert werden muss und Bitte daher um eure Unterstützung.

Vielen Dank

webpexel

norse · January 24, 2017 at 5:55 PM

Da nicht jeder diese Anwendung betreibt, wäre ein Link zur Liveansicht hier durchaus hilfreich.

Was sich auf jeden Fall geändert hat, ist die ID des Templates. #tplBlog dürfte in der aktuellen Version vermutlich #tpl_blog_blog heißen.

Gruß norse

webpexel · January 24, 2017 at 6:08 PM

Danke für deine Rückantwort Norse. Hier der Link zur Testseite. Aktuell ignoriert er den CSS Code komplett. Ich habe nichts am Template oder ähnliches geändert. Unter erweiterte Einstellungen steht nur der obige Code zum Test.

Testumgebung

**Alexander Ebert** · January 24, 2017 at 6:33 PM Official Post

CSS

#tpl_blog_entryList .blogEntryList > li:nth-child(2n+1) {
    width: 49%; /* definiert die Breite des Artikels im Blog */
    float: left; /* Anordnung des Artikels, in diesem Fall links */
}

#tpl_blog_entryList .blogEntryList > li:nth-child(2n+2) {
    width: 49%; /* definiert die Breite des Artikels im Blog */
    float: right; /* Anordnung des Artikels, in diesem Fall rechts */
}

#tpl_blog_entryList .blogEntryList::after {
    clear: both;
    content: "";
    display: block;
}

Display More

**Alexander Ebert** · January 24, 2017 at 7:49 PM Official Post

norse Ergänze bitte den Teil bzgl. dem clear (3. Teil in meinem Beitrag), ohne den landen nachfolgende Elemente (z.B. die Seitenzahlen) innerhalb der Artikel.

webpexel · January 25, 2017 at 2:00 PM

Funktioniert ausgezeichnet!

Recht herzlichen Dank für deine Hilfe.

webpexel · January 25, 2017 at 5:14 PM

Hallo Community,

ich möchte mich gerne erneut mit einer Frage/Bitte an euch wenden, da ich diese Herausforderung nicht allein bewältig bekomme.

Folgendes:

In Version 4.1 habe ich die Blogbeiträge (wie oben erwähnt) nebeneinander platziert. Dank der Hilfe von Alexander Ebert konnte dies auf die Suite angepasst werden. Was ich nicht hinbekomme, das die Beiträge ordentlich nebeneinander platziert und angepasst sind.

Beispiel Version 4.1 unter Website Animeszene

Beispiel Version WoltLab Suite siehe Testumgebung Blog

In Version 4.1 habe ich das damals wie folgt gelöst:

Code

/* Anfang Höhe der Aktikel im Blog einstellen und abschneiden */

#tplBlog .blogEntryList .messageBody > div:not(.messageFooter),
#tplEntryList .blogEntryList .messageBody > div:not(.messageFooter) {
       height:389px; /* deffiniert die Höhe der Aktikel */
    overflow:hidden; /* beschneidet den Artikel, damit nicht alles angezeigt wird */
}

/* Ende Höhe der Aktikel im Blog einstellen und abschneiden */

/* Anfang Überschrift im Blog kürzen */

#tplBlog .blogEntryList .message .messageContent .messageHeader .messageHeadline > h1,
#tplEntryList .blogEntryList .message .messageContent .messageHeader .messageHeadline > h1 {
    color:@wcfLinkColor; /* deffiniert die Linkfarbe */
    height:34px; /* deffiniert die Höhe der Überschrift */
    font-size: 1rem; /* deffiniert die Schriftgröße */
}

/* Ende Überschrift im Blog kürzen */
    
/* Anfang Definition der Höhe der Bloginfos wie Name, Bereich */

.message .messageContent .messageHeader .messageHeadline > h1 + p {
    height: 20px; /* deffiniert die Höhe der Bloginfos wie Name, Bereich */
}

/* Ende Definition der Höhe der Bloginfos wie Name, Bereich */

/* Anfang Mindesthöhe Messagefooter im Blog */

#tplBlog .blogEntryList .messageFooter,
#tplEntryList .blogEntryList .messageFooter {
    min-height:30px; /* deffiniert die Höhe des Footers bei jedem Artikel, damit die Button richtig angezeigt werden */
}

/* Ende Mindesthöhe Messagefooter im Blog */
    
/* Anfang Mindesthöhe Messageheader im Blog */

#tplBlog .blogEntryList .box32,
#tplEntryList .blogEntryList .box32 {
    min-height: 40px; /* deffiniert die Höhe des Headers bei jedem Artikel, damit die Überschriften richtig angezeigt werden */
}

/* Ende Mindesthöhe Messageheader im Blog */

Display More

Ich habe mir wirklich Mühe gegeben und versucht mit Firefox & Firebug das selbst hinzubekommen. Man kann nur dazu lernen. Ich bekomme es aber nicht hin.

Für eure Unterstützung recht herzlichen Dank.

webpexel

Participate now!