Minimum Theme Circles

Note: This tutorial is for Minimum 2.0. The newer Minimum Pro theme uses the Simple Social Icons plugin for the circles.

One of my favorite dream themes from StudioPress is the Minimum Theme (aff link). I lurve those big, beautiful social media icons on the Minimum home page. Let’s gaze at them together:

Minimum-Theme-Circles

Done gazing? If not, feel free to circle back around and peek again (see what I did there?).

I’ve shown you a couple of nifty Minimum Theme customizations in the past, like how to lay text over image on the home page or swap out that image for a slider.

But today?

Today we’re making circles!

Customize Those Circles!

I’m going to assume you know how to set up those circles per the Minimum Theme demo because you’ve done your homework and read the Minimum set-up instructions.

But why stop there? We can do lots of things with those circles. Below are the “how-to’s” for some popular customization options.

Change the Colors of the Circles

Let’s warm up with a simple customization. Open up the style.css file and do a search for Home Featured. You’ll find it first in the table of contents and then again around line 513.

That’s where we’re hanging out today.

Drop your eyes a bit and you’ll see the following sections of CSS:


#home-featured a.icon-facebook,
#home-featured a.icon-facebook:hover,
#home-featured a.icon-google,
#home-featured a.icon-google:hover,
#home-featured a.icon-pinterest,
#home-featured a.icon-pinterest:hover,
#home-featured a.icon-twitter,
#home-featured a.icon-twitter:hover {
-moz-border-radius: 50%;
-webkit-border-radius: 50px;
background: #ddd url(images/icons.png);
border-radius: 50%;
display: block;
height: 140px;
margin: 0 auto 30px;
padding: 0;
text-indent: -9999px;
width: 140px;
}

#home-featured a.icon-facebook:hover,
#home-featured a.icon-google:hover,
#home-featured a.icon-pinterest:hover,
#home-featured a.icon-twitter:hover {
background: #ed702b url(images/icons.png);
}

Did you see it? I’ll give you a hint: You’re looking for background. It’s in there twice. The first time sets the inactive background color and the second time sets the hover color.

Change those HEX values to whatever you want, save your updates, and enjoy!

Change the Icons in the Circles

** Note, you’ll need FTP access to your files and graphics editing software such as Photoshop or GIMP for this one.

This is a fun one! On a recent project for FWlocal.com, I swapped out the social media icons for real estate icons, like this:

Minimum-Circles-Custom-Icons

If you go back to the CSS in the first example, you’ll notice that, in addition to the background color, there’s a background image associated with the circles. It’s called icons.png. You’ll have to FTP into the depths of your theme files for this one. You’ll find it at wp-content/themes/minimum/images/icons.png.

It’s a single transparent file containing each of the 4 social media icons. Here it is (background color added so you can see the white icons):

icons

We’ve got to do a couple things with this: 1) Find new icons to use, 2) Create a new icons.png.

1. Find new icons to use

I’m really going to leave this to your search & find, and/or design skills. If you’re at a total loss for inspiration, here are some free graphics from StudioPress. Otherwise, just start Googling for whatever type of icons you want and you’ll be sure to find a load.

One important note though: You only want to deal with icons on a transparent background. Otherwise you’ll make fugly circles.

2. Create a new icons.png

Open up icons.png in Photoshop or whatever graphics editor you use. The original icons are white and the background is transparent (though I changed the icons to green for easier viewing in the screenshot below).

You’re going to drop in your new icons over the existing icons and try to position them the same. I’m sure there’s a pixel-perfect method, but here’s a rough demonstration for your visualization pleasure:

New-Icons

Once your icons are in place, save your new icons.png as a PNG-24 (this preserves the transparency without any funky mattes around the icons).

Hop back over to FTP and replace the original icons.png with your new file. Clear your browser cache, refresh the page, and you’ll see MAGIC in your circles.

Bonus! If you want your icon color to change on hover (not just the circle, but the icon), duplicate your icons.png and rename it icons-hover.png (or whatever) and set that as the background image for the hover state. Don’t forget to upload it!

Here’s an incomplete snippet for example:


#home-featured a.icon-facebook,
#home-featured a.icon-google,
#home-featured a.icon-pinterest,
#home-featured a.icon-twitter {
background: #ddd url(images/icons.png);
}

#home-featured a.icon-facebook:hover,
#home-featured a.icon-google:hover,
#home-featured a.icon-pinterest:hover,
#home-featured a.icon-twitter:hover {
background: #000 url(images/icons-hover.png);
}

Change the Circles into Squares (GASP!)

Round is funny, so I have no idea why you’d want to change your circles to squares, but IF YOU DO, here’s how:

Go back to the CSS in the Home Featured section. This time we’re on the hunt for the border-radius attribute.


#home-featured a.icon-facebook,
#home-featured a.icon-facebook:hover,
#home-featured a.icon-google,
#home-featured a.icon-google:hover,
#home-featured a.icon-pinterest,
#home-featured a.icon-pinterest:hover,
#home-featured a.icon-twitter,
#home-featured a.icon-twitter:hover {
-moz-border-radius: 50%;
-webkit-border-radius: 50px;
background: #ddd url(images/icons.png);
border-radius: 50%;
display: block;
height: 140px;
margin: 0 auto 30px;
padding: 0;
text-indent: -9999px;
width: 140px;
}

If you want to be square, remove the following lines completely:


-moz-border-radius: 50%;
-webkit-border-radius: 50px;
border-radius: 50%;

If you want to go somewhere in the middle (like a rounded square!), swap those 50’s out for 25’s. Or 15’s if you’re feeling crazy.

If you’re fascinated by the concept of rounded borders in CSS, here’s an article you might enjoy.

Change the Icons into Photos

We’re about to get full on nuts with this final customization. You ready? Instead of icons, let’s find some cool photos to use. I’m going to stick with 4 photos the same dimensions as the original circles (140px), just to make it simple.

Run over to Photoshop and create a new document that’s 280px by 280px. Use guides or just your eyeballs to break it into 4 equal squares. Then drop in 4 photographs, each sized at 140px. Like this:

doggies

I’m going to save out a full color version called doggies.jpg and a black & white version called doggies-bw.jpg. Upload both files to the images folder.

Now for the CSS! Instead of using a background color with the transparent icon overlay, I’m going to replace it with my doggie photos, like this:


#home-featured a.icon-facebook,
#home-featured a.icon-google,
#home-featured a.icon-pinterest,
#home-featured a.icon-twitter {
background: url(images/doggies-bw.jpg);
}

#home-featured a.icon-facebook:hover,
#home-featured a.icon-google:hover,
#home-featured a.icon-pinterest:hover,
#home-featured a.icon-twitter:hover {
background: url(images/doggies.jpg);
}

We’re not quite finished with the CSS yet. Our “doggies” canvas is slightly larger than the original “icons” image, so we need to adjust the positioning in the CSS here.

Find this CSS:


#home-featured a.icon-facebook,
#home-featured a.icon-facebook:hover {
background-position: 0 0;
}

#home-featured a.icon-google,
#home-featured a.icon-google:hover {
background-position: -138px 0;
}

#home-featured a.icon-pinterest,
#home-featured a.icon-pinterest:hover {
background-position: 0 -138px;
}

#home-featured a.icon-twitter,
#home-featured a.icon-twitter:hover {
background-position: -138px -138px;
}

We’re gonna change it just slightly to account for the extra pixel height/width, so the new CSS looks like this:


#home-featured a.icon-facebook,
#home-featured a.icon-facebook:hover {
background-position: 0 0;
}

#home-featured a.icon-google,
#home-featured a.icon-google:hover {
background-position: -140px 0;
}

#home-featured a.icon-pinterest,
#home-featured a.icon-pinterest:hover {
background-position: 0 -140px;
}

#home-featured a.icon-twitter,
#home-featured a.icon-twitter:hover {
background-position: -140px -140px;
}

Once we’ve got our new doggie photos in and the CSS background positions adjusted, we’ll have these faces to look at:

Doggie-Rollovers

I know. I could/should change the CSS to not be named for social icons, but I’m entirely too lazy.

Spin Me Right Round

Do you have your own Minimum theme customizations you’d like to show off? Leave a comment and let me see what you’ve done!

37 thoughts on “Minimum Theme Circles”

  1. Great article Carrie Dils, educational and entertaining! Im so lazy Im just gonna copy that code and use those dog photos too! But really we’re not lazy… we just like to crawl out from under the computer once in a while 🙂 Thx for sharing

  2. I love this tutorial. It makes me think that I could actually do it. I like the Minimum theme, but have always been afraid of messing around with the css editor.

  3. Carrie,
    I have somewhat of a newbie to Genesis and web design and trying to start a business doing websites. I discovered your site a while back and wanted to say – you are an inspiration! You have the best blogs and all your information has really helped me. I am doing my own site right now using the Minimum theme and am going to try these circles. Thank you for all your wonderful information.

    1. You could pay me to. 🙂 But you could just find an instagram icon you like that’s A) either in the style of the other social media icons or B) swap all social media icons out for your own style and re-create the icons.png file per this tutorial.

  4. Wow Carrie. I didn’t realize this took all this work. Thought it might have been a widget or something. I’m one lucky dude to have you working with me on this. Thank you

  5. Carrie,

    Thanks for sharing your insight and wisdom. I used it to quickly modify the theme and get the results I liked. Now that the Minimum Pro theme is out, I was toying with upgrading… to learn the “circles” have a new approach.

    Curious if the method outlined above would still work, albeit now by adding some code… somewhere. I’m still wrapping my head around the “benefits” of HTML5.

    I like the idea of the new theme. I also like my circles.

    1. Hi Michael,

      Minimum Pro is using the Simple Social Icons plugin to render those icons, which is much simpler than the method I outline above.

      If you didn’t want to use social icons, you could use something like Font Awesome instead and just style it the same way. 🙂

      Carrie

      1. In old Minimum I used your tips, Carrie, and had a cool halo rollover effect with image circles inside the colour/rollover circles. Upgraded to Pro and now I’m like a lost puppy again. Anyone know how I can do a simple image rollover like Carrie did with the dogs? But… of course, with Minimum PRO. Thanks to all for all the comments above that have helped me build my site!

  6. Hi Carrie,

    I love hunting and finding fun cheats and workarounds like this. A search of Google for “simple social icons genesis minimum” brought me to this post. Your “cheeky” manipulation of CSS and image files is inspiring! However, I was working with the new Minimum Pro theme and could not take advantage of your modifications.

    You did however motivate me to extend the circularity of my design. The major manipulation I did was to add a second group of four home featured widgets. Using CSS I designed the circles numbered one to eight that serve as navigation links.

    Have a look if you like.

    All the Best,

    Anthony

Leave a Comment

Your email address will not be published. Required fields are marked *

Carrie Dils uses Accessibility Checker to monitor our website's accessibility.