West Ham Widget - voting buttons

Custom CSS.css

.tile-interaction-vote {
	color: #666;  // INITIAL COLOR
}
.tile-interaction-vote .tile-interaction-link:hover {
	border-color: #b9b9b9;  // INITIAL BORDER COLOR
}
.tile-interaction-vote .on {
	color: #1d97d9;  // VOTED ON COLOR
}
.on {
	color: #1d97d9;  // VOTED ON COLOR
}
.on:hover {
	border-color: #97cbe2;  // VOTED ON BORDER COLOR
}
.tile-interaction-vote .on:hover {
	border-color: #97cbe2;  // VOTED ON BORDER COLOR
}
.tile-interaction-count.js-vote-count {
	display: none;
}
.tile-interaction-link {
	font-size: 23px;
}

Custom JS.js

Callbacks.prototype.onCompleteJsonToHtml = function (tileObject, t) {

	var heart = $('<i class="stackla-icon-vote"></i>');
	tileObject.find('.fs-triangle-up').remove();
	heart.appendTo(tileObject.find('.tile-interaction-vote .tile-interaction-link'));
	
	$("tileObject.find('.tile-interaction-vote')").click(function() {
		tileObject.find('.stackla-icon-vote').addClass('.on');
	});

return tileObject;
};

Expanded CSS.css

@font-face {
    font-family: stackla-icons;
    src: url(https://assetscdn.stackla.com/media/fonts/stackla-icons/stackla-icons20140417.eot);
    src: url(https://assetscdn.stackla.com/media/fonts/stackla-icons/stackla-icons20140417.eot?#iefix) format('embedded-opentype'), url(https://assetscdn.stackla.com/media/fonts/stackla-icons/stackla-icons20140417.woff) format('woff'), url(https://assetscdn.stackla.com/media/fonts/stackla-icons/stackla-icons20140417.ttf) format('truetype'), url(https://assetscdn.stackla.com/media/fonts/stackla-icons/stackla-icons20140417.svg#stackla-icons) format('svg');
    font-weight: 400;
    font-style: normal
}
[class^=stackla-icon-],
[class *="stackla-icon-"] {
    font-family: stackla-icons;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}
.stackla-icon-vote:before {
    content: "\e600";
    color: inherit;
}
.stacklapopup-interaction-link {
    font-size: 23px;
}
.stacklapopup-interaction-vote .stacklapopup-interaction-link:hover {
    border-color: #b9b9b9; // INITIAL BORDER COLOR
}
.stacklapopup-interaction-vote {
    color: #666;
}
.on {
    color: #1d97d9;
}
.on:hover {
    border-color: #97cbe2 !important;
}
.on a:hover {
    border-color: #97cbe2 !important;
}

Expanded JS.js

(function (exports) {
        var widgetId = 7278;
        var widget, $, StacklaFluidWidget;

        var callbacks = {
            onBeforeExpandedTileOpen: function (dom, tile) {
                $ = $ || exports.$tackla;
                StacklaFluidWidget = StacklaFluidWidget || exports.StacklaFluidWidget;
                widget = widget || StacklaFluidWidget.getWidgetInstance(widgetId);
                
              var $dom = $(dom);
              var $heart = $('<i class="stackla-icon-vote"></i>');
              
              $dom.find('.stacklapopup-interaction-count').remove();
              $dom.find('.fs-triangle-up').remove();
              $heart.appendTo($dom.find('.stacklapopup-interaction-vote .stacklapopup-interaction-link'));
              
              return dom;
            }
        };
        var props = {};
        props[widgetId] = {callbacks: callbacks};
        exports.StacklaFluidWidgetProperties = props;
    })(window);