Monday, 19 November 2012

Tweaking the New Blogger Interface *Updated 19th November*

Update: 19th November We've just updated the Theme and CSS as Blogger changed a few things. We've also improved hopefully the colours as well as now making the action bar fixed in place as well.

Ever since Google/Blogger updated their User Interface it has been surrounded in controversy by users who either "Love it" and Users who "Hate it". Users are typically bemoaning the large amount of white space, bland colours, hard to read text etc.

Personally I'm somewhere in the middle.

However I do find some of the cosmetics pretty poor like other users inc white space, excessive padding, color scheme etc.

I decided rather than moaning about it to try and fix some of these myself and I'm pretty happy with the results so far.

Here is what my Dashboard looked like before my changes



Pretty Bland eh!

Now here is my new Dashboard.



Better? Well I think so.

Here is the old Compose Screen



Now here is my version.



Again, I think my version has a lot more character and it's easier to distinguish.

Other features that I've include are

- Better Colouring
- Improved Font Sizes
- Improved Line Spacing
- Fixed Left Hand Menu
- Improved New Blog Post screen
- Plus other minor tweaks

Ok, so by now if you're still reading then you'll probably asking yourself how can I fix my Blogger User Interface to look like this.

Well it's pretty easy. Simply follow these instructions.

1) You need to be using the Google Chrome browser. If you're not using Chrome then you should be. Go get it now here http://www.google.com/chrome

2) Now you need to install a very cool extension called "Sylebot".

You can get the extension here.

3) Once it's installed, goto my New Blogger Interface Style here

http://stylebot.me/styles/1726

4) On this screen simply click the Install Icon



And that's it. Now when you go to Compose Screen or your Post/Articles listing page you should see the new design. You can also tweak the colours and settings yourself if you play around with Stylebot. (See the Further Reading section below)

If you have any questions feel free to ask in the comments below.

Further Reading
Other Stylebot Themes
Stylebot Extension Page
About Stylebot (inc video and text walkthroughs

17 comments:

Amanda Kennedy said...

That's quite awesome! I personally don't mind the new interface but as I work on a small-screened netbook I'm sure your theme will save me scrolling up and down the page so much!

DarkUFO said...

Hey Amanda, glad you found it useful

Adam's Apples said...

Dark One, a palpable blow against Blogger's White Screen of Death!


I also suggest switching the font from Arial to Verdana or similar sceen font.


Arial is arguably more elegant but was designed for the printed page (based on Helvetica). It's much harder to read onscreen.


I have already made this change on my installation. I also:


* made always visible the hidden-unless-hover command links (edit, view, etc). No more easter-egg UI!


* since the above was a bit intense, I reverted back to the default color for these elements.


* made label-name links underline on hover.


These are less beneficial but still valuable to me.


Something else I mean to do, but do not remember how, is to limit the width of the main column to perhaps 600 px or so. It is way too wide on a large monitor and this would tighten things up.


Finally, I note the css is portable and can therefore, theoretically, be ported over to other browsers. I haven't tried this yet.


Dark UFO, thank you very much! The fixed left menu is especially beneficial.

DarkUFO said...

@twitter-346121573:disqus Hey Adam, nice one. Glad people are finding this useful and are able to tweak it for their own personal preference.



And yes, the CSS should be pretty portable for Firefox styling extensions etc.


I'm also working on a script to autoopen the Labels field as well as making the Post Title on edit/create an "autocomplete" field so previous post titles can be seen as you start typing.

DarkUFO said...

@twitter-346121573:disqus We've just updated the Theme and CSS as Blogger changed a few things. We've also improved hopefully the colours as well as now making the action bar fixed in place as well.

DarkUFO said...

@fe8ad9e673dcbf878a255ad32e495388:disqus We've just updated the Theme and CSS as Blogger changed a few things. We've also improved hopefully the colours as well as now making the action bar fixed in place as well.

Keir Heath said...

I fail to see how the old compose screen, using the entire page, is improved by now having the screen take up only half the page. You, whoever you are, like it. Great. EVERYONE is forced to use it.

DarkUFO said...

Use Stylebot to change the size to your liking.

Tee_rrance said...

Totally clean! What I hate is the ads all over my blog page, and once clicked, a lot of virus were automatically downloaded and means another visit for a computer repair in new york again.

joey said...

These are less beneficial but still valuable to me.
PT100

Michael Hazell said...

Wow...I forgot about Stylebot. I might use this to theme Disqus 2012 to what I want it to be. Could help me submit some ideas to Disqus.

DarkUFO said...

Hey @Michael Hazell Yep, I find it a great tool. Great for mocking up screen changes and basic CSS testing.

Michael Hazell said...

I also wanted to ask you something. I'm not sure if you have a bigger influence on Disqus than I do but I have begged Disqus to bring back the old theme that was recently gutted from Disqus 2012, as a separate theme because I liked that one better. They don't want to.


What do you think, and do you think they'll ever change their mind?

DarkUFO said...

HA, I don't think I have much sway. I've been asking them to make downvotes optional ever since they introduced it :)

I don't think they will bring the old theme to be honest.

Michael Hazell said...

I really wish they would bring the old theme back as an option. I liked the 3D look of the embed, and the cool looking 3D buttons. This theme is all about darkness to me. How does a dark post button fit in with a light website?


I thought you might have a bigger sway on Disqus than I do since I think you have an add ons package with them, but I could be wrong. One person I could ask who probably could do something is @fredwilson .

DarkUFO said...

Yep, fred certainly has more sway than me :)

replicas relogios said...

REPLICAS DE RELOGIOS.TV

Estamos com parceria com o google para indicar lojas de replicas de relogios, somos pioneiros no Brasil em replicas de relogios rolex, replicas de relogios tag heuer, todos nossos produtos são de alta qualidade, de origem italiana e suiça, nossas lojas de replicas...

RELOGIOS-SP

Visite nosso site de replicas de relógios sp somos os maiores vendedores do google todos produtos são classe AAA replicas de relógios rolex, replicas de relógios tag heuer, relogios sp, replicas de relogios sp, nos faça uma visita venha em uma de nossas lojas em sp...

REPLICAS DE RELOGIOS RJ

Em conjunto com o google temos diversas lojas de replica de relogios rj, replicas, replicas de relogios tag heuer, replicas de relogios famosos, replicas de relogios rolex, todos relogios a venda são produtos importados de altíssima qualidade diretamente da Itália e Estados Unidos, confiram nossos relógios importados, entre em contato peça catálogo ou visite nossos sites parceiros....