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 ().

  • What do you mean by "over the article titles and excerpt text?"


    I don't get that? Why would you want the image to cover (obscure) the title text?

  • LogixX

    Changed the title of the thread from “Article list image over titles and text?” to “Article list image above titles and text?”.
  • This is what I'm trying to accomplish:



    This is what I have so far:



    Any help would be greatly appreciated.

  • 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.

    Before:



    After:


    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.

  • Thank you again Aze ! The Recent Articles box is much better now. Everything needs a little margin tweaking but it's displaying the way I wanted it to.

  • 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: https://i.imgur.com/PYorZKQ.gif]

    (filesize to big for file notes)

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

  • I wish I could buy you a beer Aze , thank you again. In Firefox the two articles in the right column seem to run together, do you know how to fix that?

  • 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.