A quick fix for unpleasant colours and other offenders

How to enjoy reading when your eyes can’t stand it anymore

You found a great article but the colours just don’t do it for you!

Or its designers never heard of Responsive Design, and now you have to wiggle back and forth as the article doesn’t fit in your screen!

Or the whole text is squeezed in a tiny column, so you need to scroll 10 times to finish any sentence!

The content is good, you want to read it, but the style makes it so painful. What can you do other than quit?

Here is a quick fix — Change the style yourself!

Just change colours, column width, anything else!

How to do it? Easier than you may think ☺

A Real World Example.

I was reading (or should I say, trying to read) the article http://www.integralist.co.uk/posts/maintainable-css-with-bem/ on a cool system to give some sanity to your CSS … Anyway … here is the article I want to read but … the Red Navigation Bar on top of it just makes so painful for my eyes.

So … here is what I do. In Chrome Browser, right-click on that offending colour (Ctrl-click on Mac). A menu pops up, where you click “Inspect Element” right at the bottom. Here is what you should see:

Or maybe this:

You can switch between two by clicking and holding this icon:

Now, at the bottom right corner you see the Menu “Styles”. Scroll it to see the “offending” declaration:

Here it is — background: crimson; with red colour box — this is how you spot it quickly as you scroll!

Click right on that Red Box to see a nice colour picker popping up, where you can click, for instance, on Black in the bottom left corner.

Immediately the Red colour has changed to Black. Voila:

But what is it, there is still this thin red bar left in the bottom right corner of the menu bar. Let us right-click on that and select “Inspect Element” again:

And again we see that red box inside the “Styles” menu. Click on that box and change it to Black or any other colour and — Done!

Now go and read the article and stop playing with those toys ☺