I started a bit of a discussion over on the WordPress forums about how to blackout my blog on January 18 in support of the Reddit blackout and other protests against SOPA and PIPA.
One of the suggestions will put a little diagonal banner in the upper right corner of your screen that links to more SOPA information. As you can see, I’ve added it. But I wanted a real in-your-face blackout for Janurary 18 and after some discussion, some trial and error, and Panos’s help (he, the Wizard of WordPress), I came up with a simple text widget that does exactly what I wanted — produces a semi-transparent black overlay for my entire blog. You can see how it looks on my test blog. Note it also links to more information on SOPA and PIPA.
If you’d like to do the same thing on your WordPress blog next Wednesday, click here for the code. Copy and paste it into an untitled text widget in your primary sidebar (themes vary, so if you have several different sidebars, you may have to experiment). Be sure to click “Save” before closing.
Your widget set-up should look something like this:
This is HTML code; you don’t need a premium theme or WP’s CSS upgrade for it to work and it won’t break anything on your blog. If you don’t like it or it doesn’t work for you, just remove the widget.
My thanks to Panos and everyone else on the forum who helped me develop this easy way for WP bloggers to participate in the blackout and make a real statement.
Now if only Google and Facebook would join in …
(Not comfortable messing with your blog? Try everything on a test blog first. Just set up another blog, make it private, and play to your heart’s content. Populate with posts imported from your main blog. Try out this widget. Try out new themes. The sky’s the limit. I have several test blogs. Doesn’t everyone?)
Update: If you want to include PIPA on your overlay, go into the last line of the code and change “Stop SOPA” to “Stop SOPA & PIPA.” Be careful not to change anything else. Save.
Update: Easier yet, WordPress has finally installed an easy on/off setting for your blackout participation.
To display code without it functioning as code, use the following html (hopefully I can get this to show):
blah blah blah
Posted by She speaks.... | January 15, 2012, 5:02 pm MSTokay that didn’t work… sorry
Posted by She speaks.... | January 15, 2012, 5:02 pm MSTOkay, you are familiar with html, so I’m going to supply the code – but remove the spaces I’m inserting next the the “” characters…
blah blah blah
Posted by She speaks.... | January 15, 2012, 5:05 pm MSTdarn it… still didn’t work. Okay, using the “” the start/end code is “code” and “/code”. Sheeshhh….
Posted by She speaks.... | January 15, 2012, 5:06 pm MSTSo you see my problem. I tried that code and every other variation I could find or think of and nothing worked. Frustrating, because I’m 90% sure I’ve used code, /code in the past and it worked just fine. So I finally just gave up and did the post like you see.
Posted by PiedType | January 15, 2012, 5:28 pm MSTHmmmm. not sure why it wouldn’t work. I’m not surprised what I was trying to enter didn’t work. Perhaps upload a .doc file and provide a download link for it so that way no one will have to type all that in. I’m sure I’d mistype if I tried. I am the QUEEN of typo’s!!!!
Posted by She speaks.... | January 15, 2012, 5:51 pm MSTThanks for the idea. I put in a link to a pdf file that can be easily viewed and copied. I wouldn’t wish that bit of typing on anyone.
Posted by PiedType | January 15, 2012, 8:51 pm MSTFor some blogs’ themes (like P2) you need to add z-index:1 to the style attribute’s string of CSS parameters.
Posted by BrainwreckedTech | January 15, 2012, 11:02 pm MSTThanks for the note. I had that problem on one of my test blogs and didn’t have the patience or know-how to add the z-index, although if it had been my main blog, I’d have probably spent a long time trying to get it to work. Did you finally get it to work? P2 may not be the only exception and other people may want to know how to do the code.
Posted by PiedType | January 16, 2012, 12:09 am MSTYes, I got it to work with P2 with the z-index:1 addition alone. The text widget is on hold for Jan 18.
Posted by BrainwreckedTech | January 16, 2012, 10:12 am MSTI’m using Dust to Dawn and having a problem getting it to work. Grrrr.
Posted by bats0711 | January 16, 2012, 8:24 am MSTBy all means go to the WordPress forum I linked above and explain your problem. People there are extremely helpful and it’s likely someone will get right back to you with a suggestion or solution. I’ll take a look on my test blog and see if it works for me with your theme.
Posted by PiedType | January 16, 2012, 8:48 am MSTI made a small comment over there, I’m hoping someone will respond I would love to do this without changing my theme. I love the forums, haven’t been over there in quite sometime. Thanks again Type for all your help with this!
Posted by bats0711 | January 16, 2012, 8:58 am MSTRats. It doesn’t do diddly in your theme, does it? You might need the code with the z-index in it that Brainwreckedtech mentioned. Go to the forum and ask him specifically for his code, assuming he got it to work. The z-index makes sure the overlay appears in front of everything else. Could be with your theme, it’s currently coming up behind everything else.
Posted by PiedType | January 16, 2012, 9:00 am MSTBats, I added the z-index to the code and it worked for me using Dusk to Dawn on a test blog. Try this code and let me know if it works.
Posted by PiedType | January 16, 2012, 9:23 am MSTAlright what am I doing wrong? That didn’t work for me.
Posted by bats0711 | January 16, 2012, 10:05 am MSTAh ha! I went to the forum and used the code you placed there for me and it works nicely, beautifully! Yeah! Thanks. Now to remember what date of the week to use it on.
Posted by bats0711 | January 16, 2012, 10:10 am MSTGreat! I changed my post to link only to the “new, improved” code because it should work over a wider variety of themes than the first one I put up. Wish we had more time to get the word out before Blackout Day.
Posted by PiedType | January 16, 2012, 10:26 am MSTThis worked for my blog – thanks!!!!
Posted by glamtart | January 17, 2012, 4:20 pm MSTYou’re welcome. And thank you for joining in.
Posted by PiedType | January 17, 2012, 5:39 pm MST