

Simple user styles for popular websites - whalesalad
http://connors.github.com/simple-user-styles/

======
brianwillis
As a guy with a light-text-on-a-dark-background blog I've got to ask, is it
really that bad? I've always thought that light on dark was easier on the
eyes, not harder. This is especially true if you make the font size
reasonable, which is something Daring Fireball isn't so great at.

Could those of you whose sight is starting to go comment on this?

~~~
bradleyland
Overall, the typography on your blog is pretty good. I'd definitely increase
the contrast of the text though. Your measure is a little on the long side. A
good guideline is to keep it under 80 characters. You're stretching it a bit
at 90-ish characters, but you've got plenty of leading, so you can get away
with it. If you reduced your measure a bit, you could reduce your leading a
bit so your paragraphs would have a more natural density and better vertical
rhythm.

<http://en.wikipedia.org/wiki/Measure_(typography)>

<http://en.wikipedia.org/wiki/Leading>

Note: You'll notice that CSS line height is not the same as leading, but old
habits die hard, and I'm used to referring to it as leading.

[http://blog.8thlight.com/chris-peak/2012/12/30/vertical-
rhyt...](http://blog.8thlight.com/chris-peak/2012/12/30/vertical-rhythm.html)

~~~
brianwillis
Thanks for this. It's some pretty insightful stuff.

I'm not in a place where I can make changes right away, but I'll trim back the
measure and fiddle with the line height until I find something I'm comfortable
with.

I'm not sure about the contrast though. Getting that one right is tough. My
first attempt was a burn-your-retinas-out white that was so bright it almost
hurt to read. Perhaps I've dialed it down too far.

~~~
mixmastamyk
Contrast needs a boost. #aaa and #ccc text are good for dark backgrounds, #999
is imho too dark.

~~~
danielbarla
Seconded; with #999, I it irritates my eyes in a normal office environment. I
quickly changed it in the browser, and anything from #AAA to #CCC looked fine.

------
micampe
Hacker News:

    
    
        * {
          font-size: 1em !important;
          line-height: 125% !important;
        }
    
        .subtext {
          font-size: 0.8em !important;
        }
    
        code {
          font-size: 1.2em !important;
        }
    
        body {
          width: 900px;
          margin-left: auto;
          margin-right: auto;
        }

~~~
zheng
A bit more extravagant, but this is what I use for a dark take on HN

<https://gist.github.com/brcooley/5045265>

~~~
GhotiFish
Woh. A for effort, but poorly balanced.

~~~
zheng
Not entirely sure what you mean, but I'd love any ideas for improvement. I'm
no designer, I just prefer the dark (backgrounds, that is).

------
bencevans
What tool/extension is being used to apply the custom stylesheets?

~~~
skcin7
I just tried Stylish add-on for Firefox. Works great except I can't seem to
figure out a way to make custom styles work for only a specific page. Maybe
I'm missing something but there doesn't seem to be a way.

For example if you have .margin-width CSS class defined it will work on any
page that has .margin-width CSS class, not just desired page (like Facebook).

~~~
KwanEsq
As bpierre said @-moz-document rule, which I just discovered has actually been
unprefixed since Fx6.

Here's the MDN page detailing it and the various functions:

<https://developer.mozilla.org/en-US/docs/CSS/@document>

~~~
pbhjpbhj
So @document means you can bypass the addon and just use the user stylesheet
to implement the same thing. Didn't know about @document.

------
vxNsr
The facebook one already seems broken... the chat thing is still there and
even if I hide it manually my username and options buttons are dropped below
the top bar, and are much closer to the center.

I must be doing something wrong because the techcrunch CSS has no effect...
gonna start debugging... updates are coming

Well I don't seem to have an answer, techcrunch doesn't seem to be affect at
all, even if I use some other styles from userstyles.org. Facebook still
renders weird, so all in all I like the idea but it doesn't seem to be working
for me.

if anyone has an idea what the issue might be I'd be much obliged (I'm using
hnotify so I'll know as soon as you reply to me!) thanks

------
destraynor
Do bear in mind if you install these you're trusting that they'll be
maintained. In my experience user styles take all of about 3 weeks before they
end up as a half way house, neatening up an old version of site while also
ballsing up new features and sections that get added.

------
noahc
Does anyone else find the disclaimer at the bottom odd? Any ideas why it was
included?

~~~
fishtoaster
Probably to head off inevitable complaints by people assuming that this is a
criticism of those sites' designs.

------
donbronson
ads are removed. seems like this is less about style and more about removing
things we are annoyed by, no?

~~~
polemic
That doesn't appear to be the focus. Facebook and Twitter timeline ads will
remain, obviously (does anyone actually click on the floating ads on the right
of the FB UI), Daring Fireball retains it's very subtle image ad (but, who are
we kidding, it's one big Apple ad anyway, amiright?).

It _would_ be ethical to include the ads though.

------
r00ster
Found it out. Eg. twitter.css over here is not a CSS but HTML file:
<https://github.com/connors/twitter-user-style> Double click on it and use the
CSS listed there with the Stylish Extension for Chrome found here:
[https://chrome.google.com/webstore/detail/stylish/fjnbnpbmke...](https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en)

------
uladzislau
Please someone make a Chrome extension to incorporate all these user styles!

I'm sure there would be a dozen of websites to add which need
readability/usability facelift.

------
nicksergeant
Here's one I just did for Weather.com yesterday:

<https://twitter.com/nicksergeant/status/306514899402633216>

The code: <https://snipt.net/nick/make-weathercom-not-suck-so-much/>

------
frontendbeauty
Awesome effort. Be careful, though, when you post screenshots of your Twitter,
Facebook, Instagram feeds to the world to see -- don't forget that the people
who you follow may see that as a breach of privacy. Very likely the things
that we can see in those screenshots were never intended to be public.

------
dave1010uk
There's a large database of user styles for many websites here:
<http://userstyles.org/>

There's also <http://userscripts.org/> which is the same but for JavaScript
instead of CSS.

------
oseibonsu
I can finally read TechCrunch again!

------
tekromancr
Awesome. I love the facebook style.

~~~
donbronson
If you like that.... There's a chrome extension that makes .com look more like
their other properties: [https://chrome.google.com/webstore/detail/neue-
face/pjjeeinb...](https://chrome.google.com/webstore/detail/neue-
face/pjjeeinbpdojncbefnojbibhiihpjoem?hl=en-US)

------
mrpollo
I created an Engadget style, in case someone is interested
<https://github.com/mrpollo/engadget-user-style>

~~~
bbrizzi
You need to add an "!important" attribute at least for the "display:none;"
properties for them to work. Too lazy to make a pull request, sorry ;)

~~~
mrpollo
I guess it depends on what you are using to add the styles to the site, you
can insert a style tag or you can do an extension, for chrome I used Stylebot,
for both my styles work fine, if you are planning on adding the styles via
link tag the css engine is going to parse them and add them to the bottom of
the stack thus having less priority hence the need for the !important
attribute on some rules that aren't specific enough.

~~~
bbrizzi
Was using Stylish extension on Firefox. It does seem natural that custom user
styles take precedence over "built-in" styles, but it seems like it's not
always the case =/

~~~
mrpollo
Haven't heard of Stylish, I'll take a look, maybe its inserting a link tag to
the html.

------
johncoltrane
I can't say I'd use any of these but I must say that using the colorscheme of
each site is brilliant. Good job!

------
frontendbeauty
I imagine the custom styles would be hard to maintain on more rapidly-evolving
products.

------
lists
Suprised Georgify didn't make the list for Hacker News

