HOWTO join the SOPA SRIKE

**CuraHack** · 14th Jan 2012, 04:19 PM

As many of you know on january 18th the web will go on a massive strike to protest against #SOPA (Stop Online Piracy Act). I created this thread to help webmasters join the strike by sharing code for your website(s ). This could would ultimately raise awareness for the cause.

If you have an idea, code, or even some cool designs for this day, please share it here!

I will keep this first post updated by adding all code to this post.

1. AmericanCensorship.org Petition Lightbox
Requirements: None
Type: Lightbox
Code: HTML/Javascript
Demo: (screenshot)
Source: AmericanCensorship.Org

HOWTO:
Add the following code just before the </head> in your template file, or index.php file.

Code:

<script src="http://americancensorship.org/call-client"></script>

2. CENSORED BANNER
Requirements: None
Type: Link with white background
Code: HTML/CSS
Demo: (screenshot)
Source: AmericanCensorship.Org

HOWTO:
Add the following code to your site, you may modify it's parameters to adjust it's size/location.

Code:

<a style="width:400px;height:100px;vertical-align:middle;text-align:center;background-color:#000;position:absolute;z-index:5555;top:50px;left:50px;background-image:url(http://americancensorship.org/images/stop-censorship-small.png);background-position:center center;background-repeat:no-repeat;" href="http://americancensorship.org"></a>

3. ReWriteRule
Requirements: None
Type: Total website blackout
Code: .htaccess (Mod Rewrite)
Demo: N/A
Source: CuraHack

This method replaces all pages with the content of sopa.html (you may rename the actual file).

IMPORTANT: Make sure the sopa.html page doesn't require any external files (such as .css or images), because these won't work because they will also be replaced by the contents of sopa.html

HOWTO:
First backup your existing .htaccess file in the web root (if you have one), then replace (or create the file) with the following contents:

Code:

RewriteEngine on //Turn on the engine
RewriteRule ^(.*)$ sopa.html [L] //replace all the pages with the contents of the sopa.html file.

If you have any cool design for this sopa.html page, be sure to post it here!

4. CENSOR ME (Wordpress)
Thank Rox for sharing this!

Requirements: WordPress
Type: Plugin
Code: PHP
Demo: (live demo here)
Source: Wordpress.org

This plugin is essentially an "off switch" for your website. When activated, the site is mostly blacked out by a banner for the americancensorship.org website.

HOWTO:

1. Upload the files to the /wp-content/plugins/censorme/ directory
2. Activate the plugin through the 'Plugins' menu in WordPress

5. SOPA Blackout JS Utility
Type: Javascript
Code: Javascript
Demo: (live demo here)
Source: sopablackout.org

HOWTO
The following will present a blackout banner when users visit your site, which can be circumvented by clicking anywhere:

Code:

<script type="text/javascript" src="//js.sopablackout.org/sopablackout.js"></script>

The following will blackout an element of a specific id:

Code:

<script type="text/javascript">sopablackout_id = 'sopa';</script>
<script type="text/javascript" src="//js.sopablackout.org/sopablackout.js"></script>

6. Dark message
Type: HTML5/Javascript
Code: Javascript-PHP
Demo: (live demo here)
Source: Unknown
HOWTO

Code:

<?php

/* Tell search engines that the site is temporarily unavailable */

$protocol = $_SERVER["SERVER_PROTOCOL"];
if ( 'HTTP/1.1' != $protocol && 'HTTP/1.0' != $protocol ) $protocol = 'HTTP/1.0';
header( "$protocol 503 Service Unavailable", true, 503 );
header( 'Content-Type: text/html; charset=utf-8' );

?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>



<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>STOP SOPA!</title>

<style type="text/css" media="all">
html,
body {
    margin: 0;
    padding: 0;
}

#text-shadow-box {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #444;
    font-family: Helvetica, Arial, sans-serif;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-user-select: none;
}

#text-shadow-box #tsb-text,
#text-shadow-box #tsb-link {
    position: absolute;
    top: 40%;
    left: 0;
    width: 100%;
    height: 1em;
    margin: -0.77em 0 0 0;
    font-size: 90px;
    line-height: 1em;
    font-weight: bold;
    text-align: center;
}

#text-shadow-box #tsb-text {
    font-size: 100px;
    color: transparent;
    text-shadow: black 0px -45.2px 19px; 
}

#text-shadow-box #tsb-link a {
    color: #999;
    text-decoration: none;
}

#text-shadow-box #tsb-box,
#text-shadow-box #tsb-wall {
    position: absolute;
    top: 40%;
    left: 0;
    width: 100%;
    height: 60%;
}

#text-shadow-box #tsb-box {
    -webkit-box-shadow: black 0px -45.2px 39px;
    -moz-box-shadow: black 0px -45.2px 39px;
}

#text-shadow-box #tsb-wall {
    background: #999;
}

#text-shadow-box #tsb-wall p {
    position: relative;
    font-size: 18px;
    line-height: 1.5em;
    text-align: justify;
    color: #222;
    width: 550px;
    margin: 1.5em auto;
    cursor: default;
}

#text-shadow-box #tsb-wall p a {
    color: #fff;
}

#text-shadow-box #tsb-wall p a:hover {
    text-decoration: none;
    color: #000;
    background: #fff;
}

#tsb-spot {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    pointer-events: none;
    background: -webkit-gradient(radial, center center, 0, center center, 450, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));
    background: -moz-radial-gradient(center 45deg, circle closest-side, transparent 0, black 450px);
}
</style>

<!--[if IE]>
<style type="text/css">
/* Sadly no IE9 support for pointer-events: none; nor CSS2 text-shadow */
#tsb-spot {
    display: none;
}
#tsb-ie {
    position: absolute;
    top: -90%;
    left: -50%;
    width: 200%;
    height: 334%;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAKWWHSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUKWWHSIgY3k9IjUKWWHSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSI3NCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
}
</style>
<![endif]-->

</head><body>
    
<div id="text-shadow-box">
    <div style="-moz-box-shadow: 0pt 88.4px 59px black;" id="tsb-box"></div>
    <p style="text-shadow: 112.8px 88.4px 39px black;" id="tsb-text">STOP SOPA!</p>
    <p id="tsb-link"><a href="http://americancensorship.org/">STOP SOPA!</a></p>
    <div id="tsb-wall">
        <div id="tsb-ie"></div>
        
        <p>This site has gone dark today in protest of the U.S. Stop 
Online Piracy Act (SOPA) and PROTECT-IP Act (PIPA).  The U.S. Congress 
is about to censor the Internet, even though the vast majority of 
Americans are opposed. We need to kill these bills to protect our rights
 to free speech, privacy, and prosperity.  Learn more at <a href="http://americancensorship.org/">AmericanCensorship.org</a></p>
    </div>
    <div style="background-position: -282px -336px;" id="tsb-spot"></div>
</div>

<script type="text/javascript" language="javascript" charset="utf-8">
/**
 * Zachary Johnson
 * http://www.zachstronaut.com
 * I place the following code in the public domain.
 *
 * Fork it on GitHub: https://github.com/zachstronaut/stop-sopa
 */
 
var text = null;
var spot = null;
var box = null;
var boxProperty = '';

init();

function init() {
    text = document.getElementById('tsb-text');
    spot = document.getElementById('tsb-spot');
    box = document.getElementById('tsb-box');
    
    if (typeof box.style.webkitBoxShadow == 'string') {
        boxProperty = 'webkitBoxShadow';
    } else if (typeof box.style.MozBoxShadow == 'string') {
        boxProperty = 'MozBoxShadow';
    } else if (typeof box.style.boxShadow == 'string') {
        boxProperty = 'boxShadow';
    }

    if (text && spot && box) {
        document.getElementById('text-shadow-box').onmousemove = onMouseMove;
        document.getElementById('text-shadow-box').ontouchmove = function (e) {e.preventDefault(); e.stopPropagation(); onMouseMove({clientX: e.touches[0].clientX, clientY: e.touches[0].clientY});};
    }
}

function onMouseMove(e) {
    if (typeof e === 'undefined' || typeof e.clientX === 'undefined') {
        return;
    }
    
    var xm = (e.clientX - Math.floor(window.innerWidth / 2)) * 0.4;
    var ym = (e.clientY - Math.floor(window.innerHeight / 3)) * 0.4;
    var d = Math.round(Math.sqrt(xm*xm + ym*ym) / 5);
    text.style.textShadow = -xm + 'px ' + -ym + 'px ' + (d + 10) + 'px black';
    
    if (boxProperty) {
        box.style[boxProperty] = '0 ' + -ym + 'px ' + (d + 30) + 'px black';
    }
    
    xm = e.clientX - Math.floor(window.innerWidth / 2);
    ym = e.clientY - Math.floor(window.innerHeight / 2);
    spot.style.backgroundPosition = xm + 'px ' + ym + 'px';
}
</script>

</body></html>

Here are some designs:
Design by Kim Hunter: here (webpage)
Animation:

Design by CuraHack here.

Again, if you have interesting code/designs for this action, be sure to share it here!

Make this day go into the history books! Make this a massive strike no-one can forget!

CuraHack Reviewed by CuraHack on 14th Jan 2012. HOWTO join the SOPA SRIKE http://sopastrike.com/images/time-to-strike-header.png As many of you know on january 18th the web will go on a massive strike to protest against #SOPA (Stop Online Piracy Act). I created this thread to help webmasters join the strike by sharing code for your website(s ). This could would ultimately raise awareness for the cause. If you have an idea, code, or even some cool designs for this day, please share it here! I will keep this first post updated by adding all code to this Rating: 5

**Rox** · 14th Jan 2012, 09:50 PM

plugin for wordpress sites!

http://wordpress.org/extend/plugins/censor-me/

**Kim Hunter** · 16th Jan 2012, 12:17 AM

I have just finished building my redirect page in support of Freedom of Information on the web.
http://kimhunter.ca/web_strike.htm

I will redirect my site to it on the 18th. I also created a little protest graphic. feel free to use it.
http://kimhunter.ca/protester_animation.gif

**CuraHack** · 16th Jan 2012, 10:18 AM

Originally Posted by Kim Hunter

I have just finished building my redirect page in support of Freedom of Information on the web.
http://kimhunter.ca/web_strike.htm

I will redirect my site to it on the 18th. I also created a little protest graphic. feel free to use it.
http://kimhunter.ca/protester_animation.gif

Nice work! I will add this to the main post!

**.:Raymond:.** · 16th Jan 2012, 12:18 AM

@Kim Hunter

Post the source code here. Its dam sexy

**Darlos** · 24th Jan 2012, 06:32 PM

Stop SOPA Ribbon code:

Code:

<a target='_blank' href='http://americancensorship.org/'><img
src='http://i43.tinypic.com/35ldhmc.png' title='Stop SOPA' style='position: fixed; top: 0; right: 0; z-index: 100000; cursor: pointer;' /></a>

**ShareShiz** · 24th Jan 2012, 06:34 PM

copying and pasting the same text is a crime to the internet

**Griz** · 24th Jan 2012, 06:35 PM

SOPA SRRRRRIKKKKE

View Poll Results: Will you join the strike?

HOWTO join the SOPA SRIKE

Thread Tools

Display

Hybrid View

HOWTO join the SOPA SRIKE

Sponsored Links

World Wide Web Walkout for Freedom of Information

Thread Information

Users Browsing this Thread

Similar Threads

[Howto] Multi Thumb?

SOPA protesters send emails to the wrong SOPA site

Current SOPA Blackout List - 18th January - SOPA Latest Information

SOPA/PIPA: Please join us!

HOWTO use PHP on Windows

Tags for this Thread

Posting Permissions

themaCreator - create posts from...

themaPoster - post to forums and...

themaManager - edit and manage...

themaLeecher - leech and manage...

themaRegister - register to forums...