Change color of social share icons and other buttons
If you find this tweak helpful:
Beginners
Tweaking Elegant Themes involves creating a child theme and editing PHP and CSS files within a text editor. If you have never done this you may want to read our guide on creating a child theme. All tweaks are written with the assumption that you have a default installation of your theme. Any tweaks or changes you may have previously made to your theme could affect the outcome of the tweaks on this site. All tweaks should be tested before applying to a live site.
If you're looking to change the color scheme of your entire Fable website, you could easily do this through the dashboard: Appearance->Customize->Schemes. Here you have a short list of colors to choose from. If your desired color is not listed or you don't want the header, social share buttons, and comment submit button to all be the same color, this simple tweak will give you control over each.
CSS
Locate your style.css file in /fable-child/
Add this code:
#main-header, .et-share-button, .et-share-button:before, .form-submit #submit:hover {
background-color: #99CC33 !important;
}
This will change the color of the header, social share icons and comment button for each post. Unfortunately the read more button on the homepage and the post a reply buttons are images. We'll remove the images and replace them with round-corner squares, adding a transparency to the read more buttons similar to the transparent image.
Add this code:
.reply-container:hover, .reply-container:hover a , .read-more:hover {
background-image: none;
background-color: #99CC33;
border-radius: 30px;
}
.reply-container, .reply-container a, .read-more {
background-image: none;
background-color: rgba(223,223,223,0.25);
border-radius: 30px;
}
.reply-container {
background-color: #DFDFDF;
}
.read-more, .read-more:hover {
border-radius: 10px;
}
Of course you can change the colors however you like as well as the opacity and border radius.
If you really like the six-sided buttons that come with Fable, you'll need to locate the readmore-bg-hover.png and reply-hover.png in the /themes/Fable/images/ folder. Open these in an image editor like Photoshop and perform a color replace to make them the color you want.
