Simple user styles for popular websites(connors.github.com)
connors.github.com
Simple user styles for popular websites
http://connors.github.com/simple-user-styles/
18 comments
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.
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.
My eyesight is pretty good and I still think you need greater contrast on your blog and perhaps a bigger font.
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)
The measure of his paragraphs is around 90 characters. At that length, 125% line-spacing is way to tight for good readability. I would go 150% at a minimum. The line spacing looks a little sparse at 175%, but it remains very readable.
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.
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.
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...
[1] https://chrome.google.com/webstore/detail/hacker-vision/fomm...
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.
I use f.lux to mitigate the brightness of light backgrounds system wide because it adjusts according to time of day.
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.
Everything being light on dark would fix that. It would be nice if at least everything was reliably switchable.
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/.
It's almost an easter egg, but Daring Fireball also supports custom font sizes at the bottom of the site: http://daringfireball.net/preferences/.
if the blog has good content I usually just copypaste the content in the notepad to read it.
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.
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.
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://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...
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.
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.
Contrast needs a boost. #aaa and #ccc text are good for dark backgrounds, #999 is imho too dark.
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.
Marketers like to stick to 65-70 characters for what its worth.
Do you count whitespace in the character count for the measure?
Yes. Measure is the total length of the line. Whitespace adds to the length, so you have to count it.
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
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
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).
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
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
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;
}Techcrunch:
* { visibility: hidden !important; }A bit more extravagant, but this is what I use for a dark take on HN
https://gist.github.com/brcooley/5045265
https://gist.github.com/brcooley/5045265
I actually rarely go to the news.ycombinator.com site. I always just use hckrnews.com.
What tool/extension is being used to apply the custom stylesheets?
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.
I know I could Google to find out, but what about the general Facebook user? They won't know what CSS is.
Is there a way to get any of these working on an Android web browser?
Not in the default one or in chrome. Firefox however supports the Stylish extension.
I'm using Stylebot.
You could try dotcss: https://github.com/stewart/dotcss
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
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).
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).
You can use @-moz-document, I’m using this with dotjs for Firefox https://github.com/rlr/dotjs-addon#css
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
Here's the MDN page detailing it and the various functions:
https://developer.mozilla.org/en-US/docs/CSS/@document
So @document means you can bypass the addon and just use the user stylesheet to implement the same thing. Didn't know about @document.
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
Chromium: ~/.config/chromium/Default/User\ StyleSheets/Custom.css
Chrome: ~/.config/google-chrome/Default/User\ StyleSheets/Custom.css Other browsers: Don’t know
You can see the Stylish icon in the poster's screenshots.
https://chrome.google.com/webstore/detail/stylish/fjnbnpbmke...
https://chrome.google.com/webstore/detail/stylish/fjnbnpbmke...
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
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
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.
Does anyone else find the disclaimer at the bottom odd? Any ideas why it was included?
Probably to head off inevitable complaints by people assuming that this is a criticism of those sites' designs.
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.
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.
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.
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.
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.
ads are removed. seems like this is less about style and more about removing things we are annoyed by, no?
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.
It would be ethical to include the ads though.
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.
'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.
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.
Removing ads is effectively the same as pirating software: You're getting what you want without paying for it.
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...
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.
I'm sure there would be a dozen of websites to add which need readability/usability facelift.
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/
https://twitter.com/nicksergeant/status/306514899402633216
The code: https://snipt.net/nick/make-weathercom-not-suck-so-much/
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.
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.
There's also http://userscripts.org/ which is the same but for JavaScript instead of CSS.
I can finally read TechCrunch again!
Awesome. I love the facebook style.
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...
I created an Engadget style, in case someone is interested https://github.com/mrpollo/engadget-user-style
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 ;)
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.
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!
I imagine the custom styles would be hard to maintain on more rapidly-evolving products.
Suprised Georgify didn't make the list for Hacker News
Could those of you whose sight is starting to go comment on this?