Web Design. Web Development. Web Solutions.

HackWars Redesigned

HackWars original logo

While making more designs for the upcoming online theme store, one came up which set off a light bulb of sorts.

"This almost looks like one that would be cool for HackWars."

After some minor tweaks and changes, the HackWars design was in its near-final stages. As a surprise to the players (and proof that developers were still around), it went live. First, let's backtrack a little bit before that with a slight memory lapse: HackWars.net is running version 6 of Drupal, HackstockTech just designed for Drupal 7. Yeah... a little bit of an oops. It was fine though, being experts in Drupal. The theme for version 7 was applied a Drupal 6 template and the Cascading Stylesheet (CSS) classes were sifted through a bit to make sure the differences were figured out. The original design had a lot of core hacks which made it nearly impossible to just directly pop in the new theme. A core hack is a modification or addition to the code at a structural level that should or could be put at the content level (or levels in between for programming in some languages). In the case of themes and templates, it's usually putting content-specific elements directly into the template (so they became static and lost its dynamic functionality). For example, the HackWars shop menu was basically links hard coded directly on the template.

Nearly every bit of navigation was completely remade for HackWars. Originally, the site used the default "Navigation" menu that ships with the fresh install of Drupal. It's not necessarily bad but, on established sites with several types of content, a community forum, account management and leader boards, it's a little heavy for a single menu. So, items that required navigation were split up into separate menus, included the previously hard-coded store menu. Was monetization mentioned? Well, it is now and it's also up and running. Also, the social links on the original website were fairly horrible so they got an overhaul, too. After the divide and conquer of the elements, it was time to launch.

Without warning or notification, the design went live. As quickly as possible, blocks and menus were sorted, placed and configured. Within a matter of minutes, HackWars had a functional, slick, neo-retro design that also boasts responsiveness. It wasn't flawless though. Oho, no. Anyone who's ever worked with anything HackWars knows there's an odd quirk that pops up unique only to HackWars-related projects. It is still unknown how it happened but, for some reason the language type was set as Right-to-Left (RTL) like some eastern languages while the CSS was coded as: text-align: left; which had the affect of aligning all text to the right side of their parent elements but all punctuation was on the left! It was strange and never had been experienced before. Another (probably old) piece of knowledge gained.

Directly after the theme's initial install and language direction glitch, a poll was posted to see what the hackers think. In the post-launch of the new design, a few slight modifications were made. One overlooked detail was in the buttons; their colors made an unclicked button hardly readable. The second was just preference, the initial design had its font set scaled at 150% to purposely get that, "BOOM! In your face!" effect. The final is a much more realistic size. Check out the new site for the MMO hacking game yourself.

Shopping cart

0 Items $0.00