Back in December 2010, I’ve been given a task to code for a design based on the Supermassive templates. For your information, Supermassive is a powerful, professional WordPress theme. In their own marketing phrase, it is “a next generation WordPress theme”.

Supermassive can help you to create a great looking theme that allows you to make your own unique and abstract layouts in minutes. You can easily change the position of a particular element since the <div>s are fluid. Imagine you have two horizontal boxes, named Box Left and Box Right. You can easily make Box Right in 100% width by just removing Box Left completely.

I find this task to code based on Supermassive template really puts my XHTML/CSS skills to the test. I need to optimize everything that I’ve learned about building reliable yet semantic XHTML/CSS template which works on IE6, IE7, IE8, Chrome, Opera, Firefox and Safari. Working with a custom design on an existing theme requires a different set of considerations.

The first thing I needed to consider is where to do the front-end coding for the custom design. This is because we want to be able to update Supermassive template in the future when a new version is released. Therefore, I need to consider where to add my front-end codes. After some discussions, we decided to code on a Supermassive Child Theme. It’s the easiest yet very reliable way to keep the ability to update to new Supermassive version in the future. When updating Supermassive original template, it will only replace the parent theme which is the original Supermassive Theme. In this case, updating the original template won’t affect the child theme.

Second thing to consider is the HTML structure. Since Supermassive uses shortcode heavily for its layout based on <div>, I can’t simply code custom HTML structure. What I need to do is to create each Supermassive element using the shortcode first. Once all elements are created, I can start styling the elements based on design without making changes on the HTML element or structure. Using this method, I can still use any Supermassive shortcode without having to worry about the styling even if the shortcode will never be used.

The last thing to consider is how to make the template styled according to my custom CSS instead of the original CSS. This is the trickiest part. I need to make sure everything on the custom CSS has the highest priority, so the website will be styled according to it. We can’t simply remove the original CSS because we still need some styling from it such as the administration interface, sliding effect and JavaScript element.

For me, the easiest way is to add !important syntax at the end of the styling, e.g. div a {text-decoration:hover !important;}. With that, it will have higher priority. I recommend not to define any font size on the CSS because on current version of Supermassive template, there is a specific panel to change the font size directly.

Supermassive is a great tool for WordPresser because it comes with its own JavaScript snippets which includes sliding effect, tabs, and image manipulation. It also has a very user-friendly interface for administration. I’m sure Supermassive shortcode list will come in handy for beginners.