Fill front-page rectangle with even-edged text, like a newspaper?

  • I’d like to develop a theme that such that the front page looks like an antique newspaper, where posts are fit together with media widgets to look like a full page of newspaper text. Sort of like the Tanzaku theme, except that I don’t like how the bottom looks ragged (uneven lengths). Any advice on developing a theme that will fairly uniformly fill a rectangle with posts and widgets, leaving all edges fairly straight across the page?

    One possibility: I know that one can set post excerpt length for the front page in words, but I’m wondering if there’s a way to set excerpt length to a certain pixel height, and then have the excerpt automatically cut off when that height is reached? If such a thing is possible (how?), it seems like it might answer my problem.

    I know how to set div/container/sidebar sizes, also, just not how to get the text inside the container to fill them perfectly so there is no empty space.

    I’d also appreciate if anyone can think of search terms that might help me find more information on this–I’m having trouble thinking of a short phrase that describes what I want to do, which makes the Googling nonproductive.

    Much thanks!

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hi elianna,

    You could just give the div, p, or whatever containment element a display:block; and set the height to a specific pixel count, then give it an overflow-y:hidden. See this fiddle to see what I mean in action. Hopefully that helps, and let us (or me) know if that doesn’t do the trick for you.

    Best,
    Connor

    Thread Starter elianna

    (@elianna)

    That seems like a good place to start. The problem is that leaves us with a truncated article without a clear way to read more. Do you have any suggestions about how to automatically insert a “read more” link where the article is getting cut off? I guess I could also just set a “read more” link to appear in a specific place right below the cut-off point (maybe easier than telling WordPress to automatically sense the cut-off point?), if I knew how to tell WordPress what article the link should point at (which I don’t).

    Thanks for your help!–I’d be happy to hear more ideas.

    Yep – give the div, p, or whatever containment element a position: relative;. The, instead of just calling <?php the_content(); ?>, you could do something like <?php the_content('<span class="read">Read more</span>'); ?>, and then give the .read class a position:absolute; and then position it that way, so they are all the same?

    I think that would be a pretty nifty solution to your problem – what are your thoughts?

    Best,
    Connor
    @c_t_montgomery

    Thread Starter elianna

    (@elianna)

    Thanks for your help–that worked quite well.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Fill front-page rectangle with even-edged text, like a newspaper?’ is closed to new replies.