WordPress.org

Ready to get started?Download WordPress

Forums

Jetpack by WordPress.com
[resolved] Implementing (and styling) genericons in Jetpack Sharing (4 posts)

  1. hurra
    Member
    Posted 6 months ago #

    Hi!

    I'm currently working on a child theme for the Ryu theme which makes heavy use of genericons in circle elements. I'd like to adopt this style for the social sharing section and exchange the typical Jetpack sharing buttons for genericons styled with border-radius: 50% etc.

    What would be the best way to do this?
    Is it possible to nevertheless show the number of sharings next to the icons?

    Thank you for your help!

    http://wordpress.org/plugins/jetpack/

  2. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 6 months ago #

    That's a good idea! You can customize the style of the sharing buttons with some CSS. Since Ryu already loads the Genericons for you, you will only have to style the buttons, add the icons before each button, and set each icon to use the Genericons font.

    Try adding the following CSS code to your theme stylesheet, or to your custom CSS editor under Appearance > Edit CSS in your dashboard:

    /* Delete existing icons, and that white background appearing below each button */
    .entry-content .sharedaddy a.sd-button {
    	background: none;
    	border: 0 none !important;
    	box-shadow: 0 0 0 0;
    	color: #fff !important;
    }
    .sharedaddy ul li a.sd-button > span {
    	background-image: none;
    }
    .sharedaddy ul li .sd-button span.share-count {
    	color: #fff;
    }
    
    /* Before each sharing button, we will use the Genericons font */
    .sharedaddy a.sd-button:before {
    	display: inline-block;
    	-webkit-font-smoothing: antialiased;
    	font: normal 16px/1 Genericons;
    	font-size: 1.6rem;
    	vertical-align: top;
    }
    
    /* Define the icon to use with each button */
    .sharedaddy a.share-twitter:before {
    	content: '\f202';
    }
    .sharedaddy a.share-facebook:before {
    	content: '\f203';
    }
    .sharedaddy a.share-google-plus-1:before {
    	content: '\f206';
    }
    .sharedaddy a.share-email:before {
    	content: '\f410';
    }
    .sharedaddy a.share-press-this:before {
    	content: '\f205';
    }

    That's only an example; you'll probably need to customize things a bit more to give it a perfect look! But you should be able to do everything through CSS.

    I hope this helps.

    Oh, and please share the results with us! I love Genericons, and I'm sure the results will look great!

  3. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 5 months ago #

    You can also find a working example here:
    http://halfelf.org/2013/sharedaddy-genericons/

  4. hurra
    Member
    Posted 5 months ago #

    Dear Jeremy,

    I'm very sorry for responding this late, but thank you SO much! As you said, the code needed very little customizing, then everything worked out fine. You truly are a Happiness Engineer ;)

    I'll post a link here as soon as the theme goes online!

Reply

You must log in to post.

About this Plugin

About this Topic