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.

40 comments:

Evan said...

Horray! I'm glad you're able to keep blogging without being hurt!

(And the titles of the draft posts I can see in that screenshot look very interesting; I'll be looking forward to them!)

Ana Mardoll said...

Ha, yeah, I thought about editing them out, but then I was like "eh, they'll see 'em sooner or later".

This is such a weight off my shoulders. I think I am now going to go sleep for 12 hours. That feeling when everything is "unexpectedly all better"? That feeling makes it ALMOST worth everything falling apart.

Thank you again, everyone, and especially Jess and Loquat.

depizan said...

Awesome! I'm so glad you found a way to make it work again (and that people pitched in to help), and sharing it for all the other people who're struggling is wonderful.

Shame on Google for breaking it in the first place, but yay for Jess, Loquat, and everybody else who helped!

Brin Bellway said...

*cheers*

Evan: (And the titles of the draft posts I can see in that screenshot look very interesting; I'll be looking forward to them!)

I was thinking that too.

EdinburghEye said...

Hooray! I am so glad.

bekabot said...

I haven't said this before so I'm going to say it now, and I hope it doesn't come across as snotty:

You could write your blog in crayon on scraps of brown bag paper and send it off attached to the feet of pigeons, and if I could get it that way, I'd still read it. (And enjoy it.)

However, since I've got a big book collection which is made up of specific books with specific covers published at specific dates in specific editions, I know how it is to want to maintain a thing in a certain way if you're going to maintain it at all. So I'm super happy you prevailed.

Jenna Moran said...

Yay! That's beautiful. (People helping you so effectively so quickly, and you being back, I mean.) ^_^

Ana Mardoll said...

I was thinking more trained cats. But I suppose some people have allergies. :)

Jess said...

Yaaaay! So glad things are better and I'm glad I could help! I mean, it's really all about me: if you can't blog, I can't read what you write, after all. I hope you get some rest and I look forward to future posts!

Thomas Keyton said...

Huzzah!

Ana Mardoll said...

Ha, I like your brand of "selfish", Jess. ;)

Loquat said...

I'm glad to have been introduced to Stylebot - I just spent the last several minutes converting both my Gmail and The Artist Formerly Known As Google Docs from "field of white with occasional bits of text" to something that looks like it's been attacked by Piet Mondrian.

Also - yes, I did make a Blogger account for myself to put together CSS code for Ana; no, there's nothing there yet except a few content-free test posts to populate my dashboard. (Quick, someone nag me to finish my ghost story or my mermaid story or my long-delayed essay on how Nick Kristof's Darfur Puppy illustrates what's wrong with the Watchmen movie!)

Nina said...

I'm so glad you found a way to fix it, Ana! I hope you don't mind that I linked this post on Shakesville's open thread. I know people over there have been having the same issues.

Tigerpetals said...

Oh, some people did help you! Thanks Dark UFO, Loquat, and Jess! And thank you Ana, for writing this blog in the first place and working so hard to keep it up!

Asha said...

*hugs kind helpers, cheers and bounces up and down* Thank you thank you thank you happy dance!

JonathanPelikan said...

"Not as good as before Google started pissing all over a nice, functional interface,"

I love our Googlistic overlords like 80 percent of the time but I swear to the Gods their corporate slogan should be "fucking with things that don't need it and sometimes even making stuff worse since 19xx'. See: Youtube.

In any case, really glad to hear things are better, Ana.

depizan said...

Nag nag nag.

No seriously, those sound interesting, especially the last (mostly because it's most detailed).

Silver Adept said...

Excellent work! And now that there's a code bit to be had, people using Stylish for either Chrome or Firefox should be able to take that code and apply it as a permanent alteration to the interface. (Maybe I'm reading it wrong, but it looks like the plugin being used right now only temporarily changes and you'll have to do it all again the next time you load the page or restart the browser.)

Hooray for Loquat and Jess for saving the spoons and physical exertion of everyone attacked by the new interface.

redcrow said...

Yay! So glad it turned out not to be unfixable!

Also, thank you, all the people who helped Ana.

Isator Levi said...

Praise Jebus!

Ymfon Tviergh said...

"Google: forcing our customers to do our work for us since 19XX"

Ymfon Tviergh said...

Congratulations!

jill heather said...

I'm so happy you found something that works for you.

TiredPhilanthropist said...

Now that we have the CSS code, Firefox users can use it too, via the "Stylish" extension (which also exists for Chrome). Sadly, it does not offer a nice interface for tweaking the style afterwards (but you could always do the tinkering with StyleBot, and then paste the result into Firefox/Stylish.

Here is a quick run-down how to install Ana's style in Firefox:

Install the Stylish extension, by klicking on this link and there click the "Add to Firefox" button.
Firefox may need to restart afterwards

In the menu, go to Tools->Add-ons. A new tab opens, showing extension settings. In the menu on the left, there is a new Entry "User Styles" (seen at the very bottom of the first image). Click on this menu entry.
In the main area to the right, a button will appear, with the text "Write new style". Click this button.
A dialog opens. "Name and "Tags" are arbitrary. Leave the select field on its default setting ("Insert") and
enter/paste the following into the Text field below:
@-moz-document url(blogger.com) {
/* Paste Ana's code from above here. */
}
The dialog now looks like the second image below.
Click "Save".


And you are done. Next time you visit the blogger interface, it will look as in Ana's screenshot.

Things are slightly different in the Chrome version of Stylish, but I'd thought I explain the Firefox version, as Chrome users probably want to use the StyleBot method that Ana explains in the main post.

(Ana: Would it be okay if I posted the style on userstyles.org? Or do you want to do that? The advantage is that then, Stylish users can install the style with a simple click on an "Add with Stylish" button, much like extensions are installed.)

Ana Mardoll said...

Oh-oh-oh. I want to make this work because I MUCH prefer Firefox to Chrome. But I'm only getting partial changes; the whitespace in particular is still an issue. See?

But, yes, by all means once we get it working, please post to Stylish.

TiredPhilanthropist said...

Arg. I made a mistake (that is what you get if you delete everything to create from scratch when writing the explanation:

The first line needs to be:


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


(I'll fix this in the comment above.)

Ana Mardoll said...

Yeah, I had that already because I just went to the page and did the "create Stylish for this page" option. It seems to only be taking about half of the code.

TiredPhilanthropist said...

I think I have identified the problem: Stylish seems to apply the CSS by a different method than StyleBot. The result is that some of Google/Blogger's settings "win out" over the Stylish rules in Stylish (in StyleBot, they are applied in such a way that they usually "win").

This is fixable, but I'll need some time to figure out which rules to prioritize.

TiredPhilanthropist said...

Ok, here is something that works properly in Firefox/Stylish (I think), even though what I have done is probably overkill.

The code is the same as Ana's, except that I added an "!important" at the end of each and every rule. Probably, one only needs to do this for some of them, but this works.

If anyone knows CSS better than me and has a cleaner/nicer solution, pleas post!


@-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 {
margin-left: -20px !important;
}

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

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

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

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

/*.editor .titleField {
width: 600px;
}*/

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

a.GM1BAGKBLB {
color: black !important;
font-size: 8px !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: 120px !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.GM1BAGKBI5 {
border-color: #000000 !important;
border-width: 1px !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;
}

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

span.GM1BAGKBESB {
color: red !important;
font-size: 10px !important;
}

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

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

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

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

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

div.GM1BAGKBO5 {
padding: 0 !important;
}

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

span.GM1BAGKBFHB {
font-size: 10px !important;
}

a.GM1BAGKBPB {
font-size: 12px !important;
}
}


This probably throws a wrench into the "Tinker in Chrome and then paste into Firefox" idea, but at least you can apply the style as is.

I'll wait with posting this at the Stylish site to see if anyone else has a better idea to fix the precedence issue ...

Ana Mardoll said...

IT WORKS! It works, it works, it works.

THANK YOU THANK YOU THANK YOU. There are a lot of advantages to Firefox over Chrome when blogging (not the least because Firefox retains ones place in the Disqus viewing better) so this is a big deal for me. Thank you.

Isator Levi said...

"IT WORKS! It works, it works, it works."

Quick!

Throw your hands up, cackle maniacally, and will there to be lightning.

I'm about forfty percent sure that that works.

Ana Mardoll said...

Post updated with the instructions that we have here.

Silver Adept said...

@Isator Levi - more than forty percent on something like that for me. I also find that if one can appropriately mix in something to the effect of, "Behold! The power of SCIENCE!" then the lightning is almost guaranteed.

Also, many thanks, TiredPhilanthropist, for pouring it to the Stylish plug-in. I think a lot of purple are going to be quite pleased with that and will willingly fight to reclaim their Blogger interface.

chris the cynic said...

At the moment I have a couple of pages of the old blogger interface open, and interestingly enough, they work or at least the one that I can check without risking losing everything does.

I was sort of surprised to find that when this computer came out hibernation.

So, the stats page, which I can refresh the information on without refreshing the page, is still working. It will get info from after the old interface was shut down. Now if I try to open it in a new tab, or save it, or look at the source, or anything like that, I get the, "Sorry, old blogger interface is gone," page. But if I stay on the already loaded page I can do everything I could do before. Which is, basically, look at stats. Any attempt to go to a different page requires loading said page which sends me straight to, "Sorry, no interface here, check the new one."

I know nothing of computers, but I'm guessing what's happening is that the browser has the page stored in memory, when it asks for updated information what it's getting is the same stuff the new interface would get thus the information is still available, but it's filtered through the page stored in memory.

Which leads me to a question, is there a way to save the instance of a page that I have open right now? If I try to save the page it sends a request for information and gets the, "No page here" page instead of what I'm seeing. Because the only way I know of to keep what I'm seeing from going away is to never close that tab again, which is sort of unfeasible since it would require me to never close my browser or restart my computer again. And yet, as long as it stays open I can, apparently, use it. Which is neat.

At least I think it's neat.

Isator Levi said...

A -forfty- percent success rate. Forf. Ty. As in the percentage of people who know that you can come up with statistics to prove anything. ;)

On a related note, I dearly await the day in which I can respond to a person or group's trepeditious inquiry as to whether or not I know what I'm doing with "I -always- know what I'm doing; I'M A SCIENTIST!!!!!"

Randy Kay said...

Don't have anything of substance to add, except having read through the last few posts, am very glad that a work-around has been come up with. I'm sorry that you had to go through all of that.

Ana Mardoll said...

Thank you, so much. I'm very glad that I've given so much to deserve so much in return! :D

I'm very glad you posted it to Stylish; when I was first looking for a solution, I searched through their saved styles, so that will help other people. Thank you!

seybernetx said...

So Google, probably by accident, allows you to work around this appalling new interface that should never have been released at all. Talk about good news/bad news.

Just found you. Gonna have to check your blog out.

Ana Mardoll said...

*sigh* And, as of this morning, the script is no longer working. I presume because Google changed everything again? Can I call upon help once more for script tweaking?

Kiya said...

Thank you so much for this - the first I heard about the option to switch back from the godawful changes they implemented was when I started catching up on blogs and saw your anxiety about no longer having the option.... (Hi again. I have finally read all the deconstruction backlog posts and am now a much more *current* lurker.)

Post a Comment