vBulletin 4.0 默认风格抢先看！

[老鬼]

作者: Kier 发表日期: 2009-4-23

当我在 2001 年受雇于 Jelsoft 时，首先做的事情是对 vBulletin 2 的风格进行了清理，为它的第 4 个 Beta 版本发布扫清了障碍。但是很多设计元素已经就位，在微调 PHP 代码的前提下无法大规模的修改。

随着 vBulletin 3 提上议事日程，为其制作默认风格的任务再一次落在了我的身上。我的目标是简化布局，建立一致的设计规则，让常用的控件更加突出，而将不常用的按钮和链接放入弹出菜单、可折叠元素中等。

vB3 博客和 Project Tools 插件大部分也采用了我的界面设计，而对于这些产品，我开始尝试更比 vB 论坛深入的使用 tableless / CSS 设计。vBulletin 3.7 中心的个人资料页面、相册/照片系统和圈子系统完全采用了 CSS 布局。但是这也让我们发现，尝试在 vB3 风格的 CSS 系统中添加额外的 CSS 规则有很大的局限性，很难制作完全基于 CSS 的设计。

对于 vBulletin 4.0 最初的目标是建立一个全新的、CSS 布局的、采用语义 XHTML 标记的，完全重写且更加现代化的用户界面。所有这些都会在一个单一的 4.0 版本中发布，需要相对较长的项目时间。但是，由于我们切换到了一个快速周期性的开发策略，需要在较短时间内发布 4.0 版本，这意味着该目标在 vB 4.0 中不能完全达到。因此，在 4.0 的最初版本中，我们会采用一个使用语义 XHTML 和 CSS 的全新设计，该设计基于我们新开发的增强的风格变量系统和扩展的模板语法。更广的用户界面改进将会在 4.0 之后的版本中逐步实现。

制作此新风格除了要满足上述语义 XHTML/CSS 的需求外，还有一些独特的考虑:

• 它不能太复杂，导致新手管理员无法编辑模板
• 它必须充分灵活，允许任何技术层次的管理员都可以基于它制作新的风格
• 它必须能够适应界面元素根据不同的条件 (权限、选项等) 显示/隐藏，而不变形

我已经为此工作了一段时间，开发出了一个 CSS 框架，为制作新的模板创造了条件，并且制作了一些关键的页面以演示如何让这一切协同工作。

更多的人照亮道路...

现在的进展是，某些工作可以 (由于时间紧迫，必须) 让除了我的更多的人来做，以及时完成。因此，我认为现在是比较合适向大家演示目前的工作成果的时候了。

页眉、导航栏、面包屑、页面标题

让我们从页面顶部开始，包括页眉、导航栏、面包屑、页面标题。



首先需要说明: 导航栏中的标签当前还不能正常工作，在下面的链接仅是为了演示的占位之用。其中的实际内容还是待定的。

其次，您会注意到当前的配色和 vBulletin 3.x 的风格差异不是很大。这是有意识的决定，保留一些长期存在的以为大家所熟悉的视觉方案。

默认，我们在页眉显示一个非常小的 Logo，但是您可以使用一些相等或不同尺寸的图标来代替，与老版本的 vBulletin 类似。

在 Logo 下方，我们有 (且如果时间允许完成 PHP 代码，很有希望保留) 一系列的标签 (Tab)，允许访问者快速导航到系统的某个栏目，并知道现在所处的位置。再往下是一行类似于 vBulletin 导航栏下方的链接，但是这些链接根据标签选择的不同会相应的变化。

再下方便是面包屑 (Breadcrumb) 区域，它已经从传统的导航栏内移动到外面，使之有更宽的空间来显示内容，不会被小的浏览器窗口强迫换行。

面包屑下方便是页面标题。相对于 vBulletin 3 中使用的粗体 10pt 的标题字体，新的标题字体大得多，在页面中更加明显，以突出它的重要性。在其下方是可选的页面描述，内容可以是论坛的描述、帮助文本或是任何其他有用的东西。

这些内容所采用的 XHTML 代码相当简单...

[HTML]<div id="header">
<div><a href="forumhome.php" id="logo-image"><img src="images/logo.png" alt="" /></a></div>
<div id="toplinks">
<a href="#">Kier</a>
<a href="#">Settings</a>
<a href="#">Log-out</a>
</div>
<hr />
</div>

<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>
</ul>
</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>
</ul>
</div>

<div id="breadcrumb">
<ul class="floatcontainer">
<li class="navbit"><a href="#" name="top">My Site</a></li>
<li class="navbit"><a href="#">Forums</a></li>
<li class="navbit"><a href="#">General</a></li>
<li class="navbit"><a href="#">Off-Topic Stuff</a></li>
<li class="navbit"><a href="#">The Forumdisplay Example Forum</a></li>
</ul>
<hr />
</div>

<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>
</div>[/HTML]

论坛首页

论坛首页是我第一个完成的页面，现在回顾起来和我最近建立的页面有些不一致。现在它使用了与 vBulletin 3 相同的图标。但是我已经制作了新的，较大的并有 Alpha 透明效果的图像，使之更能够配合论坛的背景。

下面是论坛首页 forumbits 的外观:



您可以看到，forumbits 已经摆脱了 vB1、vB2 和 vB3 的表格状布局。新的设计看上去更加灵活，允许使用空格来暗示数据项目中的联系，而不是强制将它们封装在浓重的边框和背景中。

论坛版面标题和图标更大更显眼，因为它们是论坛的主要参考点。类似主题数、帖子数的信息移动到标题右上侧浮动，不会再和版面标题抢风头。最近发贴信息独占一行，长的主题标题便不会被浏览器强制换行 (这种情况在 vB3 中经常出现)。

[老鬼]

论坛统计信息

页面底部，便是“论坛统计信息”。



该设计仍然使用了最少的 XHTML 标签 (它主要是一些 HTML 列表元素)，所有的布局和样式都使用 CSS 完成。

[HTML]<div id="forum_info_options" class="block">
<h4 class="blockhead">Forum Information and Options</h4>
<div class="blockbody floatcontainer">
<div id="forum_info_block_1">

<div id="forum_posting_rules">
<h5 class="blocksubhead">Posting Permissions</h5>
<ul class="blockrow">
<li>You <strong>may</strong> post new threads</li>
<li>You <strong>may</strong> post replies</li>
<li>You <strong>may</strong> post attachments</li>
<li>You <strong>may</strong> edit your posts</li>
</ul>
<ul class="blockrow">
<li><a href="#">BB code</a> is enabled</li>
<li><a href="#">Smilies</a> is enabled</li>
<li><a href="#">[IMG]</a> code is enabled</li>
<li>HTML is disabled</li>
</ul>
</div>


<div id="forum_moderators">
<h5 class="blocksubhead">Moderators of this Forum</h5>
<ul class="blockrow commalist">
<li><a class="username" href="#">Mickey</a></li>
<li><a class="username" href="#">Donald</a></li>
<li><a class="username" href="#">Goofy</a></li>
<li><a class="username" href="#">Pluto</a></li>
<li><a class="username" href="#">Daisy</a></li>
<li><a class="username" href="#">Minnie</a></li>
<li><a class="username" href="#">Pete</a></li>
</ul>
</div>

<div id="forum_icon_legend">
<h5 class="blocksubhead">Icon Legend</h5>
<dl class="blockrow">
<dt><img src="images/statusicon/thread_new-16.png" alt="" /></dt><dd>Contains unread posts</dd>
<dt><img src="images/statusicon/thread-16.png" alt="" /></dt><dd>Contains no unread posts</dd>
<dt><img src="images/statusicon/thread_hot_new-16.png" alt="" /></dt><dd>Hot thread with unread posts</dd>
<dt><img src="images/statusicon/thread_hot-16.png" alt="" /></dt><dd>Hot thread with no unread posts</dd>
<dt><img src="images/statusicon/thread_lock-16.png" alt="" /></dt><dd>Thread is closed</dd>
<dt><img src="images/statusicon/thread_dot-16.png" alt="" /></dt><dd>You have posted in this thread</dd>
</dl>
</div>

</div>

<div id="forum_info_block_2">

<div id="forum_onlineusers">
<h5 class="blocksubhead">Users Browsing this Forum</h5>
<div class="blockrow">
<p>There are currently <a href="#wol">22 users browsing this forum</a>. <span class="shade">(9 members and 13 guests)</span></p>
<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>
</ol>
</div>
</div>

<form id="forum_display_options" action="" method="post">
<h5 class="blocksubhead">Thread Display Options</h5>
<div class="formcontrols">

<div class="blockrow">
<label for="sel_daysprune">Show threads from the...</label>
<select class="primary" id="sel_daysprune" name="daysprune">
<option value="1">Last Day</option>
<option value="2">Last 2 Days</option>
<option value="7">Last Week</option>
<option value="10">Last 10 Days</option>

<option value="14">Last 2 Weeks</option>
<option value="30">Last Month</option>
<option value="45">Last 45 Days</option>
<option value="60">Last 2 Months</option>
<option value="75">Last 75 Days</option>
<option value="100">Last 100 Days</option>

<option selected="selected" value="365">Last Year</option>
<option value="-1">Beginning</option>
</select>
<p class="description">Use this control to limit the display of threads to those newer than the specified time frame.</p>
</div>

<div class="blockrow">
<label for="sel_sort">Sort threads by:</label>
<select class="primary" id="sel_sort" name="sort">
<option value="title">Thread Title</option>
<option selected="selected" value="lastpost">Last Post Time</option>
<option value="dateline">Thread Start Time</option>
<option value="replycount">Number of Replies</option>

<option value="views">Number of Views</option>
<option value="postusername">Thread Starter</option>
<option value="voteavg">Thread Rating</option>
</select>
<p class="description">Allows you to choose the data by which the thread list will be sorted.</p>
</div>

<div class="blockrow">
<p class="label">Order threads in...</p>
<ul class="checkradio group">
<li><label for="radio_asc"><input type="radio" name="order" id="radio_asc" value="asc" /> Ascending order</label></li>
<li><label for="radio_dsc"><input type="radio" name="order" id="radio_dsc" value="desc" checked="checked" /> Descending order</label></li>
</ul>
<p class="description">Note: when sorting by date, 'descending order' will show the newest results first.</p>
</div>

</div>
<div class="blockfoot actionbuttons">
<div class="group">
<input type="submit" class="button" value="Show Threads" />
</div>
</div>
</form>

</div>
</div>
</div>[/HTML]

版面显示

版面显示页面 threadbit 元素已经在我以前的 Blog 中揭示，因此我在这里便不再重复细节。但是该页面中的几个新的元素值得一看。



弹出菜单

首先，我们拥有了新的弹出菜单系统。vB4 的弹出菜单系统相比 vB3 有着显著的优点: 它不需要 Javascript 便可工作。在仅支持 CSS 的浏览器中菜单仍然可以工作，这样我们便无需为菜单内容提供非 Javascript 替代了。



另外，这些新菜单与其中的内容相关联，这意味着您无需四处寻找菜单的 XHTML 代码在何处。

[HTML]<li class="popupmenu" id="imodsel">
<h6><a class="popupctrl" href="#">Inline Mod</a></h6>
<ul class="popupbody popuphover">
<li><a href="#" id="imodsel:all">Select all</a></li>
<li><a href="#" id="imodsel:none">Deselect all</a></li>
<li><a href="#" id="imodsel:invert">Invert selection</a></li>
<li><a href="#" id="imodsel:all:1">Select unapproved threads</a></li>
<li><a href="#" id="imodsel:all:2">Select deleted threads</a></li>
<li><a href="#" id="imodsel:all:4">Select threads with attachments</a></li>
<li><a href="#" id="imodsel:all:8">Select threads from guests</a></li>
</ul>
</li>[/HTML]

若启用了 Javascript，菜单进入增强模式。这样菜单便不会显示在可视区域之外，点击该控件便可保持菜单的打开，直至您点击其他地方关闭菜单，而不只是 CSS 的鼠标移动在上面的时候打开的模式。

文本按钮

vBulletin 3 中的大按钮并不是很受欢迎。事实上它们的颜色是固定的，仅在默认的风格的背景颜色中才能反锯齿显示。这意味着它们不是很有灵活性，需要使用图像编辑器以及图像开发包来使之与背景色配合良好。

vBulletin 4 中，我放弃了基于图像的大按钮，而采用了完全 CSS 的标准文本超链接。基于 Gecko (Firefox) 和 Webkit (Safari, Chrome) 的浏览器可以获得 CSS 圆角效果，而所有流行的浏览器都可以使用 Alpha 透明的 PNG 按钮背景来获得非常漂亮的显示效果。



在某些情况下，按钮中仍然会使用图像，但是这些图像仅为了修饰按钮，而不是作为一整个按钮来使用。当这些图像被使用时，它们是 Alpha 透明的 PNG 图像，这样他们可以工作在任何颜色的按钮和背景中。这意味着在 vB4 中制作不同颜色的按钮和控件将变得更加容易。



快速管理高亮

在 vBulletin 3 中，有一个非常丑陋的 Javascript 函数来处理标记为需要管理的高亮显示的内容。它交换 alt1 和 alt2 背景色来显示需管理项目背景。vBulletin 4 省掉了这些复杂的代码，只是简单的将需要高亮的外部容器中添加了一个额外的 CSS 类。CSS 规则实现了这一实际可见的效果，您只需 (甚至无需) 为新的内容类型撰写高亮代码，不同的内容类型可以采用不同的方式来高亮显示。

[老鬼]

论坛跳转

以往的版本，论坛跳转菜单总是一个 <select> 菜单，这导致它的风格不能被完全控制。对于 vB4，论坛跳转菜单使用了新的弹出菜单系统，这样他便更容易被风格化。菜单中的项目使用了标准的超链接，因此您可以很容易添加自己的链接 (vB3 中这需要您为每个新链接撰写 PHP 处理代码)。

关闭状态...


打开状态...


论坛信息和选项

原来凌乱的论坛选项现在都被封装到了一个单独的元素中，包括论坛规则、图标图例、显示选项、正在浏览的用户和版主列表。它们看上去比原来的 vBulletin 更加清晰。



显示主题

我认为这是论坛中最重要的部分。

帖子

该页的设计应当强调重点 - 阅读帖子。

研究显示如果人们可以一路下来不被无关内容打断，阅读内容会变得更容易。vB3 相对于 vB2 的一个巨大变动便是将 postbit 从左侧显示用户信息、右侧显示帖子内容更改为上面显示用户信息，下面显示帖子内容的布局。而根据这一研究，我们放弃了 vB3 的设计，帖子显示回归传统两列。



但是，我进一步的将一些无关帖子阅读的内容弱化。最显著的是，回复/引用/编辑控件现在显示非常不明显，除非浏览者将鼠标移动到某个帖子上。之后，这些控件变会显示为完整的图标+文本的式样。若访问者仅对帖子阅读感兴趣，那么便不会激活这些控件，使阅读体验更加流畅。



主题信息

与版面显示页面类似，主题显示页面底部许多额外的信息现在都集中在了单一的一个框中。

表单

自从 vBulletin 3 风格第一次呈现给大家时，许多不同的页面便各自为政，采用了不同的表单控件。一个例子便是用户控制面板中的“发表新 x”页面和“编辑选项”页面。随着时间的流逝，越来越多的人添加到这些表单，我们便失去了 (如果我们曾经拥有) 表单的一致性。

vBulletin 4 中，我制作了通用表单控件布局库，以矫正这一问题。所有的 vBulletin 表单便可基于此来重建。它们的 HTML 代码极其简单，但是相关联的 CSS 规则使之非常漂亮、易使用和交互。

下面是几个例子:



依赖控件

在研究 vB3 存在的一些表单时，我发现几个实例，在某些选项被选中时，另外显示出来的控件是无用的。一个例子便是帖子编辑页面中的“删除帖子”控件。这里，我们有三个单选框和一个文本框。只有在单选框设置为“软删除”的情况下，文本框才有意义。



为了解决这一问题，我开发了“依赖控件”系统，可以指定仅在某个父控件活跃或设置为某个状态时，子控件才可使用。下面是一个依赖控件的示例，vB4 版本的“删除帖子”控件。



依赖控件系统自身依赖于 Javascript，但是若 Javascript 被禁用，表单仍能正常工作，但是不会根据依赖情况自动禁用或启用控件。

下面是另外几个依赖控件的例子:



还有一件事...

还有更多时间来为大家展示我建立的其他页面。日历是我最近制作的，现在采用了标签界面，来在年、月、周和日视图中切换。

月视图



周视图



添加新事件



一如既往，我期望着阅读您对我今天发表的文章的评论。

[活靶子]

一直被模仿，从未被超越.

[beiduo]

似乎挺漂亮的

[deadfire]

真不错真不错。真想研究研究他的css怎么写的。

[蓝色的信封]

不知道啥时候出来哦

[tintin]

唉。 好期待。快出來吧。