Article list image above titles and text?

  • I'm getting really frustrated with this because it seems like it should be something very simple.

    How do I get the image from the article list to appear above the article titles and excerpt text?

    I'm using the modified articleListItems.tpl from here Artikel Bildgröße ändern

    Edited 2 times, last by LogixX (November 6, 2017 at 9:35 PM).

  • LogixX November 6, 2017 at 10:05 PM

    Changed the title of the thread from “Article list image over titles and text?” to “Article list image above titles and text?”.
  • CSS
    #tpl_wcf_articleList {
        .box128 {
            display: flex;
            flex-wrap: wrap;

    Should do the trick.

    Btw: Use margin-top: 1%; in class .articleList > li:not(:first-child) instead of margin-top: 0px;, to keep the two boxes at the same height.



    With flex-wrap: wrap; :

  • Looks like a bit of extra spacing could do with being added below the image to shove the forum title down a little. As it's sitting flush right below the image and doesn't really match the same spacing used between title and Yesterday 1:45pm, etc

  • Try my css part and let me see, if it works. You can just simply comment out your current part, or backup it in a textdocument.

  • Everything needs a little margin tweaking but it's displaying the way I wanted it to

    And you can fix the overlay area with this part:

    [Blocked Image:]

    (filesize to big for file notes)

    I haven't tested it, but I would place the code inside here:

  • Ok, it seems like firefox got problems with margin percentages, but it isn't a big deal, to use px instead of %.

    I hope it works, because I only tested it with the developer tools.

  • I will take a look at it in the next 20 minutes.

    It's nice to see people help in the thread that actually know what they are doing. Instead of people spouting off nonsensical suggestions none stop. The suggestions have helped me sort out some things. Thanks.

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!