How to skin a website

November 30, 2010 11:46 PM

What is the easiest way to replace the text or pictures on a website with your own pictures, preferably using Firefox? Where should a person who only knows a bit of HTML start?

I'm wanting to reskin a browser-based game, similar to what the now-defunct udtoolbar did for Urban Dead. Just replacing map icons with pretty images, and turning selected text into icons. I can work with HTML, but Javascript confuses me. What is the easiest-to-follow way to do this?

posted by WhackyparseThis to Computers & Internet (5 answers total)

Best answer: This is what Greasemonkey is for. Their wiki has a tutorials section.

I don't have any firsthand experience with coding for it, so I don't know how easy or difficult or intuitive it will be for you, but it should get the job done.
posted by clorox at 12:04 AM on December 1, 2010

Best answer: You'll probably have to learn (some) javascript, sorry. Your best bet is greasemonkey + jquery for reducing the complexity of your replacements. A sample jquery image replacement might be:

$('img[src="path-to-the-original-image"]').attr("src", "path-to-your-image");

Depending on the structure of the original HTML, you might be able to use Stylish instead, but only if they're using the CSS background-image property to set the images. In this case, you can do:

img[src="path-to-the-original-image"] { background-image: url('path-to-your-image');}

posted by beerbajay at 12:49 AM on December 1, 2010

Best answer: Any chance you could link to the source so we can see what you're working with? In Javascript, you can do something like:

document.getElementById('imgId').src = 'path/to/your/image.jpg';

if all of the images of ID's.
posted by 47triple2 at 8:41 AM on December 1, 2010

Oh, and you can do the same for the text, kinda. If it is in a div, then you can do:

document.getElementById('divName').innerHtml = '';
posted by 47triple2 at 8:42 AM on December 1, 2010

Response by poster: Any chance you could link to the source so we can see what you're working with?
The game is at WIGBL.com, it's basically a reimplementation of Nexus War.

Looking at the examples at userstyles.org, I think I could do most of what I want through Stylish. If that doesn't turn out satisfactorily, then I'll have a crack at greasemonkey.
posted by WhackyparseThis at 3:09 AM on December 2, 2010