WordPress.org

Support

Support » Themes and Templates » Spun » [Resolved] Enlarging circles and changing amount of space between them

[Resolved] Enlarging circles and changing amount of space between them

  • 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

Viewing 6 replies - 1 through 6 (of 6 total)
  • Siobhan Bamber (siobhyb)

    @siobhyb

    Automattic Happiness Engineer

    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.

    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;
    }

    Siobhan Bamber (siobhyb)

    @siobhyb

    Automattic Happiness Engineer

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

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    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%;
    }

    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

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    @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

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘[Resolved] Enlarging circles and changing amount of space between them’ is closed to new replies.
Skip to toolbar