ThemeShaper Forums » Thematic

format all pages to split images and text

(8 posts)
  • Started 10 years ago by bwirth
  • Latest reply from Jonny Janiero
  • This topic is resolved
  1. notice how this page looks like 2 columns, the image to the left and text in a column to the right?

    thats what i need to accomplish here:

    what is the best way to go about this? I added float: left to .entry-content img, but thats as far as i got.

    Thank you!

    Posted 10 years ago #
  2. I'm still not sure where to go with this,

    Thank you!

    Posted 10 years ago #
  3. lots of ways to skin this cat. My first thought off the top of my head would be to stick alot of left margin on the text, forcing it over to the right. Depending on the technical savvy-ness of the blogger, I'd rather leave the loop alone if I can for something like this, and just use css. That way, as long as you float your images to the left, and the text is forced over to the right via margin, you get the desired result without too much code shenanigans. You should be able to do the same for postheader and postfooter stuff.

    If you want to get into code shenanigans, you're probably looking at creating a custom loop, adding containing div's for the content, and having to get fancy with image placement, along with filtering the postheader and postfooter stuff.

    Downside is...Gonna be alot of code in functions.php... which will be a good deal of trial, error, work...

    Upside is you'd have a fabulously customized look.

    Everything for a price...

    Posted 10 years ago #
  4. well the image is part of the entry-content div so one can't just throw a margin on it to move the text. i thought about applying a margin to the cascading p tag too, but the image is still wrapped in one.

    my first thought would be to enable thumbnail support and insert the image via the thumbnail call in the single loop. if you are using a newer version of thematic you can go straight to an override function. might need some tests for IF it has an image, define different thumb size, etc... but this is prolly how i'd start:

    add_theme_support( 'post-thumbnails' );
    function childtheme_override_single_post() { 
    the_post_thumbnail( 'thumbnail' )
    <div id="post-<?php the_ID(); ?>" class="<?php thematic_post_class(); ?>">
    <?php thematic_postheader(); ?>
    <div class="entry-content">
    <?php thematic_content(); ?>
    <?php wp_link_pages('before=<div class="page-link">' .__('Pages:', 'thematic') . '&after=</div>') ?>
    <?php thematic_postfooter(); ?>
    </div><!-- .post -->

    and you didn't ask for my suggestion on this at all so feel free to ignore me, but i'd suggest you do something about all the background.

    Posted 10 years ago #
  5. Or an easy super-cheaty way would be to click on the image settings in the post and under advanced settings add a float left with enough padding-bottom to equal 100%. It is not an ideal solution but sometimes, and I'm guessing in this case, easy is good.

    I agree the contrasty background is too distracting, but I think the same pattern would look really great if instead of the white against the dark green it was a subtly lighter shade of dark green.

    Posted 10 years ago #
  6. thanks for the help everyone, and helga, the whole page is ugly as sin but this is what the customer wants lol. Im just converting the existing website to wordpress.

    My super simple solution was to add this to default.css

    .entry-content img {
    float: left;
    margin: 5px 5px 500px 0;


    just added a bottom margin

    Posted 10 years ago #
  7. ok, well now that i know it is not your design... i have no qualms about agreeing w/ your statement that it is ugly as sin. straight out of the early 90s.

    it is really funny how customers often think they know better and yet are usually (if not always) wrong! atleast in design-world. :)

    for your amusement:

    Posted 10 years ago #
  8. that link is so true

    Posted 10 years ago #

RSS feed for this topic


You must log in to post.