WordPress.org

Ready to get started?Download WordPress

Forums

Spun
[resolved] Enlarging circles and changing amount of space between them (7 posts)

  1. lizzietschornow
    Member
    Posted 11 months ago #

    Hi,

    Is there a way of enlarging the circles and also changing the amount of space between them? I would like there to be slightly more space between them.

    Thanks

    Lizzie

  2. Siobhan Bamber (siobhyb)
    Forum Mod.
    Posted 11 months ago #

    Hey, yes, to enlarge the circles use the following snippet in your child theme's style.css file:

    /* Changing the size of circles with no thumbnail */
    .hentry.no-thumbnail{
    border-radius: 220px;
    width: 220px;
    max-width: 220px;
    height: 220px;
    max-height: 220px;
    }
    
    /* Changing the size of circles with a thumbnail */
    .hentry {
    width: 220px;
    height: 220px;
    }
    
    .blog .hentry a .attachment-post-thumbnail{
    border-radius: 220px;
    }
    
    .blog .hentry a:hover img{
    border-radius: 220px;
    }

    Change the values of the border-radius, max-width, width, max-height and height attributes as you wish. It's important that all five attributes are of equal value to each other in order to maintain the circle's shape.

    To change the amount of space between the circles:

    .hentry{
    margin: 20px;
    }

    Increase or decrease the value for margin as you wish, depending on how much/little spacing you want. :)

    Let me know if there's anything I've missed out or if there's anything else you need help with.

  3. lizzietschornow
    Member
    Posted 11 months ago #

    Thanks Siobhan... do you need all of this to change the circle size:

    /* Changing the size of circles with no thumbnail */
    .hentry.no-thumbnail{
    border-radius: 220px;
    width: 220px;
    max-width: 220px;
    height: 220px;
    max-height: 220px;
    }

    /* Changing the size of circles with a thumbnail */
    .hentry {
    width: 220px;
    height: 220px;
    }

    .blog .hentry a .attachment-post-thumbnail{
    border-radius: 220px;
    }

    .blog .hentry a:hover img{
    border-radius: 220px;
    }

  4. Siobhan Bamber (siobhyb)
    Forum Mod.
    Posted 11 months ago #

    I'm afraid so. I know that it seems like a lot!

  5. Andrew
    Forum Moderator
    Posted 11 months ago #

    You could reduce it down to:

    /* Changing the size of circles with no thumbnail */
    .hentry.no-thumbnail {
     max-width: 220px;
     max-height: 220px;
    }
    
    .hentry.no-thumbnail,
    .hentry {
     width: 220px;
     height: 220px;
    }
    
    .hentry.no-thumbnail,
    .hentry,
    .blog .hentry a .attachment-post-thumbnail,
    .blog .hentry a:hover img {
      /* Safari 3-4, iOS 1-3.2, Android 1.6- */
      -webkit-border-radius: 100%;
    
      /* Firefox 1-3.6 */
      -moz-border-radius: 100%;
    
      /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
      border-radius: 100%;
    }
  6. boblee84
    Member
    Posted 7 months ago #

    I tried Andrew's solution, which worked great, except now my circles aren't centered on the page anymore-- they're off to the left a bit. Any ideas?

    http://www.burbivore.org

  7. Andrew
    Forum Moderator
    Posted 7 months ago #

    @boblee84, your circles seem centred to me. Can you start up a new thread about that if you still have the issue?
    http://wordpress.org/support/theme/spun#postform

Reply

You must log in to post.

About this Theme

About this Topic