ThemeLab's Blog

Stay up to date with our newest WordPress themes, WordPress plugins, WordPress tutorials, and other announcements.

Get a CSS Killswitch Effect With Only One Line of Code

Last Updated on by

I recently came across a site on Twitter called CSS Killswitch. What is it exactly? According to their site: “CSS Killswitch lets you non-destructively black out a difficult client’s website with the click of a button.”

The Code

If you try out their “two second demo” you’ll see all it basically does it make your page go completely blank. You can accomplish pretty much the same thing by placing the following bit of CSS code in your stylesheet.

* { display: none; }

If you notice anything still visible, you probably have some !important things you need to take care of as well.

Explanation

  • The asterisk selector (*) acts as a wildcard, and selects all elements within the page.
  • The “display: none” means nothing will be displayed on that selector.
  • Combined with the asterisk selector, effectively everything on the page is not displayed.

Downside

If your client knows anything about CSS, they’ll probably be able to easily identify this line of code and remove it. You can try to be creative with it and put it somewhere a client will not be likely to look.

According to the CSS Killswitch website, removing their method of hiding the page is as easy as identifying the offending CSS link and removing it.

Thoughts

I guess this is all done under the assumption that your clients are not aware of basic CSS techniques and therefore will be dumbfounded enough into finally paying you (the designer) for your work.

This might be useful if a client refuses to pay for work, but I’d only recommend using something like this as an absolute last resort.

Conclusion

Yeah, I know you CSS experts reading are probably already well aware of the asterisk selector and display: none. For everyone else, would you be interested in more if these quick CSS tip posts?

I’d be interested to hear your thoughts on more CSS tip posts, and the premise behind these methods of “disabling” pages for non-paying clients. What about the legality and ethics of doing such a thing?

Sound off in the comments.

About

Leland Fiegel was the original founder of ThemeLab. He is a web developer who loves WordPress and blogging.

  • http://tech-spree.com Darren

    Although its a handy idea if a client decides to screw you over. Wouldn’t it mean never really trusting a client again? The code would need to be added before the client refuses to pay. I’d hate to be like that.
    btw the css tips sounds like a good idea :P

    • Leland

      Yeah I guess you would need to add the CSS Killswitch code before to take advantage of the “click of a button” thing. Probably not a good mindset to be so untrusting of clients from the get-go.

      And thanks for the feedback about the CSS tips. Based on yours and other positive feedback I’ve received, I think I’ll be posting CSS tips like this (usually more advanced than this) more often.

  • R

    Ahahaha I love it. I guess contract or not, I still don’t trust people (because I always end up burned somehow). I love the idea of putting in a failsafe somehow. Most of my clients are the ones who fall into this category too. I wonder if you could include more than just one line of code and actually link a simple stylesheet that would let you add a blurb of text to say something about them being a non-paying client?

    • Leland

      Might be possible to insert text with a CSS pseudoclass (like :before or :after) but that’s not well supported by IE. If you know your client is a non-IE user, this might work out okay.

      Although something like inserting background image with text (and whatever else graphically) would probably be the best cross-browser way to get your message across.

      body { background: url('pay-up-now.jpg'); }

      Might be a good idea to remotely host this hypothetical “pay up now” image as well.

    • http://menacingcloud.com Edward

      R and Leland:

      If you are looking for more control of a killswitch, e.g. the blurb you mentioned, then try the AJAX Kill Switch

      http://www.menacingcloud.com/?c=ajaxKillSwitch2

      I personally think kill switches are warranted. Same idea as not paying your phone bill and getting cut off… it’s simply business.

  • http://ramblingsoul.com/ Roshan

    @r – try this

    body * {display:none;}
    body:after {content:”Pay Up now”;}

    • http://ramblingsoul.com/ Roshan

      oh yes, like Leland said, it won’t work in older versions of IE.

    • Leland

      Thanks for the code Roshan. That’s what I was hinting at with the pseudoclasses above.

      Should work in pretty much every modern browser. Old IEs (6 and below) are the only ones I can think of where they wouldn’t work.

    • http://www.surfsisters.co.za Supastarfish

      Hi Roshan,

      I am sorry for the stupid question but where do you add this:

      body * {display:none;}
      body:after {content:”Pay Up now”;}

      Don’t have access to the CSS Killer switch style sheet @import url(“http://cssksw.com/#”);.

      Thanks so much!

      Best Regards,
      Starfish

      Thanks.

      • Leland

        This code doesn’t actually have anything to do with the CSS Killswitch service. This is basically a simple CSS tip you can apply to your own (or client’s) stylesheets instead of using CSS Killswitch.

  • http://demusdesign.com Brad

    Maybe the strangest thing about their site is that they require you to sign-up to download, if I read it correctly. I’ve seen some premium sites that give away a free theme with sign-up, but for something like this? That’s too many steps. I’ll take your approach instead.

    • Leland

      Brad, I haven’t tried it myself but I think I do need an account and add the code to get the on/off functionality.

  • http://webmojo.co.uk Steve Morris

    I take on bored about starting a relationship with a non trust attitude, but as the old saying goes “in times of peace prepare for war”

  • Ant Gray

    It’s very easy to prevent, though you may halt operating entire site with that «dirty» trick.

    Fortunately, I never had to use something like this.

  • http://webmojo.co.uk Steve Morris

    Of course the other way of making sure you get paid is to host the site on your servers (a reseller package is only going to cost you 25 USD a month if hosted in the US) if they don’t pay, kill the whole site with a big banner saying site suspended due to non payment. If you provide the first years hosting for free you have no comeback as hosting is only provided on paid for sites

  • Debendra Maharjan

    I created a site for client, later he change the ftp, wp-admin password and didn’t pay me too, for this case what shall i do ? is there anything secure that client wont get notice and i could do something to site. Before submitting client is there any code that could help in my future projects.