Notice: This entry was published 5 years ago and may no longer reflect my views today.

RobCo Terminal Theme

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.

View demo →
Get code →

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.

Lucky 38 Casino

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!

Responsive Design

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.

Comments

  1. hah neat new theme for tumblr!! Can I request or put in a word of inspiration for a theme that isn’t game or fandom related, but just one that is really simple? Just like a gallery one with a customizable background, color, & a left sidebar with your profile pic + info + navigation. That’s all. I’ve been trying to find a tumblr theme that just displays pics & not the caption (only when you click on the pics) so that it looks like a gallery. I’m sure that’s not tooooo difficult to code, right?! I’ll leave that answer up to you to tell me haha.

    I think your new design is so awesome. Bahaha can’t wait to see more themes from you.

    You’re right though. The font is courier new on my computer, but I’m using GC! You’re probably better off trying to find a Google font that looks closest to it because courier really just doesn’t do it justice & Google fonts are so nice. I love them & I’ve downloaded so many of them. Can’t wait to finish everything on my to-do list so that I can start working on my new theme & use google fonts!!

    As for the mobile theme….I think you should just keep it simple haha. Make it a black screen with the same font. I mean, make it as similar to the main theme as possible, but strip it down so it’s like that on a mobile device.

    I play a good chunk of games, but I don’t know of any I would choose as my tumblr theme unless I was running some sort of fandom for it. If you made one for the sims, I know the kids over at r/thesims would absolutely love it. They love all things sims!

    omg if you made harry potter, i’d luvu4lyfeguhl.
    Tiff recently posted…Birthday Love & a Vegan Chickpea Curry RecipeMy Profile

    1. Oh snap, I forgot to mention the mobile version. I had one coded but it kept breaking thanks to jScrollPane. That part’s still in the works haha. Watch out for version 1.1!

      I was heavily considering using Google Fonts, but I ultimately decided to stick to the “canon” font. I was thinking of putting it in as an option so maybe that could be another feature for the next version. I should slap “beta” on this one right now. :P

      Your request doesn’t sound too hard! Sounds a lot like my tumblr right now without the captions and general messiness. :P Is that what you were looking for? I was gonna make a public version sometime (after we move most likely). I’ll send you a test version when I get to it. :D

  2. That theme is so cool! I remembered one of my friends looking for a layout similar to that (computer-techy) a couple of months ago. As long as you enjoyed the project, it’s all good. Challenge makes the whole thing more enjoyable (unless you’re going through infinite dead ends, haha). I’m loving how the background is high definition :3.

    You get Nancy’s seal of approval for this layout~ I don’t play the game or know about it so I can’t give much feedback besides “awesome” *_*. I’m looking forward to the Skyrim UI though! I’m familiar with that to know what’s going on XD.

  3. Thank you! Feels good to be back! :D Hahaha I remember having an LJ account, I think it’s still there although I have no clue what it’s called anymore.

    The theme is you made is really impressive, I haven’t seen one done that way before especially not for tumblr so good luck on that. You can put it on of those websites that sell tumblr themes because I really think people will pay for that especially gamers. LOL look at me, I’m always trying to sell stuff.
    Isi recently posted…La vie est belle!My Profile

  4. This is pretty wicked, haha. You obviously put a lot of effort into this and “lolnoob” would be the last thing I would say about it! It’s really creative, though I have a feeling I cannot appreciate it 100% because I have never played Fallout.

    I am generally not a fan of layouts with scrollbars inside, but I suppose this design called for it. :)

    With regards to responsive design, I don’t like using a handful of media queries either. I feel like it’s cluttered and they should be kept as simple as possible. But it honestly depends where your layout breaks… and if you have a complicated layout with lots of long menus or components – or even if you just have text that seems to break at the strangest points… you’re going to end up with a lot of queries. It just depends on the design. But if you have to add a new one, you have to. As long as you are doing it correctly and keeping things simple, I don’t think there should be an issue :)
    Georgie recently posted…Raw × Infinity: Remi @ Oxford Art FactoryMy Profile

  5. This is amazing. I’m currently loving Fallout and planning to do a Fallout cosplay. I even had a friend make me a functioning Pip-boy.

    You did a great job! ^.^ I’m impressed!
    Michelle recently posted…Don’t Be ForgottenMy Profile

    1. Sorry I didn’t see this sooner! My WordPress emails have been going to my spam folder for some reason.

      THAT IS AWESOME! I love Fallout so much. XD Which ones have you played?

Comments on this entry are now closed. Send me an email or a tweet me at @sweetraiscake if you'd like to keep the discussion going. I love mentions!