Need help? Check out our Support site, then


Reducing Space Between Photo Widgets, Structure Theme?

  1. Hi

    I have just added several photo widgets to the homepage on my blog using the Structure theme. (http://studio2792.wordpress.com/) It was looking too full with text so the images break up the text and look a whole lot better, as well as allowing me to link to my short films via the homepage. However, my issue is that there is a lot of space between the widgets. I would prefer to have a smaller gap between each image (and so widget) so that there is less negative space and it looks nicer. Is there a way of reducing the gap between the widgets so that the images appear closer together? (This may well be a CSS question, but help would be very much appreciated.

    The blog I need help with is studio2792.wordpress.com.

  2. The Structure theme has unique features and is coded to operate in a specific manner. See here > http://wpbtips.wordpress.com/2010/05/01/introduction-to-structure/ As your blog is "private" we cannot see what you refer to. However, what we do know is that space between widgets cannot be changed unless (1) your have CSS editing experience and (2) purchase an annual renewable custom design upgrade.
    http://en.support.wordpress.com/custom-design/

  3. @timethief Thanks for the link to the introduction to structure.

    As for the CSS, I am currently previewing the CSS Stylesheet Editor before purchasing. I want to make sure I know a bit more about CSS before I buy the upgrade, although I definitely will as I have the site looking as I like it. Bearing that in mind, do you happen to know what part of the CSS code would alter the space between the widgets?

  4. All CSS editing here is theme dependent. There is Staff support and one Volunteer of late thesacredpath who helps but can't. This is the tag for the theme which has been CSS edited by others so if you look through the threads you may find what you seek. http://en.forums.wordpress.com/tags/structure

    When you alter a theme’s stylesheet, you only need to put in the Editor the modification/additions to the CSS, not the entire thing. Read this for more info:
    http://csswiz.wordpress.com/2009/10/15/if-you-have-the-wp-com-css-upgrade/

  5. drat! I meant to type "but I can't." above
    Hopefully, thesacredpath will enter this thread and help you.

  6. Since your site is set to private I can't take a look, but if you temporarily set it to public using the center option at settings > privacy I'll be happy to give you some code to try out.

  7. @thesacredpath Done, you should be able to view it now.

  8. Yup, there it is. Add and adjust the 20px value (bottom margin) in the following.

    #sidebar_right .widget, #sidebar_left .widget {
    margin: 0 0 20px;
    }

    If you only want to tighten up the image widgets and leave the others alone, then use the following and adjust the 20px value:

    .widget_image {
    margin-bottom: 20px !important;
    }
  9. @thesacredpath Thanks, that's done it.

    One thing that I've noticed is the image widgets appear on the news page, which is where posts in the "news" category are displayed to make it seem like a dynamic blog page. I want to see whether it looks better without the image widgets displaying there, but remaining on the home page. Is there some way of doing that?

  10. The following would take the image widgets off of all archives, categories and tags pages.

    .archive .widget_image {
    display: none;
    }

    This will take them only off of the "news" category page.

    .category-news-2 .widget_image {
    display: none;
    }
  11. BTW, I've tagged this so a moderator can move it to the CSS forum since what we are going through is really more CSS related and could help people in the future.

  12. Hi, I'm trying to do the same thing i.e. reduce the space between photo widgets, in the homepage top right widget. Before I had a text widget there, but am now using the space to display images that link to pages. The problem is the gap between each is too large, and it is ruining the look of the page. I've tried searching for the hompage top right widget code to amend it, but without success. Help would be much appreciated.

  13. As I suggested in your other thread, use one text widget instead of three image widgets. (Need an example?)

  14. @panaghiotisadam Oh I see! Got a bit confused, thought you meant use image widgets instead. An example may help, yes.

  15. Add a Text widget to the Homepage Top Right area and paste this into it:

    <a href="http://studio2792.wordpress.com/films/"><img style="margin-bottom:7px;" src="http://wpbtips.files.wordpress.com/2011/07/2792films.jpg" title="FILMS: Watch our award winning short films" /></a>
    
    <a href="http://studio2792.wordpress.com/category/news-2/"><img style="margin-bottom:7px;" src="http://wpbtips.files.wordpress.com/2011/07/2792news.jpg" title="NEWS: Keep up to date with all our latest news" /></a>
    
    <a href="http://studio2792.wordpress.com/about/"><img src="http://wpbtips.files.wordpress.com/2011/07/2792about.jpg" title="ABOUT US: Who we are, what we do, and what we can offer." /></a>

    Note: I made all three images uniform: resolution 72, dimensions 310x122. You get better quality if you use properly sized images instead of letting WP do the resizing - see here:
    http://wpbtips.wordpress.com/2010/01/16/image-quality/

  16. @panaghiotisadam Thank you so much, that's brilliant! Looks much much better and with the improved resolution much crisper too. The image quality link will be very helpful for the future too, thanks again!

  17. You're welcome! (And of course you'll edit your images, upload them via Media > Add New, and replace my URLs with yours.)

  18. Done, replaced your images and the urls with my own. Thanks for the advice!

Topic Closed

This topic has been closed to new replies.

About this Topic