

Show HN: HN-beautify – a stylesheet for the HN frontpage - guico
https://github.com/guicoelho/hn-beautify

======
afro88
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)

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

~~~
gdubs
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!

------
habosa
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.

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

------
diminish
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.

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

[1]:
[https://chrome.google.com/webstore/detail/georgify/ofjfdfale...](https://chrome.google.com/webstore/detail/georgify/ofjfdfaleomlfanfehgblppafkijjhmi?hl=en)

~~~
e_proxus
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/](https://gabrielecirulli.github.io/hn-special/)

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

------
Touche
Doesn't work with Firefox using Stylish.

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

~~~
mgbmtl
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.

~~~
guico
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 ;)

~~~
Touche
Comment page is still really funky:

[http://i.imgur.com/M3OsXAJ.png](http://i.imgur.com/M3OsXAJ.png)

------
aarohmankad
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...](https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha?utm_source=chrome-
ntp-icon)

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

------
guynamedloren
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...](https://www.dropbox.com/s/xbgv7fvb1y6qt3h/Screen%20Shot%202014-08-08%20at%207.03.51%20AM.png)

~~~
duairc
You could make it work for any colour with:

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

~~~
guico
Fixed. Tks

------
chrisblackwell
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?

------
m4tthumphrey
My favourite[1] despite it's name

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

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

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

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

------
slapner
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?

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

------
bjourne
Here's mine: [https://github.com/bjourne/readable-
userstyles/blob/master/h...](https://github.com/bjourne/readable-
userstyles/blob/master/hackernews.css)

------
gmaster1440
HN Special has been great as well: [http://gabrielecirulli.github.io/hn-
special/](http://gabrielecirulli.github.io/hn-special/)

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

------
thejerz
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.

~~~
guico
Tks!

------
iancarroll
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)

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

That's probably improvable

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

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

~~~
guico
Hell yeah it is!

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

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

~~~
guico
[https://chrome.google.com/webstore/detail/hn-
beautify/nhgmoo...](https://chrome.google.com/webstore/detail/hn-
beautify/nhgmoodfakokkkkkibmdaklneefimlag)

~~~
rkangel
That's what I call service. Thanks!

