Skip to content

Instantly share code, notes, and snippets.

@kylephillips
Created September 19, 2015 03:03
Show Gist options
  • Save kylephillips/84e76e58882fdf836bab to your computer and use it in GitHub Desktop.
Save kylephillips/84e76e58882fdf836bab to your computer and use it in GitHub Desktop.
Add custom styling to the favorites button
<?php
/**
* Styling should ideally be placed in your theme's style.css file.
* If you are not comfortable editing this file, or with CSS, the following
* may be placed in your theme's functions.php
**/
add_action('wp_head', 'style_favorites_button');
function style_favorites_button()
{
echo '
<style>
.simplefavorite-button {
background-color: #000000;
border: 0;
color: #ffffff;
}
/* Active/Favorited State */
.simplefavorite-button.active {
background-color: #cccccc;
border: 0;
color: #000000;
}
</style>';
}
@gvibrations
Copy link

I did some digging in his code and found out how ... after a LOT of research to figure out where stuff was coming from:

css:

.favorite-button{position:absolute;z-index:2;bottom:10px;right:10px;height:30px}
.simplefavorite-button{position:relative;cursor:pointer;font-size:15px;height:30px;padding:0 52px 0 12px;color:#c0db2d;background:#3b1e3a;border:0;font-family:raleway,sans-serif;font-style:normal;font-weight:400}
.simplefavorite-button .text{position:absolute;top:0;left:50%;opacity:0;visibility:hidden;margin-left:-50px;background-color:rgba(0,0,0,.8);color:#fff;width:100px;height:30px;font-size:14px;line-height:30px;-webkit-transition:all 200ms ease;-o-transition:all 200ms ease;transition:all 200ms ease}
.simplefavorite-button:hover .text{top:-40px;opacity:1;visibility:visible;-webkit-transition:all 200ms ease;-o-transition:all 200ms ease;transition:all 200ms ease}
.simplefavorite-button i{font-size:20px;display:block;position:absolute;width:30px;height:30px;line-height:30px;right:0;top:0;background-color:rgba(0,0,0,.2)}
.simplefavorite-button.loading{padding-right:12px}
.simplefavorite-button.active{background-color:#c0db2d;color:#3b1e3a}
.simplefavorite-button:active,.simplefavorite-button:focus{outline:0}

And on the Settings->Favorites->Display page, enter these settings:

Button Text: Favorite
Button Text (Favorited): Unfavorite
Favorite Count: {check it yes}
Loading Indication: {check it yes if you want it}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment