Redesigning The X-Style

Reading Time: 4 minutes

While supporting the X-Style in November last year I realized, that some design decisions made with the X-Style could cause issues again and again in future times. The reason? X-Style has once been designed for Burning Board 3.1 (WBB 3.1) and was adapted to WBB 4.1. Which, at the end, didn’t work out as planned. So I decided to rework the style to resolve the issues that came up. And while recoding the CSS I felt that the look of the style became a little old-fashioned and could take some redesign. To be fair: The style was originally created in 2008.

So what did I do?

Well, the first thing was to find a solution for the drop down navigations: Colors used variables that once existed in WBB 3.1 but don’t exist in WBB 4.1. Mostly I reused the colors of the buttons and ran into issues because WBB 4.1 doesn’t provide every variable that was needed. For example there is a variable called @wcfDropdownHoverBackgroundColor but there is no @wcfDropdownHoverColor – try to solve this when there’s no documentation where the variable is used. You’ll find a lot but for sure not everything.

So I thought about a new button design and stopped reusing button colors for drop downs. The idea was to flatten the look of the buttons. I chose a simple 2-colored gradient instead of a “plastic looking” 4-colored gradient. Too add some highlight I defined a subtle white box-shadow and chose to opt for a bigger border at the bottom of the buttons. And that results in a quite modern look.

The board list and the header came next and needed some changes. The board list got some new icons for the forums. The icons for hiding the forum moved from left to right. And at first the tabularBox (which is the category header here) was left without a gradient.

But it felt empty and boring to me so I set the background color to blue and added a gradient.

The old design looked like this

The header of the page got some work to: First of all, the user panel is now sticky so you can always reach it. Second, i used a background image and added a translucent gradient.Another thing I wanted to do was to make it easier to change/add background images to the body and the header of the style. WBB 3.1 offered some inputs in the style editor so it was rather easy to change these images whithout writing code. But sadly these inputs don’t exist in WBB 4.x. I decided to make it a little easier to change these settings and created LESS variables so that the only thing that the user needs to do is enter the name of the file (and in some cases the path). I’ve added these variables close to the top of the CSS declarations so nobody needs to search that deep in the code.

 

Improving usability

This sounds like a big task and it is. There’s just some minor thing that I changed regarding usability. By default links in WCF are not underlined so in some cases it’s hard to know that you see a link you can click. I changed that for links in text and in the sidebar. Theses links are underlined by default in X-Style so you don’t need to hover on text to figure out if it was a link or not.

Ripple effect in the user panel?

In the support forums at Elevenfour I was asked if I could add a ripple effect to links on the user panel. In case you don’t know: the ripple effect was made popular by Google when introducing Material Design and it looks like this:

This video is captured from the navigation at cls-design.com.

The aim of this effect is to give instant feedback to the user after he or she clicked on a button showing that the action succeeded.

If you click on a link in the user panel a dropdown opens almost instantly even if it has no content. So if I had added this effect to those links that would have been too much and that’s why I decided not to use the effect.

Which software did I use?

Almost none. Of course I used WCF to create the style. I used Photoshop to resize the image used in the header and last but not least Colorzilla’s CSS Gradient Generator since I don’t want to remember the correct syntax. ;)

Any questions? Feel free to post them below.