Fixing GAGs New Style: Changing Colors and Fonts via Browser Plugin

Yumix

I like the more modern look of the new GAG style, but I don't agree with everything they changed. While I have no problem with the purple colour, I don't think it fits well with the other ones. Some fonts are just way too big and it looks like they forgot change a couple of things. So I adjusted it a bit to my liking.

Fixing GAGs new style: Changing colours and fonts via browser plugin.

Cascading Style Sheets (CSS) are used to add style to websites. You don't need to know how they work, it's enough to know that we can use them to change the look and feel of GAG. To edit these CSS files, we need a browser plugin called "Stylish". You can find it here:

Chrome: https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en

Firefox: https://addons.mozilla.org/en-US/firefox/addon/stylish/

If you use another browser then you have to check yourself if the plugin exists or if there are any alternatives. This does NOT work on your mobile devices.

So, once you have installed the plugin you will find a new icon in your top right bar.

Fixing GAGs New Style: Changing Colors and Fonts via Browser Plugin

Click on it and choose "Manage styles". Chrome users choose on the left side "Write new style", Firefox users will find it on the bottom. You can find my modified style which we will use here:

Chrome: https://pastebin.com/qfHTSFEu

Firefox: https://pastebin.com/pLJEM31x

So, what does it change?

- Navigation bar colour

- Navigation bar menu colour

- Navigation bar mouseover colour

- Footer colour

- New posts button font

- Feed question title font size

- Question post font size

- Sidebar polls font size

- Recommended questions font size

- Alerts colors

- iBar font

- Invite box size

Even if you have no clue how CSS works, just looking at the code should make it pretty obvious on what we do. You choose a certain part of the website and tell it what to do. In our case it's almost only colours and font size. So if you don't like my colour choice, then you can just go to the specific part in the code and replace it with your own. If you wanna add other parts of the website, you have to find out the html class name or ID with your browser developer tools. But I won't go into detail on that now.

So, all you have to do is copying the style and pasting it in stylish. Give the style a name, save and you're done. If you use Chrome then you also have to specify the domain of the website. On the bottom, choose "URLs on the domain" and enter "www.girlsaskguys.com". Once saved, you can open GAG and if the style is active then you see that the Stylish plugin icon is coloured. Without active style, it's just grey.

Fixing GAGs New Style: Changing Colors and Fonts via Browser Plugin

That's it, GAG should now look like on my first screenshot. Depending on your screen resolution, you might wanna change the size of the invite box. To do this, change "max-height: 500px;" at the beginning of the stylesheet (row 3 or 4 depending on your browser). 500px should be good for FullHD, if you have a 1440p screen you might wanna increase it to 800. If you have problems or want something else changed, just ask in the comments.

(Please note that this might not work anymore should GAG make changes on the website or it overwrites them so you won't see it.)

Fixing GAGs New Style: Changing Colors and Fonts via Browser Plugin
24 Opinion