How To Black Out Your Site In Three Easy Steps

Earlier this week, thousands of sites, including JoeTech.com, blocked or hid their content as a symbolic gesture to protest the impending SOPA/PIPA legislation that threatened the integrity of free-flowing information on the Internet. While some sites displayed a pop-up message allowing users to move on to content by clicking a button and Google simply changed their logo to appear censored, sites like Wikipedia and Joe Tech completely blocked all content from users to truly emphasize the impact such legislation could cause. An example is seen below. This post will show you how we did it in just a few very easy steps.

sopadark

Black Out Your Site Like Wikipedia

This site and Wikipedia both used a pretty harmless method to block our content for the protest. The method we used involved simply covering up the normal content with a layer of HTML that hides it and shows something else in its place. To accomplish this in an elegant way, you will need an image and/or content to display, the HTML shown below, and a small change to your site’s CSS. Here’s how it’s done:

1. Create your image and content. In my case, I made a couple very simple changes to a large version of my logo image to make it more protest-y.

2. Add the overlay code. In your site’s template (or your theme’s footer.php in WordPress), copy the code below and paste it right above the /body tag. Modify it as indicated to include your own image or message.


<div style="position:absolute;left:0px;top:0px;
width:100%;height:100%;
background:url(/images/darken.png);text-align:center;">
<!-- Add your image and message below this line -->
<img src="/images/sopa.png" />
<!-- Add your image and message above this line -->
</div>

Here’s the background and content images I used.

3. Stop the scroll. Update your site’s CSS file to stop the original content from being larger than the new overlay content. This may not always be necessary, but will be pretty obvious when it is. Just add the following code anywhere to the bottom of the CSS:


body{overflow:hidden;}

That’s it! Follow the three steps above and you’ll have your protest/maintenance/special message up in no time on every page on the site.

Author: Joe Colburn

Joe Colburn is a software engineer specializing in PHP and a technology enthusiast. Always eager to dive into new and exciting things, Joe writes about anything technology related news and products that he thinks you will also be excited about. Find Joe Colburn on Google+ or by any of the links below.

4 thoughts on “How To Black Out Your Site In Three Easy Steps”

  1. Nice article,I am a crazy of traveling. I like to travel around the word. whits my friends. <a href=”http://www.powerlocksmiths.com”> scottsdale locksmith</a>

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.