I have Firebug; Now I’m Dangerous!


I don’t know a THING about CSS or PHP. But for the past day and a half, I’ve been messing around experimenting with changing a Simple Machines Forum Theme (skin). Why? Because I can’t control my brain.

Because I wanted to transform Akyhne’s WoW Cataclysm Theme into a Dragon Age Theme. Akhyne has graciously given me permission to change it, for my own use, with his credits intact, of course. Now if EA will only let me use one of their Blood-spatter Dragon pictures.

I *can* use other images I got from EA, in a fansite kit. Well, according to the EULA, and of course, if I post the copyright information and disclaimer. You can’t find a Dragon Age fansite kit? There used to be one on the German site… years ago…. But this particular one I found was on the Polish Bioware site. Yes, there is an English EULA in the package; be sure to read it.

I don’t believe it’s the same as the prior German one, because the forums/reports claim that was 250mb. The Polish one was only about 25mb. Nobody seems to know what happened to the German one (it’s no longer on that site, I found all the Dragon Age d/l’s there, and it wasn’t with them). And if there was ever an English one… nobody’s heard of that, either.


So what IS Firebug? I dunno, exactly. It’s a plug-in for Firefox (or other browsers), and you can use it to snoop and test-edit CSS and PHP.

You just open a page, then click the Firebug, and some panels open up showing the HTML code on one side, and the CSS/PHP/DOM (whatever DOM is) on the other. The cool thing is, you can play around with everything on the page without messing anything up — and get to see it updated in real time!

So, for example, I had no idea how to get Akyhne’s dragon decoration on the other side of the forum border, or how to position it and size it correctly. And the tail I made for my DA dragon was a lot bigger than the Cataclysm one. To top it all off, looking at the PHP code for these elements it just says things like id=”dragon” and id=”dragon_tail.”

But in Firebug, you can scroll down the HTML elements — for example, select the dragon_tail piece — and the other side will pop open the pertinent CSS code that is controlling it. It turns out “dragon” and “dragon_tail” are defined in some CSS file, then just called up with the PHP file.

So Firebug tells me what file (so I can edit the real one on my site) — and what line number (though it’s easier to do a text search). And I can noodle with the little numbers inside Firebug and see the effects live on the web page. Once I got the right alignment and size, all I had to do was change the CSS file to the new stats. HAH!

Yes, I’m dangerous. I made a new logo for the Astronomy Theme, for my forum title. Not a big deal, you just upload your graphic to replace the one on the theme.

But then I was looking at it and going…. “UGH, this section here is really huge. Can I make the fonts smaller?” “Eeuw, I hate all that text, let’s delete some.” “There’s a big empty space here, let’s tighten it up.” Etc. :X YES, I can micro-manage!!!

Of course, doing CSS/PHP and skins/themes and whatnot is useless on WordPress. Unless…. I go and use wordpress.org to host my blog on my own site…. GAH! Let’s not think about that! Isn’t it bad enough I have two SMF’s on my site already!? And working on a third… :X


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s