Metapost: The New-Old Blogger Interface

Today I have been blessed with an angelic choir of blog readers, all singing the beautiful and ineffable strains of CSS into my addled brain. The result: a miracle. We have managed to kind-of sort-of recreate the old Blogger interface, without all the awful horrible terrible no-good glaring white colors and no-information-processing-for-you-at-a-glance whitespace. We have gone from this:

To this:

Much better. Not as good as before Google started pissing all over a nice, functional interface, but at least it doesn't literally hurt me to look at it. (And there's a statement that this software engineer is oh-so-happy to be forced into saying. Like, really, this is my job, helping to document GUIs and sometimes even design them. Not so much right now, but in the past, yeah. And I'm not saying I'm smarter than the folks at Google, but fuck me sideways this is basic GUI interface 101: Thou Shalt Not Make Something That Hurts The Users. I mean, really. GAH. And now I'm side-tracked again.)

So now I am going to share with everyone else how to get precisely what I have above, and then follow with some suggestions on how to tweak to your liking. (And you won't have to learn CSS. Probably.)

But first!

The Credits
So much credit must go to the people who actually figured out how to make this work and then taught it to me.

Dark UFO for his starting stylesheet here, and for pointing me to StyleBot in the first place.
Loquat, for walking me through how to change things manually in the CSS.
Jess, for tweaking the starting code in order to add much-needed borders and awesomeness.
Update: TiredPhilantropist, for working out a way to apply the Chrome fix to Firefox Stylish.

The Code
1. Install Google Chrome browser. 
You will need Google Chrome for this, because the plugin that makes all this possible is currently only supported there. I know, I know, we're not happy with Google right now, but what can you do.
Here is a download link.
(Update: There is now a way to do this in Firefox with the Stylish plugin thanks to TiredPhilantropist. See the bottom portion of the post for Firefox instructions.)

2. Install StyleBot plugin.
You will need the StyleBot plugin by Ankit Ahuja. While you're at it, why not donate to the StyleBot pledge or leave an affirming comment to let the programmer(s) know that StyleBot is rockstar? The Chrome browser is almost certainly going to continue being updated, and the StyleBot plugin will probably have to be updated with each iteration.
Here is a download link (which you must visit via your Chrome browser). 

3. Go to your Blogger posts page and press the new CSS button in the address bar.
Once StyleBot is installed and Chrome has restarted, you should have a swiffy little "css" button in the right-hand side of your address bar. Head to your blogger posts page and press the button.

The CSS button is on the right.

4. Press the Edit CSS button in the StyleBot popup. 
When you press the CSS button in your address bar, the StyleBot popup menu should show up on the right side of your page. We'll talk about how to use this later, for now, just press the "Edit CSS" button at the bottom.

5. Copy-and-paste the following code.
Slap this into the StyleBot window.

#post-labels {
    font-size: 10px;
    width: 860px;
}

#richbars {
    width: 888px;
}

#templateText {
    height: 444px;
    width: 999px;
}

#textarea {
    height: 362px;
    width: 962px;
}

.GM1BAGKBJO {
    padding: 0px 0px;
}

.GM1BAGKBLEB {
    color: #222;
    padding: 0px 5px;
}

.GM1BAGKBM5B {
    margin-left: -40px;
}

.GM1BAGKBO2B {
    display: inline ;
}

.blogg-posttable tr .GM1BAGKBOB {
    display: none;
}

.blogg-visible-on-select a {
    color: #000000;
}

.editor .htmlBox, .editor .composeBox {
    max-width: 900px;
}

a.GM1BAGKBEHB.editPosts {
    width: 80px;
}

div.GM1BAGKBAAB {
    background-color: #ffffff;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-width: 1px;
    border-style: solid;
    font-size: 11px;
    line-height: 3px;
    padding-bottom: 0;
    padding-left: 20px;
    padding-right: 0;
    padding-top: 5px;
    width: 110px;
}

div.GM1BAGKBCBB {
    background-color: #999999;
}

div.GM1BAGKBDAB {
    background-color: #999999;
    border-color: #000000;
}

div.GM1BAGKBEAB {
    padding: 0;
}

div.GM1BAGKBH5 {
    background-color: #999999;
}

div.GM1BAGKBO5 {
    padding: 0;
}

div.htmlBoxWrapper {
    background-color: #999999;
}

div.labels-round-box {
    font-size: 10px;
    width: 190px;
}

div.postsTable {
    font-size: 10px;
}

h1 {
    font-size: 16px;
}

input.GM1BAGKBMEC.titleField.textField.GM1BAGKBLEC {
    width: 600px;
}

input.GM1BAGKBNEC.titleField.textField.GM1BAGKBMEC {
    border-color: #000000;
}

input.text {
    width: 500px;
}

span.GM1BAGKBESB {
    color: red;
}

span.GM1BAGKBKGB {
    font-size: 12px;
    line-height: 10px;
    width: 100px;
}

textarea.htmlBox {
    height: 400px;
    width: 900px;
}

div.optionHolder {
    background-color: #f0f0f0;
    border-style: solid;
    border-color: #000000;
}

td.GM1BAGKBBO.GM1BAGKBDO.GM1BAGKBEO.GM1BAGKBKO div input {
    border-style: solid;
}

a.GM1BAGKBMGB.editPosts.selected {
    margin-left: 45px;
    width: 85px;
}

/* KNOWN CODE */

/* Font Size */

li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    font-size: 12px;
}

/* Options for upper B Button */

a.blogg-button.blogg-primary {
    margin-left: 20px;
}

div.GM1BAGKBKAB {
    background-color: #999999;
}

div.GM1BAGKBL5 {
    background-color: #999999;
}

/* Options for New Post Buttons */

div.GM1BAGKBI5 div {
    margin-left: -10px;
}

span.GM1BAGKBCGB {
    width: 115px;
    margin-left: 20px;
}

div.GM1BAGKBI5 {
    border-color: #000000;
    border-width: 1px;
    background-color: #ffffff;
    width: 140px;
    border-style: solid;
}

/* Options for Posts Buttons */

span.GM1BAGKBNGB {
    width: 108px;
    font-size: 10px;
}

a.GM1BAGKBMGB.editPosts {
    width: 85px;
    margin-left: 45px;
}

/* Background behind Posts lines */

div.GM1BAGKBG5 {
    background-color: #999999;
}

/* Options for Posts lines */

.blogg-posttable {
    margin-left: -20px;
}

tr {
    background-color: #ffffff;
}

/* Border for Posts lines */

table {
    border: 1px solid #000000;
}

/* Width of Posts lines */

.blogg-posttable .blogg-visible-on-select {
    color: #000000;
    margin-top: 0px;
    padding-bottom: 2px;
}

td {
    border-color: #000000;
    padding: 2px;
}

/* Options for Edit / Delete */

div.blogg-visible-on-select {
    font-size: 0;
}

/* Options for Post labels */

a.GM1BAGKBLB {
    color: black;
    font-size: 8px;
}

/* Options for Draft / Schedule */

span.GM1BAGKBNRB {
    font-size: 8px;
}

/* Options for Settings Page */

div.GM1BAGKBCK.blogg-title {
    background-color: #ffffff;
    border-style: solid;
    border-color: #000000;
    border-top-width: 1px;
    border-left-width: 1px;
    border-right-width: 1px;
}

div.GFUQPS5BH5 {
    border-color: #000000;
    border-width: 1px;
    background-color: #ffffff;
    width: 140px;
    border-style: solid;
}

div.GFUQPS5BF5 {
    background-color: #999999;
}

div.GFUQPS5BK5 {
    background-color: #999999;
}

td.GFUQPS5BBO {
    background-color: #ffffff;
    border-style: solid;
    border-color: #000000;
    padding-bottom: 1px;
    padding-top: 1px;
}

div.GFUQPS5BJAB {
    background-color: #999999;
}

a.GFUQPS5BLB {
font-size: 8px;
}

6. Hit Save. 
Hit the "save" button at the bottom of the window.

That's all.


The Tinkering
So, hey, what if you really like some/most of the above but you really hate the gray background on the Post Setting form? How do you fix THAT without starting from scratch? Well, now I'll show you how to use StyleBot to do really simple stuff without mucking in the CSS. For the sake of our numbered format, I'll just use the gray background on the Post Settings as an example.

1. Go to the page you want to modify. 
Since we're wanting to change something on the post composition page, open up a new post.

2. Hit the CSS button. 
You know the drill, so I'll just reuse the picture above here.

3. Move the StyleBot window as needed. 
Since the element we want to change is on the right, we need to move the StyleBot window out of the way. Press the little arrow button to toggle whether it lands on the left or right side of the browser.

4. Select the element that needs changing. 
See that blue button in the picture above? The one that has a box and a cursor in it? Whenever that button is toggled to blue, you're in StyleBox selection mode. Whatever page element you select, you will be able to modify. (If you want to deselect an element, just press the selection button again.)

You can see what you're about to select because there's a green box that borders whatever page element you're currently hovering over with your cursor. Select the Post Settings area by bringing your cursor down to the white space under "Advertise Products".

5. Make the changes in the StyleBot window. 
Now that we've selected the element, the information for that element will fill out automatically in the StyleBot window. Whatever you change in this window will affect that page element only. (There's an Undo button at the bottom of the window, so keep that in mind if something goes wrong.) We wanted to change the background color, so we'll do that now.

Once you've made a change, it's saved for you so you don't need to do anything special to save. (And, again, remember the awesome "Undo" button at the bottom of the window.)

6. Backup your code. 
Go into the "Edit CSS" button, select all (Ctrl+A), copy (Ctrl+C), and paste everything (Ctrl+V) into a text file somewhere on your computer for safety's sake. I say this for two reasons. One, it's a good idea to backup stuff, period. Two, and more pertinently, if you have Blogger open across multiple tabs, your edits in StyleBox may clobber each other and you may lose something. That happened to me while writing this tutorial. If that happens to you, don't panic: just close all Blogger tabs except one, open StyleBot, hit Edit CSS, and paste in the code you saved off. Simple and easy.


The Conclusion
First and foremost, I would like to register my annoyance with Google. This new interface is fundamentally broken in obvious, stupid, how-did-this-pass-QA ways. For example, the fact that adding a link or an image in the post dumps you back out to the top of the post, which means I had to Page Down about eighteen times while writing this tutorial. For anther example, the text editor randomly changes sizes during composition, and I can only reset back to normal by maximizing and then windowing my browser again. WHAT IS THIS I DON'T EVEN. But beyond the brokenness, it's also an interface that is deeply damaging to people with visual disorders (all the white colors) and information processing disorders (the floating lack of lines and all the excessive whitespace). This interface literally hurts people and when folks registered this fact with Google, the response was crickets. And, you know, pushing the hurtful interface to every one of their users without even the courtesy of a warning email. So, you know, thanks.

Second and paramount, I want to express my deepest and undying gratitude to everyone who helped me through this time. Some of you gave hugs, some of you offered help with my initial plan to move to WordPress, and some of you dived into the CSS waters and brought back programming pearls which you shared freely and kindly to me. You are all wonderful, and I cannot thank you enough. Thank you, thank you, thank you. Times infinity. You made what was initially a horrible, depersonifying experience of having my safe space literally hurt me into a wonderful affirmation that there are good people in the world and that they care about me, just because they are so awesome and nice. I cannot express how deeply your kindness touches me. Thank you.

Third and ultimately, feel free to share this post with anyone and everyone who is struggling with the new Blogger interface. Questions are welcome here in the comments, or via email. (Though I disclaim here any hope of answering specific CSS questions. Post those in the comments and we'll see if someone here has the answer.) And if you can, I do recommend giving StyleBot an encouraging comment at the bottom of the Pledgie page. My own husband is a freeware programmer (though also not conversant in CSS) and it means everything to him when he knows people are using his stuff.

Thank you. Normal posting will resume Monday.

Update: DarkUFO has also pointed me to this tutorial which will also help folks learning the ins and outs of StyleBot. Enjoy!

---

The Firefox Alternative
Update: There is now a way to do this in Firefox with the Stylish plugin thanks to TiredPhilantropist.

Step 1: Download Stylish and restart Firefox.
Here is a download link (which you must visit via your Firefox browser).

Step 2: Go to your Blogger posts page and select Write New Style For Blogger.com.
The Stylish button is at the bottom left corner of your browser.

3. Copy-and-paste the following code.
You'll need to give the new style a Name: I just call mine "Blogger Interface". Then select all the pre-set code in the new style window (Ctrl+A), and paste in this code instead (Ctrl+V).

@-moz-document domain(blogger.com) {

#post-labels {
    font-size: 10px !important;
    width: 860px !important;
}

#richbars {
    width: 888px !important;
}

#templateText {
    height: 444px !important;
    width: 999px !important;
}

#textarea {
    height: 362px !important;
    width: 962px !important;
}

.GM1BAGKBJO {
    padding: 0px 0px !important;
}

.GM1BAGKBLEB {
    color: #222 !important;
    padding: 0px 5px !important;
}

.GM1BAGKBM5B {
    margin-left: -40px !important;
}

.GM1BAGKBO2B {
    display: inline  !important;
}

.blogg-posttable tr .GM1BAGKBOB {
    display: none !important;
}

.blogg-visible-on-select a {
    color: #000000 !important;
}

.editor .htmlBox, .editor .composeBox {
    max-width: 900px !important;
}

a.GM1BAGKBEHB.editPosts {
    width: 80px !important;
}

div.GM1BAGKBAAB {
    background-color: #ffffff !important;
    border-bottom-width: 1px !important;
    border-left-width: 1px !important;
    border-right-width: 1px !important;
    border-style: solid !important;
    font-size: 11px !important;
    line-height: 3px !important;
    padding-bottom: 0 !important;
    padding-left: 20px !important;
    padding-right: 0 !important;
    padding-top: 5px !important;
    width: 110px !important;
}

div.GM1BAGKBCBB {
    background-color: #999999 !important;
}

div.GM1BAGKBDAB {
    background-color: #999999 !important;
    border-color: #000000 !important;
}

div.GM1BAGKBEAB {
    padding: 0 !important;
}

div.GM1BAGKBH5 {
    background-color: #999999 !important;
}

div.GM1BAGKBO5 {
    padding: 0 !important;
}

div.htmlBoxWrapper {
    background-color: #999999 !important;
}

div.labels-round-box {
    font-size: 10px !important;
    width: 190px !important;
}

div.postsTable {
    font-size: 10px !important;
}

h1 {
    font-size: 16px !important;
}

input.GM1BAGKBMEC.titleField.textField.GM1BAGKBLEC {
    width: 600px !important;
}

input.GM1BAGKBNEC.titleField.textField.GM1BAGKBMEC {
    border-color: #000000 !important;
}

input.text {
    width: 500px !important;
}

span.GM1BAGKBESB {
    color: red !important;
}

span.GM1BAGKBKGB {
    font-size: 12px !important;
    line-height: 10px !important;
    width: 100px !important;
}

textarea.htmlBox {
    height: 400px !important;
    width: 900px !important;
}

div.optionHolder {
    background-color: #f0f0f0 !important;
    border-style: solid !important;
    border-color: #000000 !important;
}

td.GM1BAGKBBO.GM1BAGKBDO.GM1BAGKBEO.GM1BAGKBKO div input {
    border-style: solid !important;
}

a.GM1BAGKBMGB.editPosts.selected {
    margin-left: 45px !important;
    width: 85px !important;
}

/* KNOWN CODE */

/* Font Size */

li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    font-size: 12px !important;
}

/* Options for upper B Button */

a.blogg-button.blogg-primary {
    margin-left: 20px !important;
}

div.GM1BAGKBKAB {
    background-color: #999999 !important;
}

div.GM1BAGKBL5 {
    background-color: #999999 !important;
}

/* Options for New Post Buttons */

div.GM1BAGKBI5 div {
    margin-left: -10px !important;
}

span.GM1BAGKBCGB {
    width: 115px !important;
    margin-left: 20px !important;
}

div.GM1BAGKBI5 {
    border-color: #000000 !important;
    border-width: 1px !important;
    background-color: #ffffff !important;
    width: 140px !important;
    border-style: solid !important;
}

/* Options for Posts Buttons */

span.GM1BAGKBNGB {
    width: 108px !important;
    font-size: 10px !important;
}

a.GM1BAGKBMGB.editPosts {
    width: 85px !important;
    margin-left: 45px !important;
}

/* Background behind Posts lines */

div.GM1BAGKBG5 {
    background-color: #999999 !important;
}

/* Options for Posts lines */

.blogg-posttable {
    margin-left: -20px !important;
}

tr {
    background-color: #ffffff !important;
}

/* Border for Posts lines */

table {
    border: 1px solid #000000 !important;
}

/* Width of Posts lines */

.blogg-posttable .blogg-visible-on-select {
    color: #000000 !important;
    margin-top: 0px !important;
    padding-bottom: 2px !important;
}

td {
    border-color: #000000 !important;
    padding: 2px !important;
}

/* Options for Edit / Delete */

div.blogg-visible-on-select {
    font-size: 0 !important;
}

/* Options for Post labels */

a.GM1BAGKBLB {
    color: black !important;
    font-size: 8px !important;
}

/* Options for Draft / Schedule */

span.GM1BAGKBNRB {
    font-size: 8px !important;
}

/* Options for Settings Page */

div.GM1BAGKBCK.blogg-title {
    background-color: #ffffff !important;
    border-style: solid !important;
    border-color: #000000 !important;
    border-top-width: 1px !important;
    border-left-width: 1px !important;
    border-right-width: 1px !important;
}

div.GFUQPS5BH5 {
    border-color: #000000 !important;
    border-width: 1px !important;
    background-color: #ffffff !important;
    width: 140px !important;
    border-style: solid !important;
}

div.GFUQPS5BF5 {
    background-color: #999999 !important;
}

div.GFUQPS5BK5 {
    background-color: #999999 !important;
}

td.GFUQPS5BBO {
    background-color: #ffffff !important;
    border-style: solid !important;
    border-color: #000000 !important;
    padding-bottom: 1px !important;
    padding-top: 1px !important;
}

div.GFUQPS5BJAB {
    background-color: #999999 !important;
}    @-moz-document domain(blogger.com) {

#post-labels {
    font-size: 10px !important;
    width: 860px !important;
}

#richbars {
    width: 888px !important;
}

#templateText {
    height: 444px !important;
    width: 999px !important;
}

#textarea {
    height: 362px !important;
    width: 962px !important;
}

.GM1BAGKBJO {
    padding: 0px 0px !important;
}

.GM1BAGKBLEB {
    color: #222 !important;
    padding: 0px 5px !important;
}

.GM1BAGKBM5B {
    margin-left: -40px !important;
}

.GM1BAGKBO2B {
    display: inline  !important;
}

.blogg-posttable tr .GM1BAGKBOB {
    display: none !important;
}

.blogg-visible-on-select a {
    color: #000000 !important;
}

.editor .htmlBox, .editor .composeBox {
    max-width: 900px !important;
}

a.GM1BAGKBEHB.editPosts {
    width: 80px !important;
}

div.GM1BAGKBAAB {
    background-color: #ffffff !important;
    border-bottom-width: 1px !important;
    border-left-width: 1px !important;
    border-right-width: 1px !important;
    border-style: solid !important;
    font-size: 11px !important;
    line-height: 3px !important;
    padding-bottom: 0 !important;
    padding-left: 20px !important;
    padding-right: 0 !important;
    padding-top: 5px !important;
    width: 110px !important;
}

div.GM1BAGKBCBB {
    background-color: #999999 !important;
}

div.GM1BAGKBDAB {
    background-color: #999999 !important;
    border-color: #000000 !important;
}

div.GM1BAGKBEAB {
    padding: 0 !important;
}

div.GM1BAGKBH5 {
    background-color: #999999 !important;
}

div.GM1BAGKBO5 {
    padding: 0 !important;
}

div.htmlBoxWrapper {
    background-color: #999999 !important;
}

div.labels-round-box {
    font-size: 10px !important;
    width: 190px !important;
}

div.postsTable {
    font-size: 10px !important;
}

h1 {
    font-size: 16px !important;
}

input.GM1BAGKBMEC.titleField.textField.GM1BAGKBLEC {
    width: 600px !important;
}

input.GM1BAGKBNEC.titleField.textField.GM1BAGKBMEC {
    border-color: #000000 !important;
}

input.text {
    width: 500px !important;
}

span.GM1BAGKBESB {
    color: red !important;
}

span.GM1BAGKBKGB {
    font-size: 12px !important;
    line-height: 10px !important;
    width: 100px !important;
}

textarea.htmlBox {
    height: 400px !important;
    width: 900px !important;
}

div.optionHolder {
    background-color: #f0f0f0 !important;
    border-style: solid !important;
    border-color: #000000 !important;
}

td.GM1BAGKBBO.GM1BAGKBDO.GM1BAGKBEO.GM1BAGKBKO div input {
    border-style: solid !important;
}

a.GM1BAGKBMGB.editPosts.selected {
    margin-left: 45px !important;
    width: 85px !important;
}

/* KNOWN CODE */

/* Font Size */

li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    font-size: 12px !important;
}

/* Options for upper B Button */

a.blogg-button.blogg-primary {
    margin-left: 20px !important;
}

div.GM1BAGKBKAB {
    background-color: #999999 !important;
}

div.GM1BAGKBL5 {
    background-color: #999999 !important;
}

/* Options for New Post Buttons */

div.GM1BAGKBI5 div {
    margin-left: -10px !important;
}

span.GM1BAGKBCGB {
    width: 115px !important;
    margin-left: 20px !important;
}

div.GM1BAGKBI5 {
    border-color: #000000 !important;
    border-width: 1px !important;
    background-color: #ffffff !important;
    width: 140px !important;
    border-style: solid !important;
}

/* Options for Posts Buttons */

span.GM1BAGKBNGB {
    width: 108px !important;
    font-size: 10px !important;
}

a.GM1BAGKBMGB.editPosts {
    width: 85px !important;
    margin-left: 45px !important;
}

/* Background behind Posts lines */

div.GM1BAGKBG5 {
    background-color: #999999 !important;
}

/* Options for Posts lines */

.blogg-posttable {
    margin-left: -20px !important;
}

tr {
    background-color: #ffffff !important;
}

/* Border for Posts lines */

table {
    border: 1px solid #000000 !important;
}

/* Width of Posts lines */

.blogg-posttable .blogg-visible-on-select {
    color: #000000 !important;
    margin-top: 0px !important;
    padding-bottom: 2px !important;
}

td {
    border-color: #000000 !important;
    padding: 2px !important;
}

/* Options for Edit / Delete */

div.blogg-visible-on-select {
    font-size: 0 !important;
}

/* Options for Post labels */

a.GM1BAGKBLB {
    color: black !important;
    font-size: 8px !important;
}

/* Options for Draft / Schedule */

span.GM1BAGKBNRB {
    font-size: 8px !important;
}

/* Options for Settings Page */

div.GM1BAGKBCK.blogg-title {
    background-color: #ffffff !important;
    border-style: solid !important;
    border-color: #000000 !important;
    border-top-width: 1px !important;
    border-left-width: 1px !important;
    border-right-width: 1px !important;
}

div.GFUQPS5BH5 {
    border-color: #000000 !important;
    border-width: 1px !important;
    background-color: #ffffff !important;
    width: 140px !important;
    border-style: solid !important;
}

div.GFUQPS5BF5 {
    background-color: #999999 !important;
}

div.GFUQPS5BK5 {
    background-color: #999999 !important;
}

td.GFUQPS5BBO {
    background-color: #ffffff !important;
    border-style: solid !important;
    border-color: #000000 !important;
    padding-bottom: 1px !important;
    padding-top: 1px !important;
}

div.GFUQPS5BJAB {
    background-color: #999999 !important;
}
    }

#post-labels {
    font-size: 10px !important;
    width: 860px !important;
}

#richbars {
    width: 888px !important;
}

#templateText {
    height: 444px !important;
    width: 999px !important;
}

#textarea {
    height: 362px !important;
    width: 962px !important;
}

.GM1BAGKBJO {
    padding: 0px 0px !important;
}

.GM1BAGKBLEB {
    color: #222 !important;
    padding: 0px 5px !important;
}

.GM1BAGKBM5B {
    margin-left: -40px !important;
}

.GM1BAGKBO2B {
    display: inline  !important;
}

.blogg-posttable tr .GM1BAGKBOB {
    display: none !important;
}

.blogg-visible-on-select a {
    color: #000000 !important;
}

.editor .htmlBox, .editor .composeBox {
    max-width: 900px !important;
}

a.GM1BAGKBEHB.editPosts {
    width: 80px !important;
}

div.GM1BAGKBAAB {
    background-color: #ffffff !important;
    border-bottom-width: 1px !important;
    border-left-width: 1px !important;
    border-right-width: 1px !important;
    border-style: solid !important;
    font-size: 11px !important;
    line-height: 3px !important;
    padding-bottom: 0 !important;
    padding-left: 20px !important;
    padding-right: 0 !important;
    padding-top: 5px !important;
    width: 110px !important;
}

div.GM1BAGKBCBB {
    background-color: #999999 !important;
}

div.GM1BAGKBDAB {
    background-color: #999999 !important;
    border-color: #000000 !important;
}

div.GM1BAGKBEAB {
    padding: 0 !important;
}

div.GM1BAGKBH5 {
    background-color: #999999 !important;
}

div.GM1BAGKBO5 {
    padding: 0 !important;
}

div.htmlBoxWrapper {
    background-color: #999999 !important;
}

div.labels-round-box {
    font-size: 10px !important;
    width: 190px !important;
}

div.postsTable {
    font-size: 10px !important;
}

h1 {
    font-size: 16px !important;
}

input.GM1BAGKBMEC.titleField.textField.GM1BAGKBLEC {
    width: 600px !important;
}

input.GM1BAGKBNEC.titleField.textField.GM1BAGKBMEC {
    border-color: #000000 !important;
}

input.text {
    width: 500px !important;
}

span.GM1BAGKBESB {
    color: red !important;
}

span.GM1BAGKBKGB {
    font-size: 12px !important;
    line-height: 10px !important;
    width: 100px !important;
}

textarea.htmlBox {
    height: 400px !important;
    width: 900px !important;
}

div.optionHolder {
    background-color: #f0f0f0 !important;
    border-style: solid !important;
    border-color: #000000 !important;
}

td.GM1BAGKBBO.GM1BAGKBDO.GM1BAGKBEO.GM1BAGKBKO div input {
    border-style: solid !important;
}

a.GM1BAGKBMGB.editPosts.selected {
    margin-left: 45px !important;
    width: 85px !important;
}

/* KNOWN CODE */

/* Font Size */

li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    font-size: 12px !important;
}

/* Options for upper B Button */

a.blogg-button.blogg-primary {
    margin-left: 20px !important;
}

div.GM1BAGKBKAB {
    background-color: #999999 !important;
}

div.GM1BAGKBL5 {
    background-color: #999999 !important;
}

/* Options for New Post Buttons */

div.GM1BAGKBI5 div {
    margin-left: -10px !important;
}

span.GM1BAGKBCGB {
    width: 115px !important;
    margin-left: 20px !important;
}

div.GM1BAGKBI5 {
    border-color: #000000 !important;
    border-width: 1px !important;
    background-color: #ffffff !important;
    width: 140px !important;
    border-style: solid !important;
}

/* Options for Posts Buttons */

span.GM1BAGKBNGB {
    width: 108px !important;
    font-size: 10px !important;
}

a.GM1BAGKBMGB.editPosts {
    width: 85px !important;
    margin-left: 45px !important;
}

/* Background behind Posts lines */

div.GM1BAGKBG5 {
    background-color: #999999 !important;
}

/* Options for Posts lines */

.blogg-posttable {
    margin-left: -20px !important;
}

tr {
    background-color: #ffffff !important;
}

/* Border for Posts lines */

table {
    border: 1px solid #000000 !important;
}

/* Width of Posts lines */

.blogg-posttable .blogg-visible-on-select {
    color: #000000 !important;
    margin-top: 0px !important;
    padding-bottom: 2px !important;
}

td {
    border-color: #000000 !important;
    padding: 2px !important;
}

/* Options for Edit / Delete */

div.blogg-visible-on-select {
    font-size: 0 !important;
}

/* Options for Post labels */

a.GM1BAGKBLB {
    color: black !important;
    font-size: 8px !important;
}

/* Options for Draft / Schedule */

span.GM1BAGKBNRB {
    font-size: 8px !important;
}

/* Options for Settings Page */

div.GM1BAGKBCK.blogg-title {
    background-color: #ffffff !important;
    border-style: solid !important;
    border-color: #000000 !important;
    border-top-width: 1px !important;
    border-left-width: 1px !important;
    border-right-width: 1px !important;
}

div.GFUQPS5BH5 {
    border-color: #000000 !important;
    border-width: 1px !important;
    background-color: #ffffff !important;
    width: 140px !important;
    border-style: solid !important;
}

div.GFUQPS5BF5 {
    background-color: #999999 !important;
}

div.GFUQPS5BK5 {
    background-color: #999999 !important;
}

td.GFUQPS5BBO {
    background-color: #ffffff !important;
    border-style: solid !important;
    border-color: #000000 !important;
    padding-bottom: 1px !important;
    padding-top: 1px !important;
}

div.GFUQPS5BJAB {
    background-color: #999999 !important;
}


a.GFUQPS5BLB {
font-size: 8px !important;
}
}

Before and after pics:

4. Save the style and enjoy.