Created
September 19, 2015 03:03
-
-
Save kylephillips/84e76e58882fdf836bab to your computer and use it in GitHub Desktop.
Add custom styling to the favorites button
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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}