Simple user styles for popular websites

http://connors.github.com/simple-user-styles/

by whalesalad • 13 years ago

218 73 13 years ago

connors.github.com

tekromancr• 13 years ago

Awesome. I love the facebook style.

donbronson2• 13 years ago

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

donbronson2• 13 years ago

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

Zr40• 13 years ago

'User styles' is a common name for user-applied CSS stylesheets; it's not necessarily about applying styles in the English sense of the word. According to the author, these stylesheets remove some of the clutter, which presumably includes some or all ads.

ktsmith• 13 years ago

Annoyances are not always ads. Looking at twitter it's also removing annoying "features" like trending, who to follow, and the extra navigation box from the left column.

polemic• 13 years ago

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.

JacobJans• 13 years ago

If this wasn't about removing ads, they would have been reformatted to be beautiful too.

Removing ads is effectively the same as pirating software: You're getting what you want without paying for it.

noahc• 13 years ago

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

fishtoaster• 13 years ago

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

cliftonmckinney• 13 years ago

The 'complete redesign' trend has been seen by some in the design community as a bit arrogant and impractical. My guess is that poster didn't want to be included in that crowd.

wilfra• 13 years ago

Probably doesn't want to burn any bridges or piss anybody off. If he's friends with Mark Otto (creator of Bootstrap) I assume he's not some unknown CS student looking to make a name for himself but actually somebody who works in the industry and cares about his reputation.

dktbs• 13 years ago

I thought it was a good idea to include the disclaimer. As obvious as it might seem that these are opinionated modifications to the site's intended style, it may save some grief to make your awareness of the issue clear.

pbhjpbhj2• 13 years ago

Perhaps as a "I'm not committing contributory copyright infringement" statement.

Altering a page for a user to remove ads, for example, is pretty much providing a [unlicensed] derivative work. Providing the tools to perform copyright infringement - with the encouragement of a demonstrated technique - could be considered to be contributing to a tortuous infringement, jurisdiction dependent [along with a pile of other dependencies] of course.

bencevans• 13 years ago

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

masonhensley• 13 years ago

Stylebot perhaps?

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

marksands072• 13 years ago

You could try dotcss: https://github.com/stewart/dotcss

marksands072• 13 years ago

This repo appears to be outdated. I forked it and submitted an extension to the Chrome store so you can use it with the latest version. https://github.com/marksands/dotcss

skcin7• 13 years ago

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

bpierre• 13 years ago

You can use @-moz-document, I’m using this with dotjs for Firefox https://github.com/rlr/dotjs-addon#css

KwanEsq• 13 years ago

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

hk__2• 13 years ago

On Ubuntu & Co, you can copy it in your global custom stylesheet:

Chromium: ~/.config/chromium/Default/User\ StyleSheets/Custom.css

Chrome: ~/.config/google-chrome/Default/User\ StyleSheets/Custom.css Other browsers: Don’t know

jld• 13 years ago

You can see the Stylish icon in the poster's screenshots.

https://chrome.google.com/webstore/detail/stylish/fjnbnpbmke...

deevus• 13 years ago

This question _should_ be answered on the given site.

I know I could Google to find out, but what about the general Facebook user? They won't know what CSS is.

dave1010uk2• 13 years ago

Is there a way to get any of these working on an Android web browser?

randomchars• 13 years ago

Not in the default one or in chrome. Firefox however supports the Stylish extension.

russelluresti2• 13 years ago

I'm using Stylebot.

oseibonsu• 13 years ago

I can finally read TechCrunch again!

brianwillis2• 13 years ago

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?

mapleoin• 13 years ago

My eyesight is pretty good and I still think you need greater contrast on your blog and perhaps a bigger font.

kingnight• 13 years ago

Agreed. I think also reducing the line-height from 175% at that width/font-size might make it a bit more readable ... thinking 125% looks easier on the eyes on my Mac @ 100% zoom + rgb(199, 199, 199)

kaolinite• 13 years ago

Personally I prefer dark backgrounds and light text and will switch eBook readers, etc, to that setting if they have one. But, not everyone is the same. I'd be interested to see what the most popular preference is.

qu4z-2• 13 years ago

For me it depends largely on the surrounding lighting conditions. During the day I prefer dark-on-light; in the evenings I prefer light-on-dark. If pressed to choose one I'd go for light-on-dark, because having your retinas exploded by a pure-white background is far worse than having to squint a little to read light-on-dark during the day.

orng• 13 years ago

Yeah I'm the same. I usually work in the dark, with the blinds shut and the lights off. Light colored backgrounds can really burn the eyes. I really love the Hacker Vision Chrome extension[1] which inverts the color-scheme of any site you go to and can be easy configured not to run on specific sites.

[1] https://chrome.google.com/webstore/detail/hacker-vision/fomm...

michaelwww• 13 years ago

Light text on a dark background is fuzzy for me and hurts my eyes due to constantly trying to focus. This guy has an interesting theory about black text absorbing surrounding light while light text reflects it causing blurriness: http://uxmovement.com/content/when-to-use-white-text-on-a-da...

I use f.lux to mitigate the brightness of light backgrounds system wide because it adjusts according to time of day.

shinji97• 13 years ago

A problem I found with dark-background sites is that majority of the website use light background with dark text. As a viewer, switching from a dark-background website to a light-background-text can be a little painful, especially after spending a long period of time on the darker page.

lucian1900• 13 years ago

Everything being light on dark would fix that. It would be nice if at least everything was reliably switchable.

kmfrk• 13 years ago

Typography 101 says that light on dark requires a bigger font weight. It could be that people forget this in the cases where it bothers people.

It's almost an easter egg, but Daring Fireball also supports custom font sizes at the bottom of the site: http://daringfireball.net/preferences/.

baby• 13 years ago

if the blog has good content I usually just copypaste the content in the notepad to read it.

rartichoke• 13 years ago

The problem with dark background sites is that almost every content oriented site that's popular use light backgrounds.

If you spend most of your time looking at a light background then switching to a dark background takes a little bit to adjust to.

It's more of an issue after you read a long article on a dark background, when you switch to a light background then things look weird for a noticeable amount of time.

bradleyland3• 13 years ago

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

brianwillis2• 13 years ago

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.

lifeformed• 13 years ago

Do you count whitespace in the character count for the measure?

ckluis• 13 years ago

Marketers like to stick to 65-70 characters for what its worth.

fatboy• 13 years ago

I spend the whole day staring at light on dark text, but generally I find it difficult to read websites that have that setup. It's partly for the reason others have mentioned - changing from one to the other requires some time for my eyes to adjust - but it's aggravated by many sites because there is so much contrast between the text and the background.

I use a variant of Tomorrow Night, and the pastels on moody darks works well, but as things approach white on black, it leaves me needing a lie down

SCdF• 13 years ago

My sight isn't starting to go, but I will say I find the blog much more readable before the custom font got loaded and it still used Verdana (I'm on Windows).

mixmastamyk2• 13 years ago

Depends on the typical and current conditions of the viewer--however few people realize it. Those that do use f.lux or one of the others.

For example, if the viewer sits in an office under 50 florescent lights, dark on light is best (e.g. Excel-jockies). This viewer "can't imagine any other way!" I often wonder how these people survived before Windows.

If instead they are a digital artist in dim lighting (for better color accuracy) then bright white pages will be blinding, "my eyes are bleeding". Ditto the late-night hacker.

Since I'm online day and night I make judicious use of the negative plugin in compiz (Super+N) and turn down screen brightness at night. When on Windows I use f.lux.

For the browser specifically, the invert-lightness bookmarklet is also helpful when a lot of images are involved: https://www.squarefree.com/bookmarklets/color.html

jbester• 13 years ago

Light on dark can be really hard to read for anyone with a pronounced astigmatism.

The background color bleeds into text dramatically lowering the contrast. On computer displays, black on pure white can cause the same issue to a lesser effect. I find black on a pale color is optimal.

mrpollo3• 13 years ago

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

bbrizzi2• 13 years ago

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

mrpollo3• 13 years ago

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.

micampe• 13 years ago

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;
    }

zheng2• 13 years ago

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

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

GhotiFish• 13 years ago

Woh. A for effort, but poorly balanced.

jfb• 13 years ago

Techcrunch:

  * { visibility: hidden !important; }

russelluresti2• 13 years ago

I actually rarely go to the news.ycombinator.com site. I always just use hckrnews.com.

lists• 13 years ago

Suprised Georgify didn't make the list for Hacker News

uladzislau• 13 years ago

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.

destraynor• 13 years ago

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.

vxNsr• 13 years ago

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

frontendbeauty2• 13 years ago

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

frontendbeauty2• 13 years ago

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.

johncoltrane• 13 years ago

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!

r00ster• 13 years ago

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

dave1010uk2• 13 years ago

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.

nicksergeant• 13 years ago

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/

Simple user styles for popular websites

Related Stories