Steemit FloatVote Modified To Make Commenting Easy

Last year @bitcoiner released a custom theme modification for Steemit called FloatVote. The mod is applied by installing a browser addon called Stylish, which is available for both Firefox and Chrome.

Once Stylish is installed, just browse to Steemit.com then click on the "Find themes for this site" link within the Stylish toolbar dropdown. Next click on FloatVote, then click the install button.

The mod is a great timesaver since it allows you to upvote a post from any position on page, and after using it for about eight months the only minor gripe I had with FloatVote was that if you wanted to leave a comment you had to scroll to the comment section in order to click the reply button.

Often when you are commenting on a large post with a lot of comments, this button can be a pain to locate.

For this reason I decided to modify @bitcoiner's CSS code, and add a reply button to the fixed position toolbar. I also applied a fixed position to the reply editor form so that regardless of where you are on page, you can click the reply button, and the comment form will open up on screen.

I am not going to publish my version on Stylish, but will share the code here. If @bitcoiner wants to include the changes in a future version, I am happy for him to do so.

Steemit FloatVote Modified

Code edited 28/01/2018 to fix an issue with editing exiting posts.


.PostFull__footer .Voting {
position: fixed;
padding: 0 0.5em;
bottom: 0;
left: 50px;
background: #efefef;
z-index: 1000;
border: 0px #06D6A9 !important;
}
.PostFull__reply {
position: fixed;
padding: 0 0.5em;
bottom: 0;
left: 0px;
background: #efefef;
z-index: 1000;
margin-right: 0px !important;
border: 0px #06D6A9 !important;
}
.column.small-12 .ReplyEditor form {
max-width: 52rem;
position: fixed;
left: 10px;
top: 100px;
padding: 10px;
border: solid 1px #06D6A9;
background: #fff;
border-radius: 7px;
}
.PostFull__footer .Voting .DropdownMenu > .VerticalMenu,
.PostFull__footer .Voting__button-up .dropdown-pane {
top: inherit;
bottom: 32px;
}
.PostFull__time_author_category {
border-right: none;
}
.PostFull__reply a:nth-child(2){
position:absolute;
left:0px;
bottom:30px;
visibility:hidden;
}
.PostFull__reply a:nth-child(2):before {
background: #efefef;
padding:7px 10px;
visibility: visible;
content: '✍️';
}


Alternatively you can copy the above code and manually add it to Stylish as a new theme.

If you have any feedback, please let me know below.