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. Hi, Carrie!

    It doesn’t look like I even have that icons.png file in my FTP (wp-content/themes/minimum/images/icons.png); I have “Minimum Pro”–does that have anything to do with this issue? The only “icons” in my Images folder = an “icons” folder, which only contains a portfolio.png (a tiny icon). Does that mean I’d have to create a new icons.png? If so, what would be the best dimensions? Would I also add it to the CSS?

    Another issue I’ve come across w/the code in my CSS’s home-featured section is that where there should be what you included above, I only see the following:

    /* Site Containers
    ——————————————— */

    .home-featured {
    border-bottom: 5px solid #f5f5f5;
    margin-bottom: 60px;
    margin-bottom: 6rem;
    padding: 40px 0;
    padding: 4rem 0;
    }

    .home-featured li {
    list-style-type: none;
    }

    .home-featured .widget {
    padding: 0 20px;
    padding: 0 2rem;
    }

    .home-featured-1,
    .home-featured-2,
    .home-featured-3,
    .home-featured-4 {
    float: left;
    text-align: center;
    width: 25%;
    }

    .home-featured .simple-social-icons ul li a {
    padding: 40px !important;
    padding: 4rem !important;
    }

    .home-featured .simple-social-icons ul li {
    margin: 0 0 30px !important;
    margin: 0 0 3rem !important;
    }

    .site-tagline {
    ……………..

    The other seven times that “home-featured” appears are in sections that don’t have to do w/those social icons :/. Should I then add the code you have provided here or try something else?

    I’ve only been on WP for a few months, so forgive my apparent ignorance : ) if something’s super obvious and I totally missed it. THANK you in advance!

    1. Howdy,
      This tutorial is for the older version of Minimum. The Minimum Pro circles are set up using the Simple Social Icons plugin (much easier) – see the setup tutorial over on the StudioPress site for more info on how to implement.

      Cheers,
      Carrie

  2. Hi there. I’ve been looking everywhere to get that white png pinterest icon with just the P and no background or circle etc. Is the one you’ve shown here the same? Do you know where I can download it for my website?

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.