Customize Simple Social Icons

The Simple Social Icons plugin is an easy to use, customizable way to display icons that link visitors to your various social media profiles.

With a simple widget options interface, you can choose which profiles to show, customize the color and size of your icons, and specify the alignment of them.

The default output of the Simple Social Icons is one set of colors. However, it’s possible to use CSS for customizing the icons to match the color of their brand.

Customize the Social Icons

Below is the CSS that is required to customize each of the social media icons:

While the use of !important isn’t ideal, it is a necessary part of the code. Be sure to set the Icon Font Hover Color to #fff and the Background Color to #fff in the widget options as this will universally apply white to all social media profiles.

I hope that you enjoyed this Genesis tutorial. I have also published a list of Genesis code snippets, so feel free to use anything you see there.

Display an Author Gravatar

If you’re a fan of Medium, then you’re familiar with the way they display profile images on the user page. Here’s an example of what I’m talking about.

A few months back I was really inspired by the Medium look, so I designed the Ambiance Pro theme with a similar design style. I still really like the way it looks, and this weekend I started working on something that was focused on content.

I felt like it was missing something, though, so I decided to add a little visual stimulation to the design. You can see what I did in the screenshot below.

I don’t think all single posts should have this kind of design, but for those that do I’ll show you how easy it is to add a photo of the author at the top of the page.

Display Author Gravatar

The first step is creating a function that will output the author Gravatar and hook it above the entry title. Below is the code that you will need to do that:

Now you’ll want to style the author Gravatar, and the CSS below should give you a place to start. Obviously you may want to customize it to your own liking.

I hope that you enjoyed this Genesis tutorial. I have also published a list of Genesis code snippets, so feel free to use anything you see there.

Building a Custom Genesis Theme

I’m asked quite frequently about my workflow when I build Genesis themes. While it may vary from time to time, there’s a short list of things I do right away when developing custom themes for folks.

This was true when I developed Becoming Minimalist and Your Boulder, and also when I did my own redesign here. I thought that I’d share the first 5 things I do when building a custom Genesis theme.

1. Remove Unnecessary CSS

I like to run a lean ship, so I approach my style sheet with a minimalist mindset. If I don’t need something, I remove it before I even get started.

Examples of things in a style sheet that I’d remove would be declaration blocks for sidebars, footer widgets, and widget areas that I know I won’t be using.

2. Remove Media Queries

Even though our StudioPress themes are mobile responsive and include CSS for media queries, I make enough changes in a theme that warrants this removal.

Once I’m done designing the desktop version, I’ll go back and add in the media queries. Since I add containers and elements when building a theme, this ensures that I don’t miss anything by the time I finish.

3. Remove Approved HTML Tags

This is something that makes me cringe every time I see it on another site. I’m not exactly sure why, and my guess is that it’s very seldom used by site visitors.

You can remove the approved HTML tags container with this code:

4. Remove Layouts/Sidebars

This is something that quite honestly isn’t necessary, but I still do it. When I know that I won’t be using specific site layouts or sidebars, I feel better removing them.

You can remove the site layouts with this code:

You can remove the primary and secondary sidebars with this code:

Obviously you need to modify the code above depending on which site layouts and sidebars you won’t be using. The code above is what I used on my site, because I’m only using a full-width content site layout and no sidebars

5. Optimize Gravatars

This is a process that for me is really not necessary anymore because I’m using the Mobile First theme I created as a starter theme.

Prior to that, it was the Genesis Sample theme which, at the time, didn’t include functions and CSS to optimize Gravatars for Retina Display. If your theme doesn’t have it, and you want to do this manually, following this tutorial should help.

And there you have it … Once I get these things out of the way, I start the process of developing a custom theme for Genesis. What’s your process like?