[Resolved] Standardize or create a "title block"

Home Forums Support [Resolved] Standardize or create a "title block"

Home Forums Support Standardize or create a "title block"

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #278816
    coco

    My site is a blog with all the posts on the main page. I’m using the masonry layout and I’ve standardized the featured images by making them all square.

    I’d like to know if there is a way to either standardize the size of the area where the title appears below the featured image in order to make it the same size no matter the title’s length?

    Or, even better, if I can add (and standardize) a title block that I can customize color-wise and customize according to the “separating space” I’ve selected under Layout>Content Layout>separating space? I’m going to add a sidebar at some point, so I want to be able to change the title area/box size when that happens.

    Either way, I’d like the site to format the site somewhat like a grid, but I don’t want just the square images, a la Instagram.

    shinybutter.com

    Thanks very much,

    Coco

    GeneratePress 1.3.44
    #278824
    Leo
    Staff
    Customer Support

    Hi Coco,

    Maybe I’m missing something here but wouldn’t it be easier to use Columns layout with 3 columns?

    Then they would all be the same size and line up regardless the length of the title?

    Let me know.

    #278828
    coco

    Ah, yes, thank you for that ultra-simple solution. I must have migrated to the masonry layout at some point for some reason or another and then gotten stuck.

    So is there a way to make title blocks, then? And/or to adjust the title’s padding below the featured image?

    Continued thank yous~

    Coco

    #278832
    Leo
    Staff
    Customer Support

    Not quite sure what you meant by title blocks as they are already in a block?

    Try this CSS to adjust the margin:

    .post-image-above-header .post-image {
        margin-bottom: 10px;
    }

    Let me know.

    #278890
    coco

    I’m wondering if I can make the titles of the blog posts in a gray block, say, that sits 7-10 px beneath the featured image.

    #278893
    Leo
    Staff
    Customer Support

    ok the CSS above place the title 10px under the featured image. You can adjust the number to whatever you like.

    Then try this for adding a background color to the title:

    .generate-columns-container .entry-header {
        background-color: ##3a3a3a;
        padding: 10px 10px;
    }

    Let me know.

    #278895
    coco

    Wonderful!! I think I’m getting there.

    How can I make the boxes all the same size?

    And how can I pad the post titles within these boxes?

    Also, is there a way to move the rows closer together, and remove the ellipses, too?

    Again, thank you.

    Coco

    #278897
    Leo
    Staff
    Customer Support

    – I’m not sure if there is a way to make the title boxes all the same size because it depends on a lot of things: text size, title length, the padding we are about to add…Maybe if you can enter a couple blank lines?

    – I adjusted the code above to add paddings. The 1st number controls the top/bottom and the 2nd number controls left/right.

    – Try this to adjust the line height (default was at 1.2em):

    h2.entry-title {
        line-height: 1em;
    }

    – The ellipses will be removed in the next version when there is no read more text. For now, use this CSS:

    .entry-summary {
        display: none;
    }
    #279032
    coco

    You have been really helpful—thank you so much!

    I’ll see if I can maneuver the title boxes into a uniform size, because the rows where that occurs look good.

    Your quick responses are very much appreciated.

    Blessings!

    Coco

    #279074
    Leo
    Staff
    Customer Support

    You’re welcome. If you can show me an example of other sites using a uniform title box I can probably tell you how they did it 🙂

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