Need help? Check out our Support site, then

How best to go dark for SOPA protest?

  1. I'm planning to go dark on Jan. 18 in support of the SOPA protest and Reddit's blackout. But the best I can think of to do is make my site "private" for the day. Any of you CSS experts out there got any ideas of how to do it better? I've got the CSS upgrade. I could stick in a bit of special code for the day. Maybe something to just display a totally black page/screen? Or better, a totally black page/screen with "Stop SOPA" in giant white letters. I'd love to do something like this, even if only 4 loyal readers see it.

    (Of course, it would be so much better if WordPress as a whole would go dark ... hint, hint ... )

    The blog I need help with is

  2. +1

    A SOPA black-on-black theme would be nice.

  3. If only they could crank out a theme that fast. Then everyone could use it, not just those with CSS upgrade.

  4. @windwhistle, they can. We need to suggest it though. I would most definitely go dark for that.

  5. I've yelled in the backdoor at staff and will post back here when I hear back from them.

  6. Cool! They know you and might listen.

  7. They are supporting opposition to it, so they just might do this. We'll have to wait and see.

  8. If they REALLY support it, all of WordPress would go dark. But I understand the financial repercussions of doing so.

    Maybe instead of a whole new theme (which would be very difficult for a lot of people to switch to for one day and then switch back), they could come up with some universal gimmick like the snow, that people could turn on or off without wrecking their existing site. A giant diagonal black banner across the screen or something like that.

  9. laurasbadideas

    It would be even nicer if there were a mechanism to schedule this in advance, rather than having to change themes manually at 8am/8pm EST.

  10. They scheduled the snow to go on and off. They could schedule black banners or overlays to do the same thing. Barring that, I'll probably be doing whatever I do late the night before.

  11. Taking down 30,000,000++ blogs including CNN and many large company sites and news sites that support your position could be a bit problematic if they did not have everyone's permission -

  12. Anyone get any word on this? I'd also like to join the SOPA blackout if there's a technical way to do it.

  13. I don't know about overall layover, etc., (and I shudder to think about the user protest over doing something so broad), but here's what I'm planning to do on January 18th: change my Reading settings to one post per page and put up a banner, like the one available on Lorelle's site,

    If you don't have the Custom Design upgrade, but your theme has a custom background, then simply make it black for that day.

  14. And of course tag your post with SOPA

  15. We don't have anything specific planned for SOPA Day yet, but if we do something site-wide, it will be non-disruptive, or rather no more disruptive than the snow was.

    If you want to do something yourself, you can add the following as an untitled Text widget:

    <a target='_blank' class='stop-sopa-ribbon' href=''><img src='[image URL]' alt='Stop SOPA' style='position:fixed;top:0;right:0;z-index:100000;cursor:pointer;' /></a>

    The ribbon for use with this can be downloaded from and uploaded to your own blog via Media -> Add New in your Dashboard. Editing the newly uploaded image in the Media section will show you the image's URL to enter in the code above.

    As you can guess, this is more or less the plugin. Plugins can't be used on, but this one seems to function just fine in a Text widget.

  16. For the non-Americans on WordPress, would someone like to give us a 2 paragraph rundown on SOPA

  17. How about a 4 minute video instead? :)

  18. And maybe a little bit longer than 2 paragraphs, Jane's post on is a must read.

  19. @macmanx Cool! Thanks for the text widget idea!

  20. And in super-condensed infographic form:

    It's good if you need a quick read, but the video is much better.

    @justjennifer you're welcome!

  21. @windwhistle: If you want "a totally black screen with "Stop SOPA" in giant white letters", go to Appearance > Background, set the bg color to #000, then go to Appearance > Widget, add a Text widget to the primary sidebar, and paste this in it:
    <div align="center" style="position:fixed;width:100%;height:100%;top:0;right:0;background-color:#000;text-align:center;font-size:800%;font-weight:bold;padding-top:300px;"><a style="color:#fff;" href="URL" target="_blank">Stop SOPA</a></div>
    (I've turned "Stop SOPA" into a link: replace URL with the actual URL of a page that explains what this is about.)

  22. Thanks, Panos, I'll try that out. I played around a lot last night, using trial and error with what you taught me about position:absolute, and came up with a huge 80% black rectangle that covers my whole blog and includes a message. Changed the background to black and got just about what I wanted, though I'm still fine tuning. (See my test blog at

  23. Good! I think semi-transparent is a better idea than the totally black you initially ordered. But better use fixed instead of absolute: this way the message will stay put on the browser window instead of disappearing from view if one scrolls down.

  24. I would urge everyone to at least put up macmanx's banner right away, and leave it up until SOPA is finally decided one way or the other. It's too subtle for my tastes, but it does serve to get the message up and give folks a link to more info.

  25. Panos, thanks for the tip. I'll change it to fixed.

  26. You're welcome!

  27. Well, my cobbled together code didn't like the fixed thing. Your code was much cleaner. So I added the transparency to yours. Best of all, I assume anyone can use it. That's exactly what I was after. I'll try to put it here for others to copy:

    <div align="center" style="position:fixed;width:100%;height:100%;top:0;right:0;background-color:#000;-moz-opacity:0.8;opacity:.80;filter:alpha(opacity=80);text-align:center;font-size:800%;font-weight:bold;padding-top:300px;"><a style="color:#fff;" href="URL" target="_blank">Stop SOPA</a></div>

  28. Oops. I left out the target page for more info. This will do that:

    <div align="center" style="position:fixed;width:100%;height:100%;top:0;right:0;background-color:#000;-moz-opacity:0.8;opacity:.80;filter:alpha(opacity=80);text-align:center;font-size:800%;font-weight:bold;padding-top:300px;"><a style="color:#fff;" href="" target="_blank">Stop SOPA</a></div>

  29. Uh oh, having a senior moment here. Have prepared a post to tell people how to use the blackout widget, but I've forgotten how to post the code for them to copy without it actually becoming active within my post. Enclosing it in didn't seem to work. If I use backticks, they show up in the post. Help, please.

  30. Er, the was meant to be the <code></code> thing.


Topic Closed

This topic has been closed to new replies.

About this Topic