EA Share Count, Box Styling

/* EA Share Count
--------------------------------------------- */

.ea-share-count-wrap {
	@include clearfix;

	.ea-share-count-button.style-box {
        background: $grey_4;
	box-shadow: 0 2px 4px 0 rgba( $black, .5 );
        color: $white;
        display: block;
        float: left;
        line-height: 1;
        height: 44px;
        overflow: hidden;
        padding: 12px 0 0;
        margin: 0;
        text-align: center;
        width: 100px / 6px * 1%; // 6 = number of services

        @include media(">=tablet") {
            width: 44px;
        }

        &:hover {
            background: darken( $grey_4, 10% );
            text-decoration: none;
        }

		&:first-child {
			border-radius: 6px 0 0 6px;
		}

		&:last-child {
			border-radius: 0 6px 6px 0;
		}

        &.facebook {
            background: $bc_facebook;

            &:hover {
                background: darken( $bc_facebook, 10% );
            }

            @include media(">=tablet"){
                width: calc( 100% - 220px ); // 220 = 44px * 5 (share services - 1)

                .ea-share-count-label {
                    display: inline;
                    margin-left: 16px;
					font-weight: 400;
                }
            }
        }

        &.twitter {
            background: $bc_twitter;

            &:hover {
                background: darken( $bc_twitter, 10% );
            }
        }

        &.google {
            background: $bc_googleplus;

            &:hover {
                background: darken( $bc_googleplus, 10% );
            }
        }

        &.pinterest {
            background: $bc_pinterest;

            &:hover {
                background: darken( $bc_pinterest, 10% );
            }
        }

        &.print {
            background: $bc_print;

            &:hover {
                background: darken( $bc_print, 10% );
            }
        }

		&.email {
			background: $bc_email;

			&:hover {
				background: darken( $bc_email, 10% );
			}
		}

        .ea-share-count-label {
            display: none;
            font-size: 16px;
            font-weight: 600;
            letter-spacing: 0;
        }
    }
}
<?php
/**
 * EA Starter
 *
 * @package      EAStarter
 * @since        1.0.0
 * @copyright    Copyright (c) 2014, Contributors to EA Genesis Child project
 * @license      GPL-2.0+
 */

/**
 * Share Link
 *
 */
function ea_social_sharing_link( $link ) {
    if( 'facebook' == $link['type'] && 'style-box' == $link['class'] ) {
        $link['label'] = 'Like this? Share it on Facebook';
    }
    return $link;
}
add_filter( 'ea_share_count_link', 'ea_social_sharing_link' );

/**
 * Share Styles
 *
 */
function ea_social_sharing_styles( $styles ) {
    $styles['box'] = 'Box';
    return $styles;
}
add_filter( 'ea_share_count_styles', 'ea_social_sharing_styles' );

Bill Erickson

Bill Erickson is a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk