Show HN: HN Special – A visual theme and Chrome extension for Hacker News

http://gabrielecirulli.github.io/hn-special/

by terabytest • 13 years ago

87 71 13 years ago

gabrielecirulli.github.io

Jeremy1026• 13 years ago

Am I the only one that can't read the visited links without some serious eye strain?

terabytest14• 13 years ago

Is the color too light?

hieronymusN• 13 years ago

It does need some more contrast. Also, while I do appreciate the elegance overall (I'm a UI designer as well), the vertical space could be tightened up a bit to get some more comments on a scree. Perhaps adding some options to the extension to allow toggling between a "Tight" and "Airy" stylesheet?

ExisTy• 13 years ago

It doesn't bother me -that- much, they're visited after all.

aeon10• 13 years ago

I really love the infinite scrolling. I think there should be a bit more contrast. It is hard to read the light colored orange on white. Also the visited (light light orange) is a pain. And maybe highlighting the points a thread has would be a nice feature too. Maybe another darker color for that.

sideproject2• 13 years ago

Infinite scrolling is good, until you want to use the search box!

nisdec• 13 years ago

Yep. I would suggest to add a position: fixed to the header. And place the searchbox there of course.

terabytest14• 13 years ago

I was thinking about maybe adding a "Low contrast" option to the menu or something like that, which enables a version of the theme with easier to read colors.

What do you mean about highlighting the points in a thread? Making the count below the title more visible?

xauronx• 13 years ago

It looks so crisp and nice, but the upvote arrows are soooooo bad. If you could replace those it would be amazing.

terabytest14• 13 years ago

Oh yeah, I'll try replacing those soon.

sideproject2• 13 years ago

Nice one.

BUT!, it's strange, maybe because I'm SOO used to HN (like I'm soo used to Google), I had to change back. Is it just a case of "you'll get used to it"?

terabytest14• 13 years ago

I think so. Maybe try it out for a day or so. If anything's wrong, please let me know what you think!

Oh, by the way: even if you like the features but not the theme, you can easily disable the theme only from the settings menu at the top (the gear icon in the header)!

seanalltogether• 13 years ago

What you're probably missing is the change in information density. Most HN redesigns jack up the font size and the padding between links.

jwarren• 13 years ago

Nice, but I find it a bit too hard to read. On my Stylebot style, I reduced the orange to just a highlight colour. I find it pretty pleasurable to use. Feel free to take anything from it that you want: http://stylebot.me/styles/2800

Some of the selectors in the CSS are very contrived. I found it was the only way to select what I wanted in a document made of tables within tables with barely any classes.

Also, I totally feel you on this! The underlying HTML for HN is absolutely terrible.

terabytest14• 13 years ago

Oh yeah, I see. I think I'm going to try and implement a low contrast theme, with grey links and easier to read text. Thanks for the link, I'll have a look at it!

joyeuse6701• 13 years ago

High contrast! Let me see the website not squint and guess!

dokem• 13 years ago

I added a bit more font weight to everything[1]. Repo[2] for anyone that wants to try it out. It's a bit hacky though, I just modified the generated css rather than the styl input.

http://i.imgur.com/4W6aZEZ.png

https://github.com/reidHoruff/hn-special

fotcorn• 13 years ago

I always use http://hckrnews.com/ and not the normal frontpage. Many small gems without many upvotes get lost on news.ycombinator.com.

reustle• 13 years ago

Fantastic, thanks for posting. I understand the design aspects of these skin extensions, but I don't want to scroll more than I already do to see the same content.

talles• 13 years ago

Amazing. I loved the hour/date marks.

omgmog4• 13 years ago

It's nice, but thin fonts are very hard to read (screenshot: http://uk.omg.li/QPvZ)

terabytest14• 13 years ago

Oh, damn that's a mess. What OS is that?

omgmog4• 13 years ago

Chrome 28 on Mountain Lion http://uk.omg.li/QP02

robin_reala• 13 years ago

Probably Windows. Chrome uses GDI on Windows instead of DirectWrite for some unfathomable reason: https://code.google.com/p/chromium/issues/detail?id=25541

Duelist• 13 years ago

Good job on the extension. I did have a couple of suggestions:

1. Have an alternate "dark" theme version for those of us who like dark backgrounds as opposed to bright eye-popping colors.

2. Similar to the "Open links in new tabs" option, would it be possible to add a "Open comments in new tabs" option?

terabytest14• 13 years ago

Thanks!

I'll try implementing a low-contrast version with less harsh colors soon! About the "Open comments in new tabs" option, yes, that's a very good idea. I'll do that as well!

Rulin3• 13 years ago

Here's a dark theme I created in Stylish. Code: http://pastebin.com/BhZTuwJV Screenshot: http://i.imgur.com/cnrYGdR.png

davidcollantes• 13 years ago

This is lovely. Thank you!

Would it be possible to port this as a Safari extension? Thanks again.

terabytest14• 13 years ago

Probably, yeah. I'm not sure how development for Safari works, but I could give it a try soon.

k-mcgrady• 13 years ago

I just installed it and really like it however when I scroll (quite slowly) down the main page though the text and background blur together so that I can't see anything. I'm not sure if it's because of the thin fonts of the font colours (the headlines seems to blur the most) but it's quite annoying. I'd normally scroll at that speed and be able to skim the headlines. It's impossible to do with the blurring.

orf• 13 years ago

I've just installed it and I'm liking it. The links are a bit hard to read on the home-page (they are a bit faded) but otherwise it looks good. Thanks!

terabytest14• 13 years ago

I'm glad you like it!

jjindev• 13 years ago

I like it also. My Special Eyes have trouble with default HN. For me, like orf, the faded colors are a bit of a strain.

Also, if I don't open a story in a new tab, but go out and back, I sometimes have trouble finding the entry I just used (and its comments). A color for "just visited" would be nice.

beaker52• 13 years ago

I agree. The faded orange needs to be a few % less gray/white.

BWStearns• 13 years ago

Very cool, I like the borderless body area. I agree with Orf on the hard to read (perhaps a little darker links/textbox font?). The other thing is that endless scroll doesn't seem to be working for me.

mrleinad• 13 years ago

Please,please,please implement the Firefox version..

Ashuu• 13 years ago

Too much orange. Difficult to read fonts. If only it had some more soothing colors, I would use it daily! Nice though!

daGrevis2• 13 years ago

I really like it. To be honest, I prefer it more than Georgify [1].

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

The only problem I have with it is that after opening comment section, the design pops-out and overwrites the original design.

terabytest14• 13 years ago

How do you mean? Are comments hard to read?

daGrevis2• 13 years ago

Technically speaking, old design for comments are loaded and then, using JavaScript, it's replaced with the new design.

toyg• 13 years ago

Did you test it on a MBPr ? The screenshot looks really blurry here. EDIT: it's just the screenshot, the actual extension works fine. A bit more contrast would be appreciated though. Maybe a different background color for links ?

terabytest14• 13 years ago

Glad it's working fine for you!

terabytest14• 13 years ago

Many thanks to everyone for the feedback! I'll try implementing the ideas you've given me (easier to read colors and other tweaks).

For those who've installed the extension, it should auto-update when new features come up and you should be notified of the presence of new modules and the low-contrast theme.

HugoDias• 13 years ago

Please, make it 100% width ! PLEASE!

terabytest14• 13 years ago

Good idea!

mindrag• 13 years ago

Very cool! I just forked it, thinking of implementing collapsible comments.

kyle_martin1• 13 years ago

I like the overall design but the links are too light orange which make it hard to read. Design's number one goal is to 'get out the way of the user'. Change the link color to something with more contrast against the white background. Then I'll really like it.

MichaelAza• 13 years ago

Great work, though it's a shame it's a browser extension. You can't use it on Firefox or mobile.

There's a site, tomodo.com, that allows you to modify webpages much like a greasemonkey script or a browser extension and then publish it as a native website. I'd suggest you'll look into that.

weavie• 13 years ago

Wow. Thanks for sharing. That's going to become my goto site now!

hadem• 13 years ago

Looks like there is a Hacker News mod already.

http://hnews.tomodo.me

Zikes• 13 years ago

That doesn't look safe at all.

importMe• 13 years ago

Here[1] is a theme I made for HN that can be installed on Firefox using Greasemonkey, or on Chrome using Tampermonkey.

[1] https://github.com/dparpyani/HackerNews-Dark-Theme

arpit105• 13 years ago

Thank God for the new interface. Despite the bright orange, I will never go back to original Hacker News. Please implement it for HN India too :)

heydonovan• 13 years ago

Fantastic! I've only one suggestion. I'm using a Macbook Pro (Retina), and the up-arrow icons are extremely blurry. Other than that, everything looks amazing. :)

andrewb• 13 years ago

Just installed it and think it's superb. I hope HN takes some influence from your extension.

Rulin3• 13 years ago

I usually like my news sites to have a darker theme, so I quickly threw this together in the Stylish Plugin, to work with your HN Special Extension http://pastebin.com/BhZTuwJV . Just added the style to work with URL's on the domain "ycombinator.com"

Rulin3• 13 years ago

here's a screenshot for those who just want an easy comparison http://i.imgur.com/cnrYGdR.png

mradmin• 13 years ago

I'm just say that the colour contrast is atrocious. I've got pretty good eye sight and the text on that screenshot looks blurry. Both the unvisited and visited link states fail at AA colour contrast accessibility levels.

[edit] - It took me a while to find the install link. I thought it was a heading. Why don't you use an underline for links?

chenster• 13 years ago

I like it. It's about time someone do something about it or I was planning to do something like that myself. It would be awesome one could customize the color and fonts and stuffs like that.

The active hyperlink is too fade to read. Please change that.

jackmaney• 13 years ago

Ow...that visual theme hurts my eyes.

milhous• 13 years ago

It's really nice, but not a regular Chrome user. Somebody loves the OS X Mavericks theme!

rhokstar2• 13 years ago

Excellent work!

HN is like Craigslist in a UI/UX sense, very conservative (or they don't care at all).

dysoco2• 13 years ago

Yet both work perfectly.

Other example is the Slackware website: http://www.slackware.com/

rhokstar2• 13 years ago

Slackware will always be slackware! Its been awhile since I visited their site (like early 2000's). It still looks the same!

AJay17• 13 years ago

I love it!

dysoco2• 13 years ago

Lately I've realized that most of new extensions and applications are specifically designed for Chrome.

I stay loyal to Firefox, but it looks like it has fallen a bit behind.

qwertzlcoatl2• 13 years ago

Same here. There are quite some extension I find attractive but can't use because I remain celibate to Firefox.

qwertzlcoatl2• 13 years ago

Collapsible comments are my top priority for a hacker news extension. It looks really neat though.

Show HN: HN Special – A visual theme and Chrome extension for Hacker News

Related Stories