Top Forum Display Options

[Dunglx]

This is my first template mod that I am submitting publicly. Using what little HTML and CSS I know with my programming knowhow, I put this together. This isn't the best coding and looking to improve on it. Let me know how I did!

Tested on Vbulletin 4.0.7

Why was this mod made?

This mod was inspired by kira's Display Options Above Threads - as seen on vbulletin.org. I decide to make this mod since I could not find one for Vbulletin 4.


What does this mod do?

This mod simply places the Forum Display Options dropdowns that were originally placed towards the bottom of the forums and moves them above the forum threads. I find it easier to to have the Forum Display Options at the top so that users can easily sort topics, especially if prefixes are used like VBulletin.org. See attachments for preview.


Instructions

1. Go to the FORUMDISPLAY Template. To get to this, follow directions below:
Admin CP -> Styles & Templates -> Style Manager -> Click << >> on the theme -> Forum Display Templates -> FORUMDISPLAY

2. When inside FORUMDISPLAY, look for the following code:
Code:

<div class="collapse">
		<a class="collapse" id="collapse_forum_options" href="{vb:raw relpath}#top"><img src="{vb:stylevar imgdir_button}/collapse{vb:raw vbcollapse.collapseimg_info_options}_40b.png" alt="" /></a>
		<h4 class="forumoptiontitle"><span class="optiontitle">{vb:rawphrase thread_display_options}</span></h4>
	</div>

3. Delete code beginning at
Code:

<div class="collapse">
		<a class="collapse" id="collapse_forum_options" href="{vb:raw relpath}#top"><img src="{vb:stylevar imgdir_button}/collapse{vb:raw vbcollapse.collapseimg_info_options}_40b.png" alt="" /></a>
		<h4 class="forumoptiontitle"><span class="optiontitle">{vb:rawphrase thread_display_options}</span></h4>
	</div>

...


all the way to

Code:

...

<div class="options_input_wrapper">
				<div class="options_input_block">
					<div class="group">
						<input type="submit" class="button" value="{vb:rawphrase show_threads}" />
					</div>
				</div>
			</div>
		</form>
	</div>

4. After deleting the above code, find the following code:
Code:

<div id="pagetitle" class="pagetitle">
	<h1>{vb:rawphrase forum}: <span class="forumtitle">{vb:raw foruminfo.title}</span></h1>
	<vb:if condition="$foruminfo['description']"><p class="description">{vb:raw foruminfo.description}</p></vb:if>
</div>

5. Next, add the following code above <div id="pagetitle" class="pagetitle"> :
Note: This includes a <style> tag, so if your theme uses one already, just place that part in the code into your <style> tag.
Code:

<!----   Top Forum Display Options  ---->
<style>
#top_display_options {
  width: 550px ;
  margin-left: auto ;
  margin-right: auto ;
}
</style>

<div id="top_display_options">
	<form id="forum_display_options" action="forumdisplay.php" method="get">
		<table>
		<tbody>
		<tr>
		<td><div>
				<input type="hidden" name="s" value="{vb:raw session.sessionhash}" />
				<input type="hidden" name="f" value="{vb:raw forumid}" />
				<input type="hidden" name="page" value="{vb:raw pagenumber}" />
				<input type="hidden" name="pp" value="{vb:raw perpage}" />
				<vb:if condition="$prefix_options">
					<div class="options_input_block">
						<select name="prefixid" class="primary" id="sel_prefixid">
							<option value="" {vb:raw prefix_selected.anythread}>{vb:rawphrase any_thread_meta}</option>
							<!--
							<option value="-2" {vb:raw prefix_selected.anyprefix}>{vb:rawphrase any_prefix_meta}</option>
							<option value="-1" {vb:raw prefix_selected.none}>{vb:rawphrase no_prefix_meta}</option>
							-->
							{vb:raw prefix_options}
						</select>
						</div>
				</vb:if>
			</div></td>
			<td><div>
				<div class="options_input_block">
					<select class="primary" id="sel_daysprune" name="daysprune">
						<option value="1" {vb:raw daysprunesel.1}>{vb:rawphrase last_day}</option>
						<option value="2" {vb:raw daysprunesel.2}>{vb:rawphrase last_2_days}</option>
						<option value="7" {vb:raw daysprunesel.7}>{vb:rawphrase last_week}</option>
						<option value="10" {vb:raw daysprunesel.10}>{vb:rawphrase last_10_days}</option>
						<option value="14" {vb:raw daysprunesel.14}>{vb:rawphrase last_2_weeks}</option>
						<option value="30" {vb:raw daysprunesel.0}>{vb:rawphrase last_month}</option>
						<option value="45" {vb:raw daysprunesel.45}>{vb:rawphrase last_45_days}</option>
						<option value="60" {vb:raw daysprunesel.60}>{vb:rawphrase last_2_months}</option>
						<option value="75" {vb:raw daysprunesel.75}>{vb:rawphrase last_75_days}</option>
						<option value="100" {vb:raw daysprunesel.100}>{vb:rawphrase last_100_days}</option>
						<option value="365" {vb:raw daysprunesel.365}>{vb:rawphrase last_year}</option>
						<option value="-1" {vb:raw daysprunesel.all}>{vb:rawphrase beginning}</option>
					</select>
					</div></td>
				<td><div class="options_input_block">
					<select class="primary" id="sel_sort" name="sort">
						<option value="title" {vb:raw sort.title}>{vb:rawphrase thread_title}</option>
						<option value="lastpost" {vb:raw sort.lastpost}>{vb:rawphrase last_post_time}</option>
						<option value="dateline" {vb:raw sort.dateline}>{vb:rawphrase thread_start_time}</option>
						<option value="replycount" {vb:raw sort.replycount}>{vb:rawphrase number_of_replies}</option>
						<option value="views" {vb:raw sort.views}>{vb:rawphrase number_of_views}</option>
						<option value="postusername" {vb:raw sort.postusername}>{vb:rawphrase thread_starter}</option>
						<vb:if condition="$show['threadratings']"><option value="voteavg" {vb:raw sort.voteavg}>{vb:rawphrase thread_rating}</option></vb:if>
					</select>
					</div></td>
				<!-- Converting Radio to Dropdown -->
				<td><div class="options_input_block">
					<select class="primary" id="sel_order" name="order">
						<option value="ascending" {vb:raw order.asc}>{vb:rawphrase ascending}</option>
						<option value="descending" {vb:raw order.asc}>{vb:rawphrase descending}</option>
						</select>
					</div>
			</div></td>
			<td><div class="options_input_wrapper">
				<div class="options_input_block">
					<div class="group">
						<input type="submit" class="button" value="{vb:rawphrase show_threads}" />
					</div>
				</div>
			</div></td>
			</tr>
			</table>
	</form>
</div>

<!----   End Top Forum Display Options  ---->

6. You are done! Reload the theme and the Forum Display Option dropdowns will now be at the top.


Issues

The positioning isn't the greatest. I will try to see if I can make it look better.
The spacing between the dropdowns could be a bit further apart. I will try to fix it.


I will support this as best I can. Again, I do not know a lot of CSS or HTML.

P/s: đính kèm có tính minh hoạ ạ