• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Aline Made logo
  • Recipes
    • Vegan
    • Breakfast
    • Sides & Snacks
    • Lunch & Dinner
    • Desserts
    • Basics
    • Baking
    • Drinks
    • Vegan Summer E-Book
    • Measurement Conversion Chart
  • About
  • Subscribe
  • Deutsch
  • Nav Social Menu

menu icon
go to homepage
subscribe
search icon
Homepage link
  • Recipes
  • Meet Aline
  • Deutsch
    • Email
    • Facebook
    • Instagram
    • Pinterest
  • ×

    Customize the Genesis Simple Share Buttons Color

    Mar 7, 2018 · This post may contain affiliate links · 1 Comment

    16 shares

    Are you looking for a way to customize the color of the Genesis Simple Share Button? Let me explain to you how you can change it with simple CSS.

    Customize the Genesis Simple Share Buttons Color

    *Update September 2018: I switched to the Social Warfare plugin and therefore don’t use the Genesis Simple Share plugin at the moment. Anyway, this tutorial still works and is easy to set up.

    I was looking around for beautiful looking simple share buttons, but all fancy plugins I tried did slow down my page. The Genesis Framework, which I am using on my WordPress site, comes with a plugin called “Genesis Simple Share“, which they recommend to use (of course as it is from themselves ?). It’s very lightweight, which means it doesn’t slow down your page like all the other plugins.

    Pros:

    • Free
    • Doesn’t slow down your page
    • Created by Studiopress – a trusted company

    Cons:

    • No floating bar on each side
    • No easy color adjustments

    I prefer to have a plugin which is not the most beautiful one but does what it has to without slowing down my page and adding unwanted links and tracking URL’s to my page.

    Let me help you to customize your Genesis simple share buttons to make them look pretty in your preferred color.

    This is how my Genesis Simple Share Buttons look like

    customize colored genesis simple share buttons

    Fist, install the Genesis Simple Share Plugin and activate it.

    Then on your Dashboard go to the Section: “Genesis” – “Simple Share” – where you get to the Genesis Simple Share Settings.

    For my CSS Code to work you must choose following Settings:

    Genesis Simple Share Settings

    When you have done that, save the settings and go to “Appearance” – “Customize” – “Additional CSS”.

    In this part, you can add additional CSS to your whole page. Just make sure to use valid code. Otherwise, it could break something on your website.

    Now, you can add following CSS code:

    /*Google Plus */
    .share-outlined .googlePlus .share{
    color:#ffffff;
    border-color:#ffffff;
    background-color:#973B78;
    }
    .share-outlined.share-small .googlePlus .no-count .share,.share-outlined.share-medium .googlePlus .no-count .share {
    border-right:none;
    }

    /*Facebook */
    .share-outlined .facebook .share{
    color:#ffffff;
    border-color:#ffffff;
    background-color:#973B78;
    }
    .share-outlined .facebook .count{
    color:#ffffff;
    border-color:#ffffff;
    background-color:#973B78;
    }

    /*Twitter */
    .share-outlined .twitter .share{
    color:#ffffff;
    border-color:#ffffff;
    background-color:#973B78;
    }
    .share-outlined.share-small .twitter .no-count .share, .share-outlined.share-medium .twitter .no-count .share {
    border-right:none;
    }

    /*Pinterest */
    .share-outlined .pinterest .share{
    color:#ffffff;
    border-color:#ffffff;
    background-color:#973B78;
    }
    .share-outlined .pinterest .count{
    color:#ffffff;
    border-color:#ffffff;
    background-color:#973B78;
    }


    /*Stumbleupon */
    .share-outlined .stumbleupon .share{
    color:#ffffff;
    border-color:#ffffff;
    background-color:#973B78;
    }
    .share-outlined .stumbleupon .count{
    color:#ffffff;
    border-color:#ffffff;
    background-color:#973B78;
    }

    To change the button color to your preferred cutsom color, you have to replace the hex color code on every item.

    Only change the six numbers after each # with your hex color code. If you don’t know the hex color code, you can check it on the Converting Colors website. If you need some color inspiration, check out these color palettes by Color Hex.

    Publish your settings and enjoy your beautiful customized colored Genesis Simple Share Buttons.

    More Recipe Ideas

    • Food Photography & Videography Equipment
    • Best Blogging Tools In 2020
    • Compress Images for Better SEO

    Reader Interactions

    Comments

      Leave a Reply Cancel reply

      Your email address will not be published. Required fields are marked *

      Recipe Rating




      This site uses Akismet to reduce spam. Learn how your comment data is processed.

    1. Aline says

      March 30, 2018 at 8:38 am

      Hi April. I am very happy that I helped you with my CSS. I will attach the CSS to center it at the end, but I can not guarantee that it’s working with your theme. Make sure to double check it on your site with Google Chromes “Inspect Element”.
      Here is the CSS code:
      /*Center Share Buttons*/
      .share-before {text-align: center;}
      .share-after {text-align: center;}

      Reply

    Primary Sidebar

    Aline Cueni | Founder & Blogger Aline Made

    Welcome

    Hi, I’m Aline!

    I’m a girl who loves to cook and bake delicious homemade food.  Let me help you to incorporate more plant-based foods into everyday life! Vegetarian & vegan recipes can be anything but boring. More about me!

    DON’T MISS A RECIPE

    Sign up now to get new recipes delivered to your inbox, plus my top 10 recipes ebook absolutely free!

    Popular Recipes

    Footer

    ↑ back to top

    Connect

    Join our community on social media!

    • Instagram
    • Pinterest
    • Facebook

    Newsletter

    Sign Up! for emails and updates

    Change language

    EN | DE

    About

    • Meet Aline
    • Work With Us
    • Contact
    • Press
    • Resources
    • Privacy Policy

    Copyright © 2023 Aline Made

    16 shares