Customizing the Other Accounts module with your own social icons

In our last theme release we unveiled a customized Other Accounts module, which makes use of the default icon and overrides it with a custom social icon of our choosing.

We created 7 custom social icons for various services, then used CSS to override the Other Accounts module when it is in Grid format. (To add the Grid format, go to Design > Content, then add the Other Accounts module and check the Grid option. Save your changes.)

Here are the icons we created and used:

Want to know more? Then...

Let's get this setup

A. First, lay the ground work for using the social icons.

1. Add the third-party service accounts to Account > Other Accounts.
2. Decide whether you will be using the icons above or if you'll be uploading your own custom social icons. (If you choose to use the icons above, skip to part B; if uploading your own, continue to step 3.)
3. Upload your custom social icons to the File Manager at Library > File Manager.
4. Copy the URLs of the images and paste them into a plain-text file for safe keeping.

B. Next, it's time to start adding the CSS, at Design > Custom CSS, to display your custom icons.

Want to use the icons we show above? Then your next step is really simple! Copy and paste the following CSS into the Custom CSS screen:

.module-elsewhere a[href*="twitter.com"] {
    background: url(http://everything.typepad.com/icons/gray/twitter.png) no-repeat center;
    }

.module-elsewhere a[href*="flickr.com"] {
    background: url(http://everything.typepad.com/icons/gray/flickr.png) no-repeat center;
    }

.module-elsewhere a[href*="facebook.com"] {
    background: url(http://everything.typepad.com/icons/gray/facebook.png) no-repeat center;
    }

.module-elsewhere a[href*="plus.google.com"] {
    background: url(http://everything.typepad.com/icons/gray/gplus.png) no-repeat center;
    }

.module-elsewhere a[href*="pinterest.com"] {
    background: url(http://everything.typepad.com/icons/gray/pinterest.png) no-repeat center;
    }

.module-elsewhere a[href*="atom.xml"] {
    background: url(http://everything.typepad.com/icons/gray/rss.png) no-repeat center;     }

.module-elsewhere a[href*="profile.typepad.com"] {
    background: url(http://everything.typepad.com/icons/gray/lilypad.png) no-repeat center;
    }

.module-elsewhere a[href*="extragr.am"] {
    background: url(http://everything.typepad.com/icons/gray/instagram.png) no-repeat center;
    }

Want to use your own custom icons? Then review the code above and read through the breakdown below so that you have a better idea of how to setup additional icons with services.

Breaking down the code

The first part of the code references the class specific to the Other Account module:

.module-elsewhere

The next part of the code is the link tag, which references the link that wraps around the default icon and link text:

a

What comes directly after the link tag is what we use to match part of a URL for the service account (e.g. the 'facebook.com' out of 'http://www.facebook.com/typepad'):

[href*="PORTION-OF-URL-YOU-WANT-MATCHED"]

Replace PORTION-OF-URL-YOU-WANT-MATCHED with the actual portion, following the Facebook example above.

The last part is the actual section that specifies the social icon to use when that portion of the URL is matched:

background: url(http://everything.typepad.com/icons/gray/facebook.png) no-repeat center;

Replace http://everything.typepad.com/icons/gray/facebook.png with the URL of the uploaded social icon for the service you want it to load.

Using a service that's not listed in Other Accounts

What if you want to add an icon for a service that's not offered in the Other Accounts dropdown? It's actually not much different than using one that is offered.

Instead of selecting a specific service, select Other and enter the URL of your profile or website for that service.

For example, if you want to add an icon for your Instagram profile at the Extragr.am service, enter your profile URL with them (e.g. http://extragr.am/username) at Account > Other Accounts. Then, in your CSS you would use:

.module-elsewhere a[href*="extragr.am"] {
    background: url(http://everything.typepad.com/icons/gray/instagram.png) no-repeat center;
    }

Replace http://everything.typepad.com/icons/gray/instagram.png with the URL of your uploaded image if you want to use your own custom icon.

Repeat for any other service or site you wish to display a social icon.

Not so quick!

Before you go get carried away, you'll need to hide the default icons that appear for those services, as well as add some padding so that the social icon you use is seen. This step needs to be taken regardless of whether you use our icons or your own.

Here's the CSS you need to add to the Custom CSS screen:

/* Other Accounts - Grid Mode - Hide Default Icon */
.module-elsewhere img { display: none; }

/* Other Accounts - Grid Mode - Add Padding; Let Icons Sit Side-by-Side */
.module-elsewhere a {
    padding: 23px !important; /* increase # if your icon is larger than ours */
    display: inline-block;
    }

Using both an Other Accounts grid AND list

Wanting to display both a Grid and List version of the Other Accounts module? If so, that means you'll need to make some adjustments via CSS so that the List option shows in its default state, otherwise it'll apply the Grid mode CSS to itself.

The code below will need to be adjusted to match the same services you setup for the Grid mode, but the CSS should be inserted at Design > Custom CSS above the CSS for the Grid:

/* Other Accounts - List Mode */
.module-elsewhere .typelist-plain a, .module-elsewhere .typelist-plain img {
    padding: 0 !important;
    display: inline;
    }

/* Counteract custom Grid icons by setting background:none for List mode links */
.module-elsewhere .typelist-plain a { background: none !important; }

Final Step

The last thing to do is to Preview your changes to the Custom CSS screen. Make any adjustments to the CSS if necessary, then click Save when you're done.

Comments

[serge the concierge]

Nice addition yet does it add up to something different than what one gets when they update 'Share This' icons for example as I did a week ago on 'Serge the Concierge'

http://www.sergetheconcierge.com

[Whitney Black]

Very cool! These icons are super helpful for people to connect with you on other social outposts...very helpful and necessary for building your brand online. :) http://whitsblog.com

[Bri]

Hi Serge! The icons in this post do not share the same function as the ones in the ShareThis widget; these icons are for pointing your readers to your specific profiles on the services, whereas the ShareThis icons are for helping your readers share content to their profiles/streams for the services they use.

[Tiffany Brooks]

how does everyone link the rss feed button. I could never figure this out.

[Kymberlie]

Do you mean what URL you'd link to? In your case, it would be this:
http://www.yaydecor.com/home/atom.xml

You can read more about finding your feed's URL here:
http://help.typepad.com/blog_settings_feeds.html

[Tiffany Brooks]

thanks! I will give it a try.

[Account Deleted]

I will try it for sure.

[Account Deleted]

will definitely try this one out!!!

[serge the concierge]

Brianna
Thanks
I am concerned about cluttering the site.
I will give these a try when I have a chance.
Will limit icons to services I use
Serge