Need help? Check out our Support site, then


Problem with Widget Images in Twenty Ten Theme

  1. Up until about a week ago, all widget images in Twenty Ten Theme were enclosed by a sharp looking darker gray box.

    Suddenly, images are now spilling out over the top of the widget boxes... Looking uneven and very sloppy.

    We never touched the CSS.

    Can someone please help us fix this? I know it may seem minor to some, but we strive to have a nice looking site.

    Many, Many Thanks!

    Best,

    Ian

    The blog I need help with is inveteratemediajunkies.com.

  2. Hi Ian!

    To confirm, is this the behavior you're talking about?

    I see a recent change to Twenty Ten that may be causing this. In the meantime, you can add the following CSS to Custom CSS to fix it:

    .widget-container .wp-caption img {<br /> margin: 5px auto 0;<br /> }

    I hope this helps!

  3. SixHours... That worked perfectly!

    You were so quick!

    We're ready to move the site to WP.org but this kind of thing is precisely why we need the help of some proficient in CSS.

    Thank you so much-- again! Have a great weekend!

  4. Let me know if you ever need work! :)

  5. :) Happy to help!

  6. Hi Ian,

    Just a heads-up that we've made some adjustments to fix this in the theme. As a result, you'll just need to make a few adjustments to your Custom CSS to get the images aligned properly inside the caption box. :)

    You have the following custom style:

    #wrapper .wp-caption {
           margin: 0;
           padding: 0;
    }

    That is now causing your captioned widget images to align too far to the left. You can either remove this altogether, or to keep this code around for your post content (and not have it apply to widgets), change it to this:

    .entry-content .wp-caption {
           margin: 0;
           padding: 0;
    }

    You can keep the code that @sixhours gave you above, or remove it, it's up to you. The 5px top margin may no longer be necessary, however.

    You should now be good to go. Let us know if anything else looks out of whack.

  7. MichieCat--

    Things were working spectacularly after @SixHours' fix. Now things are back to bad again-- even with your above change implemented in the CSS. I did exactly what you told me to do... And the Widgets in the SIDEBAR look fine...

    But the widgets at the BOTTOM OF THE PAGE now have a thicker border on the right than the left. Plus, if you look at the third line of widgets at the bottom-- specifically the "New Comics List" widget-- you will see that this image is now bleeding over the left and right-- with zero border around it. (I have done nothing to alter this widget myself.)

    Implementing your CSS Code after you folks made another change to the Theme made things better (for the sidebar widgets) but we need to have the images at the bottom centered again. They look horrible.

    Keeping or removing @SixHours code made no different. Setting all the widgets to center the images made no difference.

    Any help you can provide as quickly as possible would be very helpful. Please help as soon as you can! I will wait for your reply.

    Also, is there a way to lock a theme? We were very satisfied by the way it WAS and find waking up to these changes (or suddenly clicking on the site to see things looking different when we did nothing to change the style) maddening. :) I wish I understood CSS better myself but I just can't get the hang of it.

    Thanks,

    Ian

  8. Michie Cat--

    The "Manga We Like" and the "Video Game We Like" widgets are also off to the left as well... Bleeding over to the left.

  9. Michie Cat--

    Now that I look at it, the ENTIRE bottom widget section is misaligned in various way.

    Thanks,

    Ian

  10. And now I see the Contact Us image on the Sidebar is also horribly inflated and cut off by at least a third.

  11. Hi Ian!

    Many apologizes for the frustration. I completely overlooked your footer widgets earlier. Can you paste the following CSS at the bottom of your Custom CSS?

    .widget-container.widget_image .wp-caption,
    .widget-container.widget_image .wp-caption img {
        max-width: 100%;
    }
    
    #footer-widget-area .widget-container.widget_image .wp-caption img {
        margin: 5px auto 0;
    }

    That should take care of the spacing and sizing issues. I tested it on your site and it looked good to me, but give it a shot and let me know how it looks on your end. We'll get this looking right!

    Also, is there a way to lock a theme? We were very satisfied by the way it WAS and find waking up to these changes (or suddenly clicking on the site to see things looking different when we did nothing to change the style) maddening. :) I wish I understood CSS better myself but I just can't get the hang of it.

    At this time I'm afraid there isn't a way to "lock" a theme. We aim to be as careful as we can when making CSS fixes so that we don't "break" things, but sometimes, as you've seen, bugs slip through. I understand that it can be jarring when your theme's appearance changes even though you didn't make any of those changes yourself.

  12. MichieCat,

    Thanks for the fix! The widgets at the bottom look great again. I think the border around them is a little thicker-- which makes them look nicer!

    Yes it IS jarring to wake up and find your site looking different... But I also understand you folks try to be as careful as possible. After all, I don't know a single person who actively tries to create MORE WORK for themselves. :)

    Again, many thanks for the fix.

    Ian

Topic Closed

This topic has been closed to new replies.

About this Topic