Are you tired of finding great quality content but having to scroll all the way to the bottom of the post just to throw the author your seal of approval in the form of an upvote?
Do you often wish you could see how much reward, votes and views a post has right away when the page loads rather than having to hunt for it?
( sexy.. ain't it? )
If you answered yes to either question above or just want your Steemit.com experience to be slightly more awesome have I got a grand offering for you! Adapted from @bitcoiner's original "Floatvote" I'm proud to release to the general public my own version.
Steemit FloatVote: KLYE Edition
By using the power of CSS and a bit of code wizardry was able to take the voting, views and reward displays from the bottom of the post GUI, sending them to the top right allowing for much more efficient curation or voting. The current setup on Steemit.com forces users to scroll all the way to the bottom of the post to vote, this script solves that problem while adding a bit of colour to the GUI.
Script & Installation
Google Chrome plugin "Tampermonkey" is what I use to run external Javascript code on top of target sites so before you go ahead please go get that installed in order to continue.
Not going to walk you through that part but once you've got Tampermonkey installed find it's little icon and create a new script as displayed in the screenshot given below:
// ==UserScript==
// @name Steemit FloatVote KLYE EDITION
// @namespace http://userstyles.org
// @description Steemit FloatVote - ? Because Voting is Important!
// @author bitcoiner + KLYE
// @homepage https://userstyles.org/styles/132260
// @include http://steemit.com/*
// @include https://steemit.com/*
// @include http://*.steemit.com/*
// @include https://*.steemit.com/*
// @run-at document-start
// @version 0.20160902230543
// ==/UserScript==
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
var views;
var elements;
(function () {
var css = [
".PostFull__footer .Voting {",
" box-shadow: 0px 3px 10px -3px #000;",
"opacity: 80;",
"background: #ffffff;",
"background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);",
"background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);",
"background: linear-gradient(to bottom, #ffffff 0%,#f6f6f6 47%,#ededed 100%);",
"filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );",
" border-radius: 20px !important;",
"border-top-right-radius: 0px !important;",
"border-bottom-right-radius: 0px !important;",
" border: 1px solid #bbb !important;",
" position: fixed !important;",
" padding: 4px 0.5em !important;",
" top: 7% !important;",
" right: 7% !important;",
" z-index: 1000 !important;",
"}",
".PostFull__footer a {",
"font-size: 100% !important;",
// " ",
// " ",
"}",
".PostFull__footer .PostFull__views {",
"left: 92.5%;",
" box-shadow: 0px 3px 10px -3px #000;",
"opacity: 80 !important;",
"background: #ffffff !important;",
"background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%) !important;",
"background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%) !important;",
"background: linear-gradient(to bottom, #ffffff 0%,#f6f6f6 47%,#ededed 100%) !important;",
"filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ) !important;",
" border-radius: 20px !important;",
"border-top-left-radius: 0px !important;",
"border-bottom-left-radius: 0px !important;",
" border: 1px solid #bbb !important;",
" position: fixed !important;",
" padding: 4px 0.5em 4px 0.33em !important;",
" top: 7% !important;",
" right: 1.5em !important;",
" z-index: 999 !important;",
"}",
"",
".PostFull__footer .PostFull__views",
" .PostFull__footer .Voting__button-up .dropdown-pane {",
" top: inherit !important;",
" bottom: 35px !important;",
"}",
"",
".PostFull__time_author_category {",
" border-right: none !important;",
"}",
".Voting__button-up circle:hover {",
" fill: #4ba2f2 !important; ",
"stroke: #ccc !important;",
"}",
".Voting__adjust_weight {",
" box-shadow: 0px 3px 10px -3px #000;",
" min-height: 44px;",
" margin-top: 4.7% !important;",
"background: #ffffff !important;",
"background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%) !important;",
"background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%) !important;",
"background: linear-gradient(to bottom, #ffffff 0%,#f6f6f6 47%,#ededed 100%) !important;",
"filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ) !important;",
"border-radius: 20px !important;",
"position: relative !important;",
"top: 7% !important;",
"right: 74.5% !important;",
"padding: 0px 5px 0px 0px !important;",
"border: 1px solid #bbb !important;",
"width: 251px !important;",
"}",
"a.confirm_weight {",
"float: right !important;",
"width: 2rem !important;",
"height: 2.2rem !important;",
"line-height: 2.6rem !important;",
"-webkit-transition: all 0.3s ease 0s !important;",
"-moz-transition: all 0.3s ease 0s !important;",
"-ms-transition: all 0.3s ease 0s !important;",
"-o-transition: all 0.3s ease 0s !important;",
"transition: all 0.3s ease 0s !important;",
"}",
".rangeslider-horizontal {",
" height: 7px !important;",
"width: 200px !important;",
"background: rgba(0,0,0,0.15) !important;",
"float: right !important;",
"margin-top: 18px !important;",
"margin-right: 5px !important;",
"box-shadow: inset 0 2px 4px rgba(0,0,0,.5) !important;",
"}",
".rangeslider__fill {",
"box-shadow: inset 0 1px 3px rgba(0,0,0,.3) !important;",
"}",
"button.Voting__adjust_weight_close {",
"display: none;",
"}",
".dropdown-pane.is-open {",
"border: none !important;",
"}",
"div.rangeslider__handle {",
"background: rgb(255,255,255) !important;",
"background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(243,243,243,1) 50%, rgba(237,237,237,1) 51%, rgba(255,255,255,1) 100%) !important;",
"background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%) !important;",
"background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%) !important;",
"filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ) !important;",
"width: 15px !important;",
"border-radius: 15px !important;",
"border-color: #bbb !important;",
" top: -12px !important;",
" box-shadow: 0px 3px 10px -3px #000;",
"}",
"div.rangeslider__handle:active {",
"background: rgb(255,255,255) !important;",
"background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(243,243,243,1) 50%, rgba(237,237,237,1) 51%, rgba(255,255,255,1) 100%) !important;",
"background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%) !important;",
"background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%) !important;",
"filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ) !important;",
"width: 15px !important;",
"border-radius: 15px !important;",
"border-color: #bbb !important;",
" box-shadow: 0px 3px 10px -3px #000;",
"}",
".dropdown-pane {",
"box-shadow: none !important;",
"}",
".weight-display {",
"width: 3rem;",
"float: left;",
"margin-right: .5rem;",
"text-align: right;",
"color: #8a8a8a;",
"line-height: 2.6rem;",
"position: absolute;",
"left: 30%;",
"margin-top: 4.2% !important;",
"-webkit-user-select: none;",
"-moz-user-select: none;",
"-ms-user-select: none;",
"}",
".weight-display:after {",
"content: 'Float-Vote @KLYE Edition';",
"font-size: 0.6em;",
"position: absolute;",
"top: -25px;",
" right: -30px;",
"color: #cdcdcd;",
"}",
// "div.Header__top li.Header__search:after {",
// "position: absolute;",
//"content: '🌑';",
// " top: 10px;",
// " right: 19%;",
// "}",
// "div.Header__top li.Header__search.c2:after {",
// "position: absolute;",
// "content: '☀️';",
// " top: 10px;",
//" right: 19%;",
// "}",
".menu.vertical {",
" background: #fff;",
" border: 1px solid #d6d6d6;",
" border-top: none;",
" margin-top: 2px;",
" box-shadow: 0px 4px 14px -3px #000;",
"}",
".menu.vertical>li>a {",
" -webkit-transition: all 0.3s ease 0s;",
" -moz-transition: all 0.3s ease 0s;",
"-ms-transition: all 0.3s ease 0s;",
" -o-transition: all 0.3s ease 0s;",
"transition: all 0.3s ease 0s;",
"}"
].join("\n");
document.addEventListener('DOMContentLoaded', function () {
}, false);
if (typeof GM_addStyle != "undefined") {
GM_addStyle(css);
} else if (typeof PRO_addStyle != "undefined") {
PRO_addStyle(css);
} else if (typeof addStyle != "undefined") {
addStyle(css);
} else {
var node = document.createElement("style");
node.type = "text/css";
node.appendChild(document.createTextNode(css));
var heads = document.getElementsByTagName("head");
if (heads.length > 0) {
heads[0].appendChild(node);
} else {
// no head yet, stick it whereever
document.documentElement.appendChild(node);
}
}
})();
ctrl + c
ctrl + s to save your new Float-Vote Script!That's it! Float-Vote: KLYE Edition Should be Working!
 | VOTE @KLYE FOR WITNESSsteemit.com/~witnesses | |
|---|