vanillaforums.org-style diversification between announced Discussions and others

oliverraduner

Has anyone yet figured out, how one can display the Announced Discussions in a separate box on the very top (like here in the vanillaforums.org-discusions) rather than just atop of the discussions list?

When I was browsing the discussions-code, I figured out that basically there is no difference whether a post is announced or not. Only that it kinda "sorts" them to the top of the list and displays an inline "Announced"-infotext.
I could not figure out, how you can check before the box-HTML starts, whether to display the announced discussions first and with separate outer styling.

Thanks for any advice.

Stash

It's all done with CSS.

<h1 id="AnnouncementsHeading">Announcements</h1>
	<ul class="DataList Announcements">
		<li class="DiscussionRow Alt Announcement New"></li>
		<li class="DiscussionRow Announcement New"></li>
		<li class="DiscussionRow Alt Announcement"></li>
		<li class="DiscussionRow Announcement"></li>
		<li class="DiscussionRow Alt Announcement"></li>
		<li class="DiscussionRow Announcement"></li>
	</ul>
<h1>Discussions</h1>
	<ul class="DataList Discussions">
		<li class="DiscussionRow Alt New"></li>
		<li class="DiscussionRow"></li>
		<li class="DiscussionRow"></li>
		<li class="DiscussionRow New"></li>
		<li class="DiscussionRow"></li>
	</ul>

Looking very quickly with FireBug, it looks like they're styling the ul.Announcements to have a bottom margin.

From the site today, here are the relevant parts:

/* vanilla.css line 141 */

ul.Announcements {
	margin:0 0 20px;
	}

/* vanilla.css line 614 */

body.Drafts #Content h1,        /* <-- this one here! */
body.Discussion #Content h2,
body.Discussions #Content h1,
body.Categories #Content h1 {
	-moz-border-radius-topleft:3px;
	-moz-border-radius-topright:3px;
	background:url("grey_fade.png") repeat-x scroll left top #ECF0F9;
	border:1px solid #9CA7B8;
	padding:4px 8px;
	text-shadow:0 1px 0 #FFFFFF;
	}

/* vanilla.css line 628 */

ul.DataList  {
	-moz-border-radius-bottomleft:3px;
	-moz-border-radius-bottomright:3px;
	border-color:-moz-use-text-color #9CA7B8 #9CA7B8;
	border-right:1px solid #9CA7B8;
	border-style:none solid solid;
	border-width:0 1px 1px;
	}