[Persistent CSS Changes] Increasing the width of BuSo or any other site in your browser

[Bloghue]

Hey all,

So most of you must be aware of this little trick that allows you to override the CSS or JS of any website exclusively for your browser. However, for those of you who weren't aware - here's a neat little trick.

I use this extensively in my browsers to get rid of unnecessary segments of websites I frequent. I have used it to help elders increase the font size and remove unnecessary element from webpages they visit. I used it on my favorite blogs for a more distraction-free reading etc.

What is CSS Override with Persistence?
Have you ever edited a CSS property in the built-in developers tools of your browser (Chrome/FF). You can see that the changes occur in real time. When making any change from within your browser, you are essentially "overriding" the website's stylesheet.

Imagine you making an edit once and the change staying in place everytime you visit said website? Well that is a persistent override.

How do I do that?
Most browsers have a custom user stylesheet, that are loaded with every single webpage of your site. You can edit these. Firefox has userContent.css & Chrome used to have a Custom.css (which it does not support any more.) There are tutorials floating around the Internet to make these work too.

However, allow me to introduce you to three simple browser plugins.
- Control Freak (Chrome)
- Stylebot (Chrome)
- Stylish (Chrome And Firefox - not as intuitive)

'sup with BuSo width in the title?
Oh yeah! So let me show one of the above plugins in action to you people.

Now BuSo has a lovely layout, it has a nice color scheme - the whole thing is easy on the eye. And it looks and functions pretty well.

However, my only gripe is that the maximum width of the main page container is set at 960px. And on larger screens with bigger resolutions, this causes readability issues to me. I was visiting the site on an MBP 15' Retina and I found the lack of reading space troubling.

I wanted more readable area and so I decided to do a little modification. It took all of 5 seconds.

So this how the BuSo page looked before.

So I went ahead and clicked the "Gear" icon on the top right of my browser to open the simple setting panel of Control Freak. I selected the CSS tab and entered the below style. I then hit Save

.pageWidth {
    max-width: 90%!important;
  }

This is what the end result looks like

There, I have all the reading space in the world.

Thanks for reading, hope this useful to some of you.

P.S - You may play around with the width. I ended up setting it at 75% after posting this, which is just perfect according to me.

P.P.S - Or you may not play around or do anything at all. Adapting websites according to individual requirements is entirely a manner of discretion. Some like doing it. Others donot.

P.P.P.S - I am not responsible if this turns your computer into Ultron and it starts attacking you. Or if this sets fire to your dear little machine. Or if it formats your hard drive. Basically, what am saying is, I am not responsible for anything that happens to you or your computer, because you tried to mess with the width of a webpage.

 

[Ryuzaki]

Thanks for this tip. I didn't know you could persistently maintain the changes.

Personally, my monitors are so wide that I don't ever maximize my browser. It creates way too much eye and head movement to read a line all the way across. I prefer the newspaper and old book styles where there are two columns per page or however many where my eyes barely move to take it all in.

BUT! I would definitely set a max-width to 90% and then scale text with viewport-width and read BuSo from my couch on a giant smart TV. That'd be great... if I had a TV

 

[Bloghue]

Thanks for this tip. I didn't know you could persistently maintain the changes.

Personally, my monitors are so wide that I don't ever maximize my browser. It creates way too much eye and head movement to read a line all the way across. I prefer the newspaper and old book styles where there are two columns per page or however many where my eyes barely move to take it all in.

BUT! I would definitely set a max-width to 90% and then scale text with viewport-width and read BuSo from my couch on a giant smart TV. That'd be great... if I had a TV

Great point. I don't go full screen with my browsers on larger screens as well. However, on a retina laptop or any other that supports a horizontal resolution of more than 1600px - I prefer reading at 100% width without the desktop or other app windows peering at me.

As I said, to each his own.