Notice: This entry was published 5 years ago and may no longer reflect my views today.
Over a week ago I posted a Tumblr theme made after one of my favorite game series, Fallout. I’ve always wanted to do fandom themes, but there’s plenty out there and I wanted to try something different. I had this idea of converting actual in-game elements into a working theme for a long time and so, here is my first attempt. RobCo Terminal is an almost accurate port of the terminal seen in Fallout.
The entire process was fun but challenging. Then again, what project isn’t? That’s how I feel anyway. I always stumble with these kinds of things, so don’t feel too bad if you’re the same way.
Developing the Terminal
The first thing to do was to get a screenshot of the terminal. I had to use Fraps since the game’s built-in screenshot doesn’t work when you have a terminal open. Then, it was all a matter of editing out the background in Photoshop and slicing the terminal into appropriate parts. There are a lot of divs involved in the code, and it does bloat it up a bit but I tried to keep it organized and not too cluttered.
Now that I think about it, I probably shouldn’t have done the slicing. I’m sure using a CSS sprite it would work just as well and maybe even better. I did some math and slicing it into GIFs added up to a smaller file size altogether as opposed to one large transparent PNG, but then again my code might be cleaner. I’ll have to test it sometime.
I ended taking some other screenshots while I was at it too. Gosh, this game is beautiful (with mods heh).
Layout and Fonts
I wanted to keep the theme as close to the actual terminal as possible, so I regularly referenced screenshots on Google image search. I kept inline divs and images minimal as well as avoided special symbols to preserve the terminal look. The in-game font is Fixedsys, so I implemented that. Unfortunately, it doesn’t seem to work on Firefox and Mac (someone please confirm the latter, I only tested on an iPod Touch). Tumblr isn’t a fan of custom fonts not available on Google Fonts, and all elements need to be hosted on their site which doesn’t accept font files. And so, Courier New is the backup font, and then whatever monospace font available locally.
Colored Scrollbar and Working Power Button
I then used jScrollPane to make a colored scrollbar since I felt the normal one pulled you out of the theme. Its color matches the text color which you can change (just like in the game). My favorite feature is the power button. Pressing it will take you back to your Tumblr dashboard (also changeable). It was very simple to do but added so much to the immersion. If I had to choose a buzzword for gaming layouts, I guess it would be “immersion theming.” Sounds snappy, don’t you think? You saw it first right here!
The biggest challenge was to make the theme work for different resolution sizes. I play my game fullscreen, and my desktop’s resolution is 1920 x 1080. It makes for a nice, large screenshot to work with but it didn’t look so hot in smaller displays. I tested it out on my laptop at first (1366 x 768) and it didn’t fit at all. I attempted to use some css scaling so that it’ll resize accordingly without me having to do too much, but it barely worked so I resigned myself to writing five different media queries.
That worked out just fine, but to be honest, I really don’t like the idea of so many queries. I wonder if that’s normal. I know responsive design is supposed to streamline your theme’s appearance so it can look good in any type of device without compromise, but mobile-first is hardly feasible with this type of theming. It’s a very specific idea. I’d love to hear any input on the matter.
So what do you think? Yes/no/lolnoob? I love feedback and if there’s anything you think I can do to improve on this theme, please don’t hesitate to say so. And tell me if you’d like to see other
gaming immersion themes too! I already have a few more ideas tossing in my head right now. A Skyrim UI theme might be up next.