# A Couple Useful LessWrong Userstyles

As a weirdo, I like to read LessWrong sometimes. There are a few extremely tiny features that I wish the site had that it doesn't. Luckily enough, I know how webpages work, and certain kinds of tweaks are especially easy. I'm attaching two of these here now, and may return to add more later.

Current contents:
* [LessWrong Vote Hider](./#LessWrong_Vote_Hider) — Hides all the vote totals on a posts page. Unhides when you hover them.
* [LessWrong Vote Floater](./#LessWrong_Vote_Floater) — Makes it easier to vote while you're reading by taking the vote icon from the bottom and making it float on the bottom-right of the page.

## How Do I Use These?

You're going to need the ability to inject CSS onto webpages[^safety]. I use [Stylus for Firefox](https://addons.mozilla.org/en-US/firefox/addon/styl-us/), but any mainstream browser is going to have some add-on for this. There appears to be [a version of Stylus for Chrome](https://chromewebstore.google.com/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne) for example.

Userstyles come in a few forms, but mine are going to be dumb CSS, which removes a lot of the need to explain anything.

First, create a userstyle to paste the code into:

1.  In Stylus, you can do this by visiting LessWrong and clicking on the Stylus icon.
2.  If the UserCSS box is checked, uncheck it.
3.  Now click on the URL shown there. If you click on the right side (the stuff *after* [LessWrong.com](http://LessWrong.com)), it will make your next steps easier.

It should look like this

![Image shows the Stylus indicator in Firefox. The UserCSS checkbox is unchecked. The cursor is placed over the page URL section (not the site URL).](https://39669.cdn.cke-cs.com/rQvD3VnunXZu34m86e5f/images/cae754971b2d28bad2179f50539ce50818fdf8b719c5298a.png)

Now, edit the title (on the left in Stylus) so that you can find this snippet later.

Finally, set the URLs the snippet will be active on. I'll provide this in each script.

## Snippets

### LessWrong Vote Hider

```css
/************************
 * LessWrong Vote Hider *
 ************************
 * It can feel nice to place your votes on LessWrong
 * without knowing how everyone else voted (but seeing
 * their votes is also pretty helpful!)
 * 
 * This snippet hides the post score (the top-right tiny one
 * as well as the big one at the bottom) and also
 * both comment scores (vote score and agreement)
 ************************
 * URL settings:
 * URLs starting with https://www.lesswrong.com/posts/
 ************************/

/* Post score (bottom) */
.PostsVoteDefault-voteScores *:not(:hover),
/* Post score (top-right) */
.LWPostsPageHeaderTopRight-vote .LWPostsPageTopHeaderVote-voteScore:not(:hover),
/* Comment score */
.OverallVoteAxis-voteScore:not(:hover),
/* Comment agreement */
.AgreementVoteAxis-agreementScore:not(:hover) {
    color: #00000000;
}
```

### LessWrong Vote Floater

```css
/**************************
 * LessWrong Vote Floater *
 **************************
 * Makes the vote box from the bottom of the article float on the bottom right.
 * Also hides the other vote count (the tiny one at the top-right of the page).
 **************************
 * URL settings:
 * URLs starting with: https://www.lesswrong.com/posts/
 **************************/

/* Shove the footer section into the bottom-right corner */
.PostsPagePostFooter-footerSection {
    position: fixed;
    right: 0;
    bottom: 0;
}

/* Adjust the footer block */
.PostsPagePostFooter-footerSection > * {
    margin: 0.5em;
}

/* The tiny top-right vote is redundant now since the other vote widget is always visible */
.LWPostsPageHeaderTopRight-vote { display: none; }
```

---
If you guys have any you use, I'd love to see them in the comments. I know these are simple, but that's on purpose.


[^safety]: This is generally pretty safe, but almost everything you can do on your web browser can be exploited somehow. Wait for someone else to tell you it's safe (someone who will be blamed if it goes wrong) before going too hog-wild.