No announcement yet.

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>

    • Darkimmortal
      Darkimmortal commented
      Editing a comment
      The checkbox to activate the dropdowns for thread rating etc. are a huge UI failure.

    • CyberSultan
      CyberSultan commented
      Editing a comment
      Excellent work! With the pre-release sale going on right now without a working demo, I really hope this is the way it is going to look. Would be nice to get some official confirmation that this is still the direction you are going in before I purchase.

    • deathshadow
      deathshadow commented
      Editing a comment
      Methinks you still have a bit to learn about what minimalist markup actually means. For example:

      <div id="navbar">
      	<ul id="navtabs" class="floatcontainer">
      		<li><a class="navtab" href="#">Site</a></li>
      		<li class="selected"><a class="navtab" href="#">Forum</a>
      			<ul class="floatcontainer">
      				<li><a href="#">User CP</a></li>
      				<li><a href="#">New Posts</a></li>a
      				<li><a href="#">Today's Posts</a></li>
      				<li><a href="#">Mark all Forums Read</a></li>
      				<li><a href="#">Subscribed Threads</a></li>
      				<li><a href="#">Private Messages</a></li>
      		<li><a class="navtab" href="#">Blog</a></li>
      		<li><a class="navtab" href="#">Projects</a></li>
      		<li><a class="navtab" href="#">Calendar</a></li>
      Unneccessary wrapping div since you can style the UL... if all the child anchors are getting the same class there's no need for the class - if the different classed children are under a different parent tag then you don't need the class to differentiate those either... and I take it 'floatcontainer' is the same type of outdated ***otry as clearfix which has NO BUSINESS being in the markup?

      There is NO reason for that to be more than:

      <ul id="mainMenu">
      	<li><a href="#">Site</a></li>
      	<li class="selected">
      		<a href="#">Forum</a>
      			<li><a href="#">User CP</a></li>
      			<li><a href="#">New Posts</a></li>a
      			<li><a href="#">Today's Posts</a></li>
      			<li><a href="#">Mark all Forums Read</a></li>
      			<li><a href="#">Subscribed Threads</a></li>
      			<li><a href="#">Private Messages</a></li>
      	<li><a href="#">Blog</a></li>
      	<li><a href="#">Projects</a></li>
      	<li><a href="#">Calendar</a></li>
      That is MORE than enough hooks to do what you are trying to do.

      Same for the breadcrumbs:

      <ul class="breadcrumbs">
      	<li><a href="#" name="top">My Site</a></li>
      	<li><a href="#">Forums</a></li>
      	<li><a href="#">General</a></li>
      	<li><a href="#">Off-Topic Stuff</a></li>
      	<li><a href="#">The Forumdisplay Example Forum</a></li>
      <hr />
      I would assume the horizontal rule is removed via CSS and is present for styling off purposes? In either case if all the children are going to have the SAME class, there is NO REASON to be wasting a class on it when you could just style off it's parent!

      Another case - pagetitle:
      <div id="pagetitle">
      	<h1>The New vBulletin Style Forums</h1>
      	<p class="description" id="welcomemessage">Welcome to The New vBulletin Style Forums.</p>
      	<p class="description" id="firstvisitmessage">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.</p>
      Not certain that should even be the h1 since that would make it difficult to put a h1 on every page without wasting space on that type of text... probably why the site logo itself would be what I'd make the h1. Also would mean EVERY heading on the page is a subsection of that welcome text, and that wouldn't make much sense.

      That said, if all paragraphs inside 'pagetitle' are getting that 'description' class, there is NO **** REASON to be using a class on it!

      That second bit of code is even scarier since 1) I'm a little worried that you are all the way down to a H4 at the start of it. 2) "Block" - oh, that's descriptive. Lemme guess, another presentational class like that floatcontainer asshattery?

      Is there even a h3 before that H4? Is that H4 actually a subsection of the h3 preceeding it? Finally, what the **** does it have a class on it for when you have a perfectly good ID wrapping it?

      NOT that the code you presented corresponds to any of the images shown - but I suspect at least two div and 90% of the classes are unneccessary/redundant and are little more than presentational. Say what things ARE, not how they are going to appear!

      But again, asshattery like this:
      <ol class="commalist">
      	<li><a class="username" href="#">Kier</a></li>
      	<li><a class="username" href="#">Altered</a></li>
      	<li><a class="username" href="#">ArcVox</a></li>
      	<li><a class="username" href="#">Bill Bickley</a></li>
      	<li><a class="username" href="#">bonkerspr</a></li>
      	<li><a class="username" href="#">BWJ</a></li>
      	<li><a class="username" href="#">Christine</a></li>
      	<li><a class="username" href="#">Mike Sullivan</a></li>
      	<li><a class="username" href="#">Solar</a></li>
      Is serious whiskey tango foxtrot territory. Drop the classes on the anchors and add a class to the OL and drop that commalist crap since I suspect that too is presentational - though if you are adding the commas with CSS I'm wondering how the **** you plan to support IE - wasting bandwidth on a image for the comma?!? (IE + Generated content == /FAIL/) - or at this point are you just willing to give that 40% of browser users the finger?

      Or that 'popupmenu' - that looks like it's at the top of the page, so what the **** are you using a H6 for? Are there H1...H5 preceeding it, or did you say **** semantics and just skip over a bunch of levels? Much less I SMELL scripting to do CSS' job there, though I may be mistaken on that. Just hope whatever it is you are doing there for id abuse will include graceful fallbacks using the hrefs for people lacking .js, CSS or any other 'gee ain't it neat' technology.

      BUT at least it looks like you are trying to bring the markup into this century before the century is out - more than I can say for most other forum software. Just hoping that you still use tables for the TABULAR DATA and don't hop on the retard express of people saying "Don't ever use tables for anything" - Nothing wrong with tables for obviously tabular data (like a topic list or board list) of related rows and columns - just don't class stuff it unneccessarily. I see one more <td colspan="4"><b>Board Title</b></td> for what should be <caption>Board Title</caption> or <td class="heading"><b>Replies</b></td> for what should be <th>Replies</th> I'm gonna go on a killing spree.

      Take the current forum code for example:

      <table class="tborder" cellpadding="6" cellspacing="1" border="0" width="100%" align="center">
      	<tr align="center">
      	  <td class="thead">&nbsp;</td>
      	  <td class="thead" width="100%" align="left">Forum</td>
      	  <td class="thead">Last Post</td>
      	  <td class="thead">Threads</td>
      	  <td class="thead">Posts</td>
      From the rendered appearance the cellpadding is overridden by a border-collapse, there is NO reason to be trying to align an element set to 100% width (DUH), and ALL of those classed TD A> don't need a class because they are in a THEAD, B> should be TH, not TD. If you are going to put classes on them you should probably be using classes that say WHAT they are so each column can be uniquely styled (since firefux and other gecko based browsers still have their heads wedged up their asses about colgroups and scope - see the DECADE OLD bugzilla 915 - Don't you just love them wasting time on HTML5/CSS3 **** when they don't even have HTML4/CSS2 working right?)... of course, TD's should not be inheriting center off TR either (I know it does in FF/IE, and does not in Opera/Saffy/Chrome)... hah, and there's no reason for the non-breaking space if you turn on empty-cells:show;

      Again, no reason if styling that as is for the code to be much more than:

      <table id="boardList">
      	  <th class="description">Forum</td>
      	  <th>Last Post</td>
      If I were to use more code, I'd put UNIQUE classes on all of them for direct targeting (since IE doens't do nTh child or sibling selectors and Gecko is special - in the same way as some olympics)

      Hopefully you get what I'm saying. For everything I just said, your new markup looks head and shoulders above the existing, which like most forum softwares is a mishmash of modern and old with little to nothing in the way of 21st century methodology - namely semantic markup and separation of presentation from content. Any improvements in that area are greatly appreciated.

      I take it you are going to get all that stupid inlined CSS and javascript the **** out of the markup while at it? You know there's something wrong when there's 5k of code BEFORE the body tag.
    Posting comments is disabled.

Related Topics