vb.org Archive
Page 1 of 2 1 2
Show 40 post(s) from this thread on one page

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vBulletin 4.x Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=246)
-   -   Forum Display Enhancements - Top Forum Display Options (https://vborg.vbsupport.ru/showthread.php?t=254760)

BRimagination 12-05-2010 10:00 PM
Top Forum Display Options
 
1 Attachment(s)
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.

tafreeh 12-08-2010 12:01 AM
good one..
Question: is this gonna effect SEO ?

BRimagination 12-08-2010 02:11 PM
To be perfectly honest, I do not know and I do not have enough experience with VBulletin or SEO to answer for certain. I am still learning all the terminology and functions so please bear with me.

Drache 08-31-2011 05:50 AM
This code doesn't center. I mean the buttons doesn't move to center in firefox. Is there a way to fix it?

maupassant 11-24-2011 06:37 PM
Quote:
Originally Posted by Drache (Post 2240306)
This code doesn't center. I mean the buttons doesn't move to center in firefox. Is there a way to fix it?
Agreed, and it also doesn't work with Prefixes on.

fxdigi-cash 05-28-2013 04:26 PM
Thanks for the code. works great on vb.4.2 and vb.4.2.1

Update: yes, there is an issue with centering the code in FF browser...

will check to find a solution

hoangserip 06-03-2013 05:25 PM
thanks, good job

maupassant 06-26-2013 02:20 AM
Does anyone have a solution to center the code in Firefox ?

fxdigi-cash 07-04-2013 08:12 AM
1 Attachment(s)
I made it to different way than the code above and would like to share it with you all. Thanks maupassant for the reminder... :)

Here is the screenshot (attached to this post) of what you will have on top of your forums...


Ok, start with opening the template forumdisplay

find:

PHP Code:
<div id="forum_options" class="forum_info_form_block"> 
copy the code below from :
PHP Code:
[B]<div id="forum_options" class="forum_info_form_block">
<form> .............. 
...........
.......
</form>
</div>[/B] 
You should have this code removed, means cute it "no copy if you want to change its place to the top of the forum"...
PHP Code:
<div id="forum_options" class="forum_info_form_block">
<form id="forum_display_options" action="{vb:raw $vboptions.vbforum_url}{vb:if "$vboptions['vbforum_url']", '/', ''}forumdisplay.php" method="get" class="forum_info_form blockbody formcontrols floatcontainer">
            <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}" />
            <div>
                <div class="options_input_block">
                    <label for="sel_daysprune">{vb:rawphrase show_threads_from_the}</label>
                    <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.30}>{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>
                    <p class="description">{vb:rawphrase use_control_to_limit_threads}</p>
                </div>
                <div class="options_input_block">
                    <label for="sel_sort">{vb:rawphrase sort_threads_by}</label>
                    <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>
                    <p class="description">{vb:rawphrase sort_threads_by_description}</p>
                </div>
                <vb:if condition="$prefix_options">
                <div class="options_input_block">
                    <label for="sel_prefixid">{vb:rawphrase prefix}</label>
                    <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>
                    <p class="description">{vb:rawphrase select_threads_with_prefix_description}</p>
                </div>
                </vb:if>
                <!-- Group of Radio Buttons -->
                <div class="options_input_block">
                    <p class="label">{vb:rawphrase order_threads_in}</p>
                    <ul class="checkradio group">
                        <li><label for="radio_asc"><input type="radio" name="order" id="radio_asc" value="asc" {vb:raw order.asc} /> {vb:rawphrase ascending}</label></li>
                        <li><label for="radio_dsc"><input type="radio" name="order" id="radio_dsc" value="desc" {vb:raw order.desc} /> {vb:rawphrase descending}</label></li>
                    </ul>
                    <p class="description">{vb:rawphrase order_threads_note}</p>
                </div>
                {vb:raw template_hook.forumdisplay_filters}
            </div>
            <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> 
Then paste the code below this code directly here:

PHP Code:
<div id="threadpagestats" class="threadpagestats">{vb:rawphrase showing_threads_x_to_y_of_z, {vb:raw limitlower}, {vb:raw limitupper}, {vb:raw totalthreads}}</div>
    </div>
    </vb:if>
</div> 
Save your work and you are done...:)

As you know that it is possible to change the radio button options to be drop menu, but I'm a little busy now so I might drop by later and do it if no one did it...

Good luck

fxdigi-cash

maupassant 07-04-2013 05:21 PM
O.K. You lost me right from the start. I don't have
PHP Code:
<div id="forum_options" class="forum_info_form_block"> 
I have
PHP Code:
<div id="forum_info_options" class="forum_info block"> 


All times are GMT. The time now is 04:12 PM.
Page 1 of 2 1 2
Show 40 post(s) from this thread on one page

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01250 seconds
  • Memory Usage 1,888KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (5)bbcode_code_printable
  • (6)bbcode_php_printable
  • (1)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (1)pagenav_pagelink
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (10)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 
Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.php 
Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • printthread_start
  • pagenav_page
  • pagenav_complete
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete