Ixion Theme – Center excerpt text both vertically & horizontally

  • Unknown's avatar
    rthaw31 · Member ·

    Hi,

    We’ve received help in centering the excerpt text for each blog post vertically, but are wondering how we can also have it center horizontally (so it appears in the middle of the image to the left, rather than at the top).

    Also, is there a way to make the excerpt text clickable to the article (like the post title & featured image are)?

    Thank you!

    The blog I need help with is: (visible only to logged in users)

  • staff-loquaciousloon · Staff ·

    Hi again!

    Vertical centering is, historically, challenging. Modern CSS (and modern web browsers) are making it easier though.

    Centering the text based on the image isn’t going to be doable with a single CSS style, as the images are sometimes different heights, and the amount of content also varies it’s height.

    The text is contained in a box called .entry-content, which holds the image, the title, the date, and the summary – so if we center it, it’ll be centered against the full height of those items (between the top of the picture and the the bottom of the title, basically.

    Give this a try:

    .home .entry-content {
    display: flex;
    align-items: center;
}

    If you’d like that text to be clickable, you can put a link in your excerpt using HTML.

    For example, your most recent post’s excerpt could be replaced with this:

    <a href="https://allball2017.wordpress.com/2017/02/07/in-honor-of-brea…-the-real-heroes/">The MOST IMPORTANT, MOST CORRECT countdown to the 10 greatest, fattest baseball players of all time</a>

    You’d want to do that for each post, as you write your custom excerpts :)

  • Unknown's avatar
    rthaw31 · Member ·

    Thanks Chad, this worked quite nicely! I think we’ll need to play with the title & excerpt text length and the size of the featured image to get it exactly how we want it, but those are things we can control.

    I tried the HTML code you suggested to make the post excerpt clickable to the link, which worked very nicely, but it changed the text color to yellow (site secondary color). Can we change it back to black, but still have it clickable?

    Thanks again!

  • staff-loquaciousloon · Staff ·

    You’re welcome!

    We can fix a color issue! (queue the the CSS theme song)

    Change the link color:

    .home .entry-content a {
	color: #000;
}

    …and if you’d prefer those links not get underlined when you hover over them:

    .home .entry-content a:hover {
	text-decoration: none;
}

    One other note, it looks like the title of your current Baseball item in your featured content is running outside of it’s box. It looks like this is being caused by a filter we use to prevent single words from ending up on a line by themselves and can sometimes have undesired effects on narrow grids like this.

    I’ve already filed a report about it, but wanted to mention it as I’m sure you’ve either already noticed it, or would have noticed it soon enough!

  • Unknown's avatar
    rthaw31 · Member ·

    Works perfectly!! Thanks again Chad!

  • Unknown's avatar
    rthaw31 · Member ·

    Hi Chad,

    I actually noticed this worked great on the Home page, but I’m still seeing the yellow on the tagged pages, ex:

    https://allball2017.wordpress.com/tag/basketball/

    How can we change that to black as well?

    Thank you again!

  • Unknown's avatar
    rthaw31 · Member ·

    Nevermind, figured this one out myself! :)

  • staff-loquaciousloon · Staff ·

    Awesome! Nicely done :)

  • staff-loquaciousloon · Staff ·

    hey Hi @rthaw31!

    That issue with the titles on the Featured Content sometimes running outside of the box should be fixed – you have a custom font size on there now, but I wanted to let you know :)

  • The topic ‘Ixion Theme – Center excerpt text both vertically & horizontally’ is closed to new replies.