Blogger, Pink means Pink!: Problem Solving Google Blogger Text Colors

Blogger template

In this post I try to change the text colors on my Google Blogger blog, and found a world of trouble and frustration.

By the time I finished this post I had uncovered several bugs. This is really long post, so I have decided to try create an itemized list of bugs up front with links to the part of the post in which I identify that bug. This doesn't work perfectly because I don't want to change the narrative flow and divide the text into sections by bug, but hopefully it helps. You can use these bug numbers later when you tell me my bug is spot on, not universal, completely wrong, or later fixed (Yay!).

Bug List

Possible bug titles for the bugs I discovered:

• Sidebar and footer background color choices not set correctly (BloggerTemplateDesigner_Bug1)
• Gadgets on sidebar don't use background color option setting (BloggerTemplateDesigner_Bug2)
• Some UI elements not visually marked on the preview when selected in the list (BloggerTemplateDesigner_Bug3)
• UI element list in "Advanced" tab order is confusing order and should be grouped by location on layout (BloggerTemplateDesigner_Bug4)
• Default template designs should have minimum text contrast requirements (BloggerTemplateDesigner_Bug5)
• Can't edit text or background of date tab on posts (BloggerTemplateDesigner_Bug6)

Feature Requests

Besides the bugs listed above, my biggest complaint is that it took so long to figure out the correspondence between UI elements on the list and UI elements in the preview. If my BloggerTemplateDesigner_Bug4 is fixed that would help. As a feature request, I would like to be able to select items in the preview and have the relevant item in the UI list be selected.

Exploring Blogger Text Colors

I just started this blog and didn't want to spend a lot of initial time worrying about the layout, so I chose one of the default layouts based on the "Awesome Inc." template and figured I'd worry about the details later.

However, there were a few details I decided couldn't wait.





1. Text contrast for links

The default text colors for unvisited links and visited links were so similar to the regular text color that I had a hard time seeing that the links existed at all. I hate that. Some of my links go to sites that are really funny and I'm sure you don't want to miss them. So I changed the link text to colors which I logged in my brain many years ago as default linking colors (e.g. unvisited and visited). This was pretty easy.

2. Text contrast on the footer

I started experimenting with adding gadgets to my blog layout that appear at the bottom of the screen below my blog posts (the "footer"). I was reminded of how annoying it is when text is nearly impossible to read because of low contrast between the text and the background. Because I assume there are many people that will only come across my blog accidentally, I want to make sure it is as easy as possible for them to follow my blog. From my perspective, the bottom of my blog then looked something like this after I added a few gadgets:

Doctored image that tries to approximate what the footer at the bottom of my blog looked like to me at this point.

If I squinted and looked very carefully, I could see the "Subscribe" and "Follow by Email" text on the page, but whoever's idea is was to put white text on a pale pink background needs to fight that impulse next time. I expected modifying the colors of the footer background or text would be easy. After an initial 10 minutes of mucking around I made an accidental discovery:

The text and background color contrast were probably not as bad for everyone else as I thought (hence the doctoring of the above image to show how my blog looked to me). If I were using a desktop computer with an awesome monitor at the ergonomically correct height (center of the screen slightly lower than my eye level) I probably would not have decided to mess with the colors until I was ready to create my own blog background and colors myself. However, I discovered if I tilt my laptop screen as far back as it goes I get slightly more contrast. This makes me somewhat suspect my laptop is messing with me and is partially to blame. However, I still maintain that default template color schemes should be very easy to read. I know, I know -- designers like sexy color schemes. However, I have no patience with text that I can't read without squinting (note to self: I need to play with the tools on this website: Web Accessibility in Mind). My parents probably wouldn't even be able to tell that there was text down there. I think this is unlikely to get fixed, but I'm going to declare "BloggerTemplateDesigner_Bug5": check all default templates for text readability.

So many wiser souls that don't tend to break UI easily would have moved on at this point. However, me being me, I decided to keep experimenting since I knew I'd be modifying colors on my blog anyway (although I reserve the right to have nightmares that are clearly inspired by trying to read white text on pale pink backgrounds). I had figured out how to change the hyperlink colors pretty easily, so I didn't think this would take very long. <sigh>

I started going through the different "Advanced" options in the Blogger Template Designer to try to figure out where to change the background or text color for the elements at the bottom ("footer") of my blog. I knew I either needed to change the background, change the text, or both.

I was originally "exploring" the Blogger Template Designer, but now I am in "problem solving" mode.

Problem Solving: 

Change the background or text of my footer so that I can read the text easily.

On the negative side, there is a long list of UI elements to pick from and it took me quite a while to find what I was looking for since I didn't know what the names of the UI elements would be. The organization of this list is a mystery to me (BloggerTemplateDesigner_Bug4) -- perhaps it is sort of in top to bottom order of where these things are expected to be on the page? In addition, at first I couldn't see all of the items on the list because the scroll bar is so pale gray I couldn't find it. I'll save my comments on the color picker for a separate post.

On the plus side, I love how I can select something from a list of UI elements (such as "Gadget Text," "Post Background," etc.) and I can see which elements on my blog will be modified by changes I make. (This actually wasn't consistent, though, which caused me some problems I will go into later in this post which I will label "BloggerTemplateDesigner_Bug3").

When I select an item from the list of UI elements such as "Gadget Background," the parts of my blog that my color changes will affect are marked clearly on a preview of my blog.

So this is where things got a bit tricky. I often find myself in this situation. I realize, "If I am clever about this I can figure out how to do what I want eventually," but also have a voice in my head saying, "Why is this so hard?"

I know that many of the things on the footer of my blog are called gadgets. And as I would expect, the "Gadget Text" option could fix the unreadable white-on-pale-pink text on my footer. However, I realized that other things on my blog were also gadgets (such as "Blog Archive" and "About Me" which were added by default) and they had a different background (dark gray) that I couldn't figure out how to change. At this point an easy option would be to try to find some text color that would have good contrast with both pale pink and dark grey, but I didn't immediately find something I liked. Then I realized the default gadgets had a separate background object (a rounded rectangle) that had a color that I could set (it is transparent by default, at least on this layout template). I changed the background for the default gadgets to black (as shown in the previous picture) but this didn't change the background for the gadgets in the footer. So -- gadgets sometimes have a background color I can set and sometimes don't, depending on where they are on the page? Or perhaps some gadgets do and some don't? That seems strange... (Now I am getting confused). I am calling this "BloggerTemplateDesigner_Bug2."

Then I experimented with changing the background of the entire footer. This didn't work as I expected. Based on what I observed, I am going to guess that whatever color you pick for the background color of your footer is much lighter than I selected. (Now I'm getting annoyed.) I'm going to call this part of "BloggerTemplateDesigner_Bug1."

Why is the background color for the footer so much lighter than the color I selected above?

After taking several hours blogging about this rather than spending more time trying to fix my problem I've finally figured out how to change the background of where my "Blog Archive" and "About Me" gadgets are! This part of the layout is called the "Sidebar." At this point I feel pretty stupid -- sure, the ordering of the list of UI elements isn't clear, and I've don't remember using the term "sidebar" before, but the name is suggestive enough. Why didn't I see this before?

I noticed a pattern earlier -- in most other cases I can select a UI element in the list and that element is outlined by a red box in my blog preview. As a user I started to expect this. What I didn't realize is that some items on this list don't get outlined in the preview when I select them, including the one that I was looking for. I was sort of clicking on UI items on the list quickly and checking to see if the UI element in the preview was outlined with a red box and it never happened. After some experimentation, I found several other UI elements such as "Tabs Background" which also don't show up in my preview either. I am going to group all such UI inconsistencies as "BloggerTemplateDesigner_Bug3."

Ok, so I have identified some inconsistencies in the UI, but I can see a setting to change the background color of the sidebar, so at this point I think I have solved my problem once I pick a reasonable color. I can change the background color of my sidebar to be the same as the color of my footer -- then I can just pick a gadget text color that has high contrast with the background color.

So I change my sidebar background color and realize that whatever color I pick, the sidebar is changed to a color that is much darker than the color I selected. At this point I start to feel that the designer is messing with me on purpose. (Me: "But I want pink #ce5f70!" Hal: "I'm sorry, Dave, I'm afraid I can't do that"). I'm going to consider this also part of "BloggerTemplate_Bug1."

Why is the background color for the sidebar so much darker than the color I selected above?

At this point I am not as annoyed as I am really worried.

In my experience, if you show someone UI that is completely broken (buttons don't work, words are misspelled, etc.) and the problem is not too hard to fix, they will probably fix it when they have time. If you are completely frustrated by UI that you suspect is working as the designer intended (even if you think it is terrible) you should assume there are going to be some pretty significant roadblocks to getting it changed (after all, "those who torment us for our own good will torment us without end").

The only possible explanation I can come up for why Google is doing this is that someone at Google thinks that having the sidebar dark and the footer light for all web logs on Blogger adds a certain continuity. If anyone knows differently or has a better idea, I'd love to hear it! As far as I'm concerned, if you let users set text and background colors for different parts of their blog and show them a preview of what it will look like (which I think is absolutely the right approach, and thank you!) then you should use the colors they pick. Period. At that point it's the user's lookout if they do something like set the text and background both to black or something.

If I'm right that someone is changing my color settings to have consistency between blogs, then that is a terrible reason considering how many different design choices you are giving bloggers.

From previous experimentation I know that it's probably impossible to get the footer and sidebar to be approximately the same color (if I make the the footer "black" it actually turns into what looks to me like pale blue), and I'm pretty tired of experimenting at this point since I don't even like pink (I only picked this template as a starting point because it reminded me of tie dye). So now I just need to:

1. Change the gadget background color to a light color (so it can be similar to the footer color, which Blogger is going to make into a light color no matter what I pick). (Grr! Argh!)
2. Change the gadget title text to a very dark color (note: it's white by default) so it shows up easily against the gadget background color and footer color, which are now both really light.
3. Pick any footer color I like, since I chose dark text for the gadget text, and Blogger will change whatever color I pick into a light color anyway. Grr!
4. Change the sidebar background color if it looks bad (note that whatever color I pick will changed by Blogger to a much darker color). Grr!

I really hate pink now.

Ok, I think I understand the layout of the obstacle course at this point. Now I'll try to accomplish those mini tasks I just came up with:

1. Change gadget background: no problem.
2. Change the gadget text: hmm. I thought this would be one task, but doing part of this task was relatively easy and the rest is impossible using the UI, as far as I can tell. Fixing the gadget title was easy. Fixing the gadget text on my sidebar took me a minute, because I first tried to change the "Gadget Text" color would fix this, but actually I needed to change "Gadget Links" instead, since the text in these gadgets are links to my posts and profile. (I think if I did a redesign I would probably group some of these items together). However, some of the text on the gadgets in my footer can't be changed by the UI as far as I can tell. I don't like pale gray text on white. Grr!
3. Pick a footer color I like: no problem.
4. Sidebar background changed: no problem.

Ok, so let's see how it looks now:

Ok so now most of the text on my page is easy to read because there is reasonably high contrast between the background and text except for the gadgets on my footer:

As as far as I can tell, there is no way to change the text color for these Blogger gadgets.

I am disappointed that I can't change the color of the text on these gadgets at all, but in this case I would have been satisfied if the text were a little darker. The "Powered by Blogger" text color on the footer is a better choice I think. I am going to consider this...

Mission Completion!

Of course, I don't actually like how it looks (it kind of looks like Valentine's Day threw up at this point), but hey -- I officially accomplished my task! Now I really want to start from scratch with a different background that contains no pink whatsoever, but I will fight that urge for now.

While I was trying to accomplish this I noted that what looks like a "tab" at the top of my post that has a date on it is selected when I select "Gadget Title," so at this point I assume that tab is a gadget and that I can change the color and text of that tab using "Gadget Title" and "Gadget Background" options. Changing these options has no effect, nor does changing any of the background or text colors.

The tab above my post is outlined when I select "Gadget Title." So why doesn't the text color change?

After some further experimentation, I realize that I can change the date text color by changing the UI element "Date Header":

Actually you can change the text used for the date; it's the "Date Header" UI element.

So perhaps the only bug is that this tab was accidentally selected earlier when it shouldn't have been. I'm so confused at this point.

Then I try to figure out how to change the background for the "Date Header." Besides setting the text color there is also an option to change the border color of the date header, but as far as I can tell this has no effect. Ok, so maybe I need to look for a different UI element on the list. "Date Background" would seem a consistent choice but that doesn't exist. The date kind of looks like it is on a tab, so I check "Tabs Background" and every other UI element on the list, but can't find any way to change this. I am going to give up on figuring this out at this point. I am just going to label this "BloggerTemplate_Bug6".

How to group similar bugs to maximize the chance they will get fixed is a minor art form and depends on the company culture, the architecture of the application you are creating bugs for, what part of the product lifecycle you are in, etc., so I just picked something and ran with it.

Thanks for reading!