Show HN: HN-beautify – a stylesheet for the HN frontpage | Hacker News Reader

Show HN: HN-beautify – a stylesheet for the HN frontpage

github.com

91 pointsguico49 comments

Looks nice on the front page, but doesn't work on the comments pages for me.

Also, is there a reason why the HN guys haven't done any css for mobiles yet? Seems odd that a community of forward thinking developers and entrepreneurs have a site that's so frustrating to use on iOS (and I'm assuming other mobile devices)

Yes, I started with the frontpage. Apparently people like it so I'll work on the other pages and update the extension ;)

I remember a few months ago it was enabled briefly for the comment pages -- I was so happy. Then it was promptly reset. Looking forward to the re-addition!

Awesome, love what you've done with the front page so looking forward to the comment pages. Thanks

Nice work!

While this thread is active I'd like to mention Hacker News Enhancement Suite (HNES). It's a Chrome extension that applies a stylesheet like this and also adds a bunch of nice features to HN (such as inline reply).

Its all open source at github.com/etcet/hnes. I've contributed a few times and the owner is very open to PRs.

Thanks for the tip! I'll have a look ;)

We now have a few dozen HN "beautifiers", "mobil"izers. I guess the relativity in beauty perception makes it impossible for one of them to win the hearts and become the one.

Been using this [1] for a while now, it's a good alternative.

[1]: https://chrome.google.com/webstore/detail/georgify/ofjfdfale...

I prefer HN Special[1] for the same purpose. It even has some nice extra features like infinite scrolling, comment folding, link highlighting etc.

[1]: https://gabrielecirulli.github.io/hn-special/

Thanks for bringing this up - just started using it and I love it.

just tried HN Special... much better than the default styles. Thanks!

It messes up indentation of comments sometimes.

yeah, been using that so long I don't know what HN 'really' looks like.

Doesn't work with Firefox using Stylish.

Doesn't it? Could you figure out why not?

Works for me in Stylish. I installed the extension, then clicked "create new style for news.ycombinator.com", then copy-pasted the CSS inside

"@-moz-document domain("news.ycombinator.com") { [...here ...] }"

However, the front-page was really wonky until I removed the "float: right" on: "body > center > table > tbody > tr:nth-of-type(3) tr td:first-of-type" (line 84 of the original file).

Comments also have weird alignment issues, but seems like others have posted about that on Chromium as well.

PS: do not use "//" to comment out CSS. Use /* foo */. I don't know for Chromium, but it's not valid in Firefox.

I didn't know about Stylish (and its Chromium equivalent), really fun stuff. Thanks for posting this, and looking forward to experiment with it more.

The float right is a mistake, I guess I was playing around and forgot to remove it.

Yeah, webkit just skips lines that start with //, i'll convert them.

Thanks ;)

Comment page is still really funky:

http://i.imgur.com/M3OsXAJ.png

Latest works well now, thanks!

I suck at css.

This looks really good! Would you consider publishing it to CSS Stylebot? It's a chrome extension to load custom styles onto webpages.

https://chrome.google.com/webstore/detail/stylebot/oiaejidbm...

I didn't know stylebot but sounds like a good idea. I'll have a look. Tks

Ha, neat hack to hide the pipes in pagetop by changing the text color. Unfortunately the default doesn't work for custom header colors :(

https://www.dropbox.com/s/xbgv7fvb1y6qt3h/Screen%20Shot%2020...

You could make it work for any colour with:

    color: rgba(0, 0, 0, 0);

Fixed. Tks

Good one, I've fixed it with color: transparent, instead ;) Check it out

I love this stylesheet, and would love to see HN implement it natively.

I've installed it on Chrome using Stylish, but I am having a problem. Every page I load on HN flashed the old design before showing the new look. Is there anyway to get Chrome to prioritize so that doesn't happen?

My favourite[1] despite it's name

[1]: https://chrome.google.com/webstore/detail/hipsternews/midncc...

Everything other than the titles are unreadable. What is with this grey on grey nonsense?

Contrast is a tricky thing. Some people really need lower contrast, while others can't stand anything less than black on white.

I'm not a big fan of alternating colours in tables, but this looks pretty neat.

Every few months or so I sit down to write a HN extension that rebuilds the DOM but the nested table selectors are so deep it puts quite a load on the browser. There aren't any reliable HN API's anymore are there?

There is an official one: http://hn.algolia.com/api/ and several unofficial ones that you can find by Googling around.

Here's mine: https://github.com/bjourne/readable-userstyles/blob/master/h...

HN Special has been great as well: http://gabrielecirulli.github.io/hn-special/

That's actually an imitation of the clearly superior hn-threes which came out first and should have gone viral instead of this one.

This is really clean and nice. Many of the HN beautifiers change UX substantially, but this one still feels like the old Hacker News... just better.

Tks!

Someone needs to setup a proxy that pulls from HN and uses this style sheet so we don't have to download anything. (on a phone right now)

Good idea, it makes the page load for a (way too) long time for me.

That's probably improvable

Looks nice, but the extra spacing means too much scrolling. Add a compact mode.

I had never realized that the HN front page is implemented using tables.

Hell yeah it is!

Is there a reason you don't want to put it on the Chrome Web Store?

Not really, just bumped into $5 dollar fee, my card didn't work and I had to leave the house. I'll do it tmrrow and post the link ;)

Here's the chrome store link https://chrome.google.com/webstore/detail/hn-beautify/nhgmoo...

I like it, but Chrome store would be helpful - then it'll load on all my PCs rather than just this one.

https://chrome.google.com/webstore/detail/hn-beautify/nhgmoo...

That's what I call service. Thanks!

Reply on news.ycombinator.com