Text crowding feature image and thumbnails

I'm not happy with the way the text wraps when feature image is used. Obviously I want to use feature image so that the photo goes to the category and products pages, but the text is not attractive when it is too close to the image like it is when feature image is used.
I don't have this problem when I use add to post to place an image.
You can see an example of what I mean by looking at one of my category pages:
I thought I had solved the problem by adding a border before uploading the photo. I like the way the border looks, but it didn't work when the image is shown as a thumbnail. Here is a single product page so you can see how it looks with the border.
The way the single product page looks is acceptable, but I would prefer to have the title first then the image then the discription below it, and I don't know where or how to make these changes. Of course I could use a whole bunch of spaces to make the text go below the picture, but can't get the title above and yea....that would be a pain to do for each product. There has to be a better way.

  • Patrick

    Hi Catrina,

    I see what you mean. For some reason, the border is being truncated on the sides (or top & bottom if vertical rectangle). I've tried various css rules in Firebug but can't seem to get the entire border to display on your category page as it does on a single product page.

    You can, however, give each image a bit of breathing room by simply adding the following in your theme's style.css file:

    #mp_product_list .alignleft {margin-right:20px;}

    Hope this helps!

  • Catrina

    Hi Guys,
    Thank you, thank you!!!
    First of all, I'm new enough here that I don't fully understand the giving points as thank you gifts thing. Is there some documentation that explains it? I think you both need more points for this but I don't know what is customary.
    The padding worked perfectly and so did moving the title above the feature image. After I got that done I decided I liked it wrapped so I didn't go ahead and center the pictures. Actually I think I tried that once and it didn't work, but in any case I like it how it is.
    I was not able to fix the frames on the thumbnails however. I thought it had something to do with the size settings for thumbnails so I went into the store settings settings, on the presentation tab under product list settings and tried first unchecking the box the says crop thumbnail to exact dimensions (normally thumbnails are proportional). Also tried fooling around with the thumbnail size (by clicking on the thumbnail link to media settings), and by playing around with custom size settings. They seem to change the thumbnail size, but the problem with the frames always remains....any ideas?

    Point taken on the child themes and thank you for that tip. This is not a standard common theme, but I really like it. I don't intend to change it in the near future in fact I had the same graphics and appearance in a css theme before I switched to wordpress. The place I got it from had the same theme for wordpress so I stuck with it. I don't know if they even do updates, however...wouldn't want to make more work for myself in the future so here's the question. I have the origional theme stored in a zipped folder on my computer. I haven't made that many changes. Just some css changes and some text changes. Oh yeah, I think I also put the code for the ads directly into the php files. So...can I just make what ever I'm using now a child theme of the one I have saved? Do I have to do it now or could I just wait until the point at which I am looking to update the theme, since I still have more css changes that I will likely make?


  • Patrick

    Hi again Catrina,

    Yes, you can use the theme you have modified as a child of the original. Here`s a simple walkthrough:

    1. Open the style.css file of your modified version. Add the following before everything (at the very top):

    Theme Name:     Name of Your Customized Child Theme Here
    Theme URI:      http: //example.com/
    Description:    Child theme for the *Parent* theme
    Author:         Your name here
    Author URI:     http: //example.com/about/
    Template:       parent-theme-name-here
    Version:        0.1.0
    @import url("../parent-theme-name-here/style.css");

    2. Insert the name of your child-theme after "Theme Name". Insert the name of the parent theme after "Template"... that would be exactly the same as the main folder of your original theme (including hyphens and/or underscores). All the other labels are optional, but "Theme Name" and "Template" must be defined.

    3. You must also change the @import url to reflect the name of your parent theme.

    4. Make sure both themes are unzipped and uploaded to your wp-content/themes folder.

    5. Under Appearance > Themes in your WP backend, activate your child-theme only. Do not activate the parent (your original theme).

    6. From this point onward, make changes to the child only .If your child-theme requires a template from the parent that you have not yet included, be sure to respect the original folder structure.

    Now, you can safely update the parent, if and when it updates, without losing any customizations in the child, which will inherit all the updated goodness of its parent.

    For more detailed info on child-themes, see the WP codex here: http://codex.wordpress.org/Child_Themes

    Hope this helps! :slight_smile:

  • DavidM

    More good points pcwriter, thanks for helping with that explanation!

    @Katrina, no need to send points my way, but definitely, if members are as helpful as pcwriter, I'd send 'em some points! :slight_smile:

    And yeah, you wouldn't necessarily need a child theme, it just makes it easier when the parent theme is updated. If it's easier to make the adjustments directly in the theme, that might be the better method.

  • Catrina

    I'm just reporting baci to let you know that I solved this problem. The code snippit that pcwriter gave me in the first tip did add some space, but putting frames on the photos also seemed to give it some padding. There is probably a similar snippit that would give padding to the multiple product pages. I did figure out why the frames were messed up on the thumbnails. It was a simple setting change as I suggested above (unchecking the crop to exact dimentions box). What I didn't know is that it doesen't fix pictures that are already uploaded. The thumbnails that I uploaded next were fine, I had to delete the images and reupload them under the new settings and then it worked.

    This topic I would call resolved.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.