[Resolved] Post titles on top of featured images in Archive pages

Home Forums Support [Resolved] Post titles on top of featured images in Archive pages

Home Forums Support Post titles on top of featured images in Archive pages

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1527889
    Alexandra

    Hey guys!
    Is there a way to have the h2 titles display centered on top of featured images in Archive pages instead of above or below?
    I would also need a slight overlay on those featured images in order to properly display the titles in white.

    Sample archive page

    What I would need: http://prntscr.com/vhvssp

    Thank you so much!

    #1528542
    David
    Staff
    Customer Support

    Hi there,

    try this CSS:

    .generate-columns .inside-article {
        position: relative;
    }
    .generate-columns .post-image+.entry-header {
        position: absolute;
        top: 50%;
        left: 0;
    }
    .generate-columns .post-image+.entry-header a {
        color: #fff;
    }
    #1528828
    Alexandra

    Hi, David!
    Thank you so much for the CSS!
    I’ve tried it and this is the result: https://alex.bandiwork.dev/category/articole-diverse

    The titles were not vertically aligned center, so I tried adding

    h2.entry-title {
    	text-align: center;
    	}

    but it seems to align only titles with multiple rows. The titles that are short enough to fit on just one row are aligned left.

    I would also need an overlay on the images, because the text is not readable without it.

    If you have any ideas, please let me know.
    Thank you so much!

    Alexandra

    #1529184
    Elvin
    Staff
    Customer Support

    Hi,

    You can add overlay to your post images by adding this CSS:

    .post-image {
        position: relative;
    }
    .post-image:before {
        background-color: rgba(25,25,25,0.5);
        height: 100%;
        width: 100%;
        content: "";
        display: block;
        position: absolute;
    }
    .post-image a {
        line-height: 0px;
        display: block;
    }

    Adjust the background-color: to your preference.

    A wise man once said:
    "Have you cleared your cache?"

    #1529226
    Alexandra

    Hi Elvin!
    Thank you so much for the overlay CSS! I got it to work! ๐Ÿ™‚

    The only issue remaining is the alignment of one-row titles.
    Please see here: https://alex.bandiwork.dev/category/articole-diverse
    Only titles with multiple rows are aligned center. The titles that are short enough to fit on just one row are aligned left.

    Is there any way to fix that too? I would need all titles to be aligned center, if possible.
    Thank you so much!

    #1529528
    David
    Staff
    Customer Support

    Change this CSS:

    .generate-columns .post-image+.entry-header {
        position: absolute;
        top: 50%;
        left: 0;
    }

    to:

    .generate-columns .post-image + .entry-header {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        padding: 0 10px;
    }
    #1529669
    Alexandra

    That sealed the deal! ๐Ÿ˜€
    Thank you so much, David!!

    #1530033
    David
    Staff
    Customer Support

    Glad we could be of help

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.