Like many others, I was caught by surprise by the Google+ social network redesign. Since I thought a lot of it simply doesn’t make much sense from the desktop side of things (the key elements are too small and away from the center of your attention) and using Google+ would be much more unpleasant for me, I thought about creating my own CSS user style for Opera, correcting my biggest gripes. Honestly, I had no idea what I was getting into and didn’t really expect to spend several days on it (which could probably be less if I actually knew more about CSS or if I actually was a webdesigner), but I’m rarely seen to back off a challenge. I’m quite pleased with the results, though. And I’ve even managed to workaround some Google+ bugs in Opera – given I’m not a pro at all, I’d say that’s not too shabby.
You can see the user style compared on the screenshots below (note that they do not reflect some latest fixes, though):
Plain Google+
Widescreen user style with narrow chat bar
Widescreen user style with normal width chat bar
My display is using the 1680×1050 resolution and I use the browser maximized. This user style is pretty much meant for higher resolution displays (that is if you still can think of ie. 1680×1050 as “higher resolution” nowadays). When used in resolutions lower than 1400 pixels horizontal (give or take) you lose most of the advantages of my user style and only get some minor changes (wider stream, few design changes).
The user style is of course experimental and it’s quite likely you’ll experience some visual problems or glitches. I’m currently not really aware of any (apart from some sidebar buttons overlapping the items slightly, since I had to get as much space as possible to get the stream to the right as far as I could), but that doesn’t really mean anything. Also, please note that this user style is actually quite a wild hack, it’s nowhere near elegant or polished and it can break any time Google change something. But it gets the job done, for now.
If the browser window gets narrower than about 1260 pixels, the chat bar on the right “minimizes” to the bottom edge and the page layout changes slightly. That’s actually designed by Google, not me – I’d rather have the minimized state of chat bar as default, but I didn’t manage to do that (and I expect it’s done by some kind of script, not by element properties). Since I don’t use the chat in browser at all, I’ve made the chat bar narrower to get the main content just a bit more to the right. I could get rid of it completely, but I wanted to keep at least theoretical possibility to use it – it’s narrow, but still usable, I think. Since then, I’ve also made an alternative style with normal width chat bar, though that meant moving the stream a bit to the left.
As for the changes – the most important page element, meaning the posts in the stream itself, are a bit wider (I’ve adjusted the width based on my display’s resolution so they’re a bit wider than default, but there are no ugly wide “one liners”) and they’re also not fixed at the left side of the screen now. They’re pretty much in the center, exactly where they belong as a main element of a social network page (with default design, this premium spot was occupied by those “trending on Google+” sidebar items, which, I’m sorry to say, I’m not that much interested in, certainly not to the extent of justyfing them taking such a prominent place). If your horizontal display resolution is really high, you still get whitespace at the sides, but I hope there’s less of it and that the web page space is put to better use. Honestly, I really don’t understand the illogical page layout and waste of screen estate by Google. I’d like to believe it’s actually just a placeholder for some coming up features, but I’m doubtfull – lately, Google’s record on sensible UI design is not that great in my book, most of the latest redesigns waste space and seem to be created mainly with the portable device touchscreen user in mind, not with desktop users in mind, so I wouldn’t be that surprised if the whitespace really was an intentional choice with nothing to follow up on it.
And since I was already messing with the layout, I’ve made some more changes to my tastes – ie. removed the horrible black background on posts with images attached, put the post author icon back to the post box itself, removed the user icon next to the “Share what’s new” box (I’ve kept mistaking it for another new post in my stream, for some reason), removed the “comics bubbles” on posts (IMO quite cheap and a poor design choice), made some changes to the profile page (I really don’t get the reasoning behind putting up a cover photo on your profile and then overlaying third of it with an avatar) and done many small tweaks and adjusts. Oh, and I’ve also managed to work around the issue with the profile preview popup on user icon mouseover – in Opera, when the user does not have the default cover image, you’ll get the actual cover image below the circle/add button there, not under the avatar. That is now fixed, so the profile preview looks as it should.
Here are the downloads:
Opera widescreen Google+ user style for old Google+ top bar
Opera and Chrome widescreen Google+ user style for new Google+ top bar
Firefox widescreen Google+ user style for new Google+ top bar
Opera and Chrome widescreen Google+ user style for new Google+ top bar – normal width chat bar
Firefox widescreen Google+ user style for new Google+ top bar – normal width chat bar
The user style is meant to be used with Opera 11.6x or higher mainly, I can’t vouch for it working properly with other Opera versions and/or other browsers. But I’m testing it in current Chrome and Firefox versions and it seems to work fine there as well. There are two versions for Opera – the first one is meant to be used if you still have the “old” Google+ top notification bar, that is the thin black line at the top of your screen. The second one is meant for the “new” Google+ top notification bar, which is a lot wider and actually consists of two parts, the thinner black one on the top and wider grey one below it (which shows you new comment notifications and avatar). The “new G+ bar” version works with Chrome as well.
Please note that since my Google+ switched to the new wider notification bar, the old notification bar user style is no longer updated, since I can’t test it. I try to keep the other versions updated when time allows and when I’m notified of some problems/bugs. The version number and basic changelog can be found in userstyle header.
As mentioned, you’re expected to be using your browser window at 1280 pixels or more (preferably). To apply the style in Opera is quite simple – save it to your local disk, right click on Google+ page in Opera, select “Edit site preferences” and on the “Display” tab in “My style sheet” select the downloaded user style file. In Firefox or Chrome you need some third party addons/extensions to apply it – I’m using Stylish in both and there I apply the script for all URLs in “plus.google.com” domain.
If you report a problem, I’ll do my best to try and solve it (if I’m able to duplicate it), but I can’t promise anything. I’m aware of some issues, but not sure if and when will they be resolved. I might add a no chat bar version later, but again, I’m not promising anything.
Anyway, enjoy (at least until Google changes everything again and things stop working 😉 )
