First Look: The vBulletin 4.0 Style


  • Kier
    started a blog post First Look: The vBulletin 4.0 Style

    First Look: The vBulletin 4.0 Style

    When I was hired by Jelsoft back in 2001, the first thing I did was to make some sweeping changes to the vBulletin 2 style in time for its fourth beta release, though many of the design elements were already in place and could not be re-done without major changes to the PHP code.

    For vBulletin 3, the task of producing the style once again fell to me. My goal was to simplify the layout, produce consistent design rules, to make commonly-used controls more prominent and to take those less-frequently used buttons and links and do the opposite through the use of popup menus, collapsible elements etc.

    The vB3 blog and project tools add-ons were largely my design, and for these products we started to explore the use of tableless / CSS design in more depth than was in use for forum. With vBulletin 3.7, the new profile page, album/picture system and social groups were designed to be completely CSS-driven, but they clearly showed the limitations of trying to append additional CSS rules on top of the existing CSS written out by the vB3 style system, which is far from conducive to producing a completely CSS-driven design.

    For vBulletin 4.0, the original intention had been to produce a completely new, CSS-driven design, marked up with semantic XHTML together with an overhauled, much more modern user interface. All of this would be released in a single 4.0 version with a relatively long project timeline. However, the switch to the new iterative development strategy, together with the much shorter period to first release that came with it, has meant that the scope of this task has been pared back for 4.0. In the initial release, the requirement is to produce a new design using semantic XHTML and CSS on top of the improved style variable system and extended template syntax that has been developed. The more extensive user interface changes will be delivered in a later release, after 4.0.

    Producing this new style requires some unique considerations, over and above the obvious semantic XHTML/CSS requirements:
    • It can't be so complex that novice administrators will never be able to edit their templates
    • It must be sufficiently flexible to allow restyling by administrators at many levels of proficiency
    • It must be capable of adapting to elements being conditionally available due to permissions, options etc.

    I have been working on this for some time now and have developed a CSS framework within which the new templates can be produced, together with several key pages to demonstrate how it all fits together.

    More Bodies to Lighten the Load...

    The process has reached the point now where some of the work can (and for reasons of time constraints, must) be handed off to people other than just me in order to complete everything that still needs to be done. I figured therefore that now would be good time to demonstrate some of what I have put together so far.

    Header, Navbar, Breadcrumb, Page Title

    Let's start with the top of the page, with the header, navbar, breadcrumb and page title.

    Some things to mention right away: the tabs in the navbar are currently non-functional and the links underneath are just place-holders. The actual content for these has yet to be decided.

    Secondly, you'll notice that the colour scheme in use is not a million miles away from that of the existing, vBulletin 3.x style. This was a conscious decision in order to retain some visual familiarity with the scheme that has been in place for so long now.

    By default, we show a very small logo in the header, which can of course be replaced with something of equal or different size to fit in with the branding of your own site in the same way as was possible with all previous versions of vBulletin.

    Under the logo, we have (and hope to retain, given time to complete the PHP code that would allow it to function) a set of tabs that will allow the visitor to quickly navigate to a section of the system and know at a glance where they are. Below this we have a row of links similar to what runs along the bottom of the vB3 navbar, except that these links have the ability to switch depending upon the selected tab above.

    Moving down we see that the breadcrumb has moved out of its traditional position in the navbar to occupy its own space on the page background where it is less cluttered and less likely to wrap with small browser windows.

    Immediately below the breadcrumb is the page title. The size of this element has been vastly increased over the bold, 10pt text used in vBulletin 3 and is far more prominent in its placing on the page, as befits its importance. Under this is space for an optional page description, which can accept a forum description, help text or anything else that might be useful.

    The XHTML for all of this is remarkably simple...

    HTML Code:
                    User CP
                    New Postsa
                    Today's Posts
                    Mark all Forums Read
                    Subscribed Threads
                    Private Messages
            My Site
            Off-Topic Stuff
            The Forumdisplay Example Forum
        The New vBulletin Style Forums
        Welcome to The New vBulletin Style Forums.
        If this is your first visit, be sure to check out the FAQ by clicking the link above. You may have to register before you can post: click the register link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below.
    Forum Home

    The forum home page was the first complete page I built, and looking back at it now there are some bits of it that look a little out-of-place next to some of the more recent design elements I've built. Right now, it's using the same iconography as vBulletin 3, though I have produced new, larger versions of the images with alpha transparency from my original masters so they work a lot better on variable backgrounds.

    This is an example of how forumbits appear on the forum home page:

    As you can see, the forumbits have moved on from their column-based layout that was used in vB1, vB2 and vB3. The new design is less rigid and allows whitespace to imply connections between data items rather than enforcing encapsulation with heavy borders or backgrounds.

    Forum titles and icons are made much larger and more prominent, as these are the primary points of reference for the forums. Information such as the number of contained threads and posts is demoted to a floating line of de-emphasized data to the right of the title while last post information gets a line all to itself in order to allow thread titles to be shown without the excessive wrapping that would invariably come from the small container available in vB3.

    What's Going On?

    As we look toward the bottom of the page, the What's Going On box has been given a make-over.

    Once again, this design is accomplished with minimal markup (it's primarily a bunch of HTML list elements) and all the layout and styling is accomplished via CSS.

    HTML Code:
        Forum Information and Options
                    Posting Permissions
                        You may post new threads
                        You may post replies
                        You may post attachments
                        You may edit your posts
                        BB code is enabled
                        Smilies is enabled
                        [IMG] code is enabled
                        HTML is disabled
                    Moderators of this Forum
                    Icon Legend
                        Contains unread posts
                        Contains no unread posts
                        Hot thread with unread posts
                        Hot thread with no unread posts
                        Thread is closed
                        You have posted in this thread
                    Users Browsing this Forum
                        There are currently 22 users browsing this forum. (9 members and 13 guests)
                            Bill Bickley
                            Mike Sullivan
                    Thread Display Options
                            Show threads from the...
                                                         Last Day                             Last 2 Days                             Last Week                             Last 10 Days                              Last 2 Weeks                             Last Month                             Last 45 Days                             Last 2 Months                             Last 75 Days                             Last 100 Days                              Last Year                             Beginning                         
                            Use this control to limit the display of threads to those newer than the specified time frame.
                            Sort threads by:
                                                         Thread Title                             Last Post Time                             Thread Start Time                             Number of Replies                              Number of Views                             Thread Starter                             Thread Rating                         
                            Allows you to choose the data by which the thread list will be sorted.
                            Order threads in...
                                 Ascending order
                                 Descending order
                            Note: when sorting by date, 'descending order' will show the newest results first.
    Forum Display

    The threadbit element of forumdisplay has already been revealed in my previous blog, so I won't go into it in much detail here, but there are a few new elements on this page that are worth a closer look.

    Popup Menus

    Firstly, we have the new popup menu system. The menu system in vB4 has the distinct advantage over that of vB3 that it does not require Javascript to function. On browsers with only CSS available the menus still work, meaning that we no longer have to provide a no-javascript alternative for the contents of the menus.

    Additionally, these new menus keep their content associated with the control, meaning that one does not have to go hunting through the XHTML for the body of the menu.

    HTML Code:
        Inline Mod
            Select all
            Deselect all
            Invert selection
            Select unapproved threads
            Select deleted threads
            Select threads with attachments
            Select threads from guests
    When Javascript is enabled, the menus go into their enhanced functionality mode, which allows them to reposition themselves to avoid dropping out of the viewport, to respond to a click on the control and stay open until explicitly closed, rather than the hover-to-open method they use in CSS-only mode.

    Text Buttons

    The button-bases that were produced for vBulletin 3 were never very popular. The fact that they were a fixed colour, and that they were anti-aliased to the default style's background colours meant that they were not particularly flexible, and required a trip to the image editor with the graphics developer toolkit in order to make them appear nicely on different coloured backgrounds.

    For vBulletin 4, I have abandoned image-based button-bases completely in favour of CSS-based styling of standard textual hyperlinks. Gecko (Firefox) and Webkit (Safari, Chrome) based browsers can benefit from CSS-driven corner rounding while all modern browsers can make use of alpha-transparent PNG button backgrounds for a polished appearance.

    In some cases, graphics will still be used in buttons, but only to provide an iconic symbol in addition to the text, rather than to provide the entirety of the button. When these icons are used, they will be alpha-transparent PNGs so that they work on any coloured button background, meaning that it will be far easier to produce buttons and controls for varying colours of vB4 style than ever before.

    Inline Moderation Highlighting

    In vBulletin 3, there is a rather nasty Javascript function that handles highlighting content when it is marked for inline moderation. It does this by swapping alt1 and alt2 background colours for the inline moderation background. vBulletin 4 dispenses with the need for this complex code by simply attaching an additional class to the outer container of each content item to be highlighted. CSS rules achieve the actual visual change meaning that it's trivial (or unnecessary) to write highlighting code for new content types, and different content types can be highlighted in different ways simply by altering their CSS rules.

    Forum Jump

    Up to now, the forum jump device has always been a <select> menu, which imposes certain restrictions on how it can be styled. For vB4, the forum jump uses the new popup menu system so it offers far more flexibility of style. Clicking on a particular forum in the menu uses standard hyperlinking rather than form controls, so anyone with even a basic grasp of HTML will be able to add their own links to it easily (doing this in vB3 would require a PHP handler to be written for each new link). Closed... and open... Forum Information and Options The various bits and bobs from the bottom of the old forum display page have been neatly encapsulated into a single element combining the forum rules, icon legend, display options, list of browsing users and moderator list. The result is far cleaner than previous vBulletin versions. Show Thread In my opinion, the most important page on a forum. Posts The goal of the page design should be to emphasise that which is important so that the visitor can get on with doing what the page is intended to allow them to do - read posts. Research suggests that people read content more easily if their eyes can traverse down a column without interruption from irrelevant (or less relevant) information. One of the biggest changes that I made for vB3 when redesigning from vB2 was to change the postbit from a [left-userinfo | right-posttext] layout to a top-userinfo, bottom-posttext layout. This layout has now been abandoned in favour of the more traditional two column approach. However, I have taken it a step further by stripping away a lot of extraneous bumpf that gets in the way of reading a thread. Most obviously, the reply / quote / edit controls now appear in a highly de-emphasised manner until the visitor moves their mouse onto a post, at which point they convert into full-fledged icon+text buttons. For a visitor who is only interested in reading a thread rather than interacting with it, this makes for a much more pleasant uninterrupted reading experience. Thread Information As with the forumdisplay page, many of the extra bits and pieces from the bottom of the showthread page are now rolled up into a single box. Forms Since the first appearance of the vBulletin 3 style, many different pages have been put together that are at their root, lists of form controls. Examples would be all the "post new x" pages and the "edit options" page in the User CP. As time has gone on and more people have added to these forms, we have lost (if we ever had) a sense of design consistency in how to present form controls. With vBulletin 4, I have aimed to rectify this by producing a library of generic form control layouts from which just about all vBulletin forms can be built. Their HTML markup is extremely simple but the CSS rules attached to them make them (IMHO) very good-looking, accessible and easy to interact with. Here are a few examples: Dependent Controls When looking through some of the existing vB3 forms, I found several examples of controls that were redundant unless another control was set to a particular state. One example of this is in the 'Delete Post' controls on the post editing page. Here, we have a three-way radio button and a text box. What is not immediately clear is that the text box is redundant and ignored unless the radio button is set to the 'Soft Delete' state. In order to deal with this problem, I developed a system of 'Dependent Controls', where specific control can be instructed to only become active when a parent control is active or set to a particular state. Here is an example of a dependent control in use, in the vB4 version of the 'Delete Post' controls as described above. The dependent control system is itself dependent upon Javascript to function, but if Javascript is disabled, the form will continue to function, it will just do so without dependent controls switching from enabled to disabled state. Here's a couple more dependent control examples: One More Thing... Just enough time to show off the design of a few more pages I've built. The calendar is one of the most recent, and now sports a tabbed interface to switch between year, month, week and day views. Month View Week View Add New Event As always, I look forward to reading your comments on anything I've posted today.</select>

    • StarShaper
      StarShaper commented
      Editing a comment
      Wow, well done my friends! This is by far the best-looking vBulletin Default-Style of all time.

      Can't wait for the final release...

    • Ohiosweetheart
      Ohiosweetheart commented
      Editing a comment
      Originally posted by Gladius;bt5843
      one thing that stuck out the most for me in a bad way though, is that signatures still seem to be attached to the bottom of the text instead of the bottom of the "table". To put it simply, that looks half-assed on all boards which have larger avatars and bigger user info blocks on the left because most posts don't contain enough text to push the sig down properly. Actually, it looks like that even in the screens posted here.

      Also, more importantly, every sig is practically pushed into the post text which is VERY annoying, especially when dealing with longer/more extensive signatures. No one wants to look at sigs that much.

      The first thing I've had to do for years on all of my boards was to align the sigs to the bottom of the postbit - if I didn't after every upgrade, my users started to complain how annoying it was and how crappy it looked when sigs were stuck to the post text.

      So I REALLY hope that sigs finally get aligned to the bottom once and for all so that I don't need to keep fixing this.
      I'm so glad that someone else said something. Please take this into consideration!

    • Wayne Luke
      Wayne Luke commented
      Editing a comment
      Would suggest this. Put the signature in its own DIV and then use:

      .signature {
      vertical-align: bottom;

      Should align it to the bottom of the container in most modern browsers, including IE8 in standards compliant mode.
    Posting comments is disabled.

Related Topics