homosexual

How to Remove Rainbow Banner from WordPress Reader (Temporarily)

In her post titled Listen Up WordPress, InsanityBytes explained her frustration over the rainbow banner that WordPress put at the top of the Reader – signifying marriage equality and the Supreme Court’s decision today – and her inability to remove said banner. If you still see the rainbow banner (I have no idea how long they’ll keep it up) and want to temporarily remove it, there is a way. It’s as simple as unchecking a box, but finding the right box will require a bit of exploration into the inner workings of browser code (which might be fun for you). The downside is that the rainbow will show up again if you refresh the page, but that shouldn’t be a problem since the Reader loads new posts without reloading the whole page. If you need a more permanent solution, go here.

How to make the rainbow banner image disappear from the top of the WordPress Reader

Step 1 – Make sure your on a page with the rainbow in a desktop browser…RemoveRainbow1

Step 2 – Pull up the browser’s developer tools somehow (you can Google how to do this for your browser). In most it’s in the menu at the top or even in the right-click menu. Here’s how I get to it in Safari. Right-click and then “Inspect Element”.

RemoveRainbow2

You should be able to find a page of elements like this. Congratulations, you’re looking at the HTML you’re browser uses to render the website. This is called the DOM (Document Object Model). Select the DOM element you see highlighted here called “header”. It’s nested under html and body.

Find it? Great! Notice what happens when you click it? Look at the style rules (click around to open them if they aren’t visible). They change depending on which DOM element you select. The one for “header” has a CSS style rule for “.masterbar” that looks like a rainbow of colors. That’s the culprit and you can see it at the bottom right of this image. You’re almost done…RemoveRainbow3

Step 3 – Uncheck that box under the “.masterbar” style rules (see screenshot). That’s it! Check your other window where the WordPress Reader is…RemoveRainbow4

You should now see this! No rainbow. 🙂RemoveRainbow5

 

Personally, I like the rainbow and join with WordPress in celebrating marriage equality. However, they should have provided a way to permanently remove it. If you forget and refresh the page, you can just do these three steps again to make the rainbow disappear from your Reader again.

Feel free to play around in the developer area of your browser, explore and learn new things. It doesn’t affect anything permanently and any changes you make will be gone when you refresh. It’s just affected your local browser window. I hope this helped.

Gentleness and respect,
–Russell