X-Threads Garage?

[RateU]

Requirement: XThreads
Update: 23 Oct 2011
Maybe you can modify this example:

Edit/create a forum. XThreads settings:

1. Template Prefix: gf_ (Ooops! It is not Guardian Force in FF VIII though )
2. Show first post on every showthread page: Yes
3. Enable XThreads' Inline Forum Search: Yes
4. Allow Blank Post Message: Yes
5. Hide Forum: Yes
   We need to put this forum url manually in our templates (e.g: header template).
6. Custom WOL Text:
   • Forum Display: Viewing Garage
   • New Thread: Submit A New Vehicle
   • New Reply: Commenting <a href="{1}">{2}</a> Vehicle
   • Show Thread: Viewing <a href="{1}">{2}</a> Vehicle
     

Custom Thread Fields Setting:

1. Listbox for vehicles details layout:
   We will create two thread list layout. So, we need this to get the second layout. The only filtering fields here.
   Create a Custom Thread Fields with this settings:
   • Title: Browse Vehicle
   • Key: gfbv
   • Applicable Forums: 'select our garage forum'
   • Input Field Type: Listbox
   • Field Input Height: 1
   • Values List:
     
     Code:

     Browse Vehicle

     ---

   • Editable by / Required Field?: Everyone (required)
   • Display Order: 1
   • Allow Filtering: Yes
     
2. File Input for Vehicle Image:
   Create a Custom Thread Fields with this settings:
   • Title: Vehicle Image
   • Key: gfvimg
   • Applicable Forums: 'select our garage forum'
   • Input Field Type: File
   • Valid File Extensions: gif|png|jpg|jpeg
     Modify it as our needs. It is the extensions of image that can be uploaded.
   • Maximum File Size: 102400
     Modify it as our needs. It is a maximum file size (in bytes) that can be uploaded.
   • Editable by / Required Field?: Everyone (required)
   • Display Order: 2
   • Only accept uploaded images: Yes
   • Image Thumbnail Generation: 80x60|120x90|160x120
     Modify it as our needs. Depends on what thumbnails dimension we want to display for the image.
     
3. Textbox for Price:
   Create a Custom Thread Fields with this settings:
   • Title: Price
   • Key: gfprice
   • Applicable Forums: 'select our garage forum'
   • Field Input Width: 10
   • Editable by / Required Field?: Everyone
   • Display Order: 3
   • Blank Replacement Value : -
   • Display Format  :
     Code:

     $ <?=number_format({VALUE},2)?>

     ---

   • Text Mask Filter:
     Code:

     ^\d+(\.\d{2})?$

     ---

     Variable in template for displaying this field is: {$GLOBALS['threadfields']['gfprice']}.
     

4. Textbox for Odometer:
   Create a Custom Thread Fields with this settings:
   • Title: Odometer
   • Key: gfodometer
   • Applicable Forums: 'select our garage forum'
   • Field Input Width: 20
   • Editable by / Required Field?: Everyone
   • Display Order: 4
   • Blank Replacement Value : -
   • Display Format  :
     Code:

     <?=number_format({VALUE})?> Miles

     ---

   • Text Mask Filter:
     Code:

     ^\d+$

     ---

     Variable in template for displaying this field is: {$GLOBALS['threadfields']['gfodometer']}.
     

5. Listbox for vehicles color:
   Create a Custom Thread Fields with this settings:
   • Title: Color
   • Key: gfcolor
   • Applicable Forums: 'select our garage forum'
   • Input Field Type: Listbox
   • Field Input Height: 1
   • Values List:
     
     Code:

     Blue Black White Silver Custom

     ---

     Modify it as our needs.

   • Editable by / Required Field?: Everyone
   • Display Order: 5
     Variable in template for displaying this field is: {$GLOBALS['threadfields']['gfcolor']}.
     
6. File Input for additional vehicle image:
   Repeat this step as our needs. Use different key. e.g: gfvimg3, gfvimg4 and etc....
   Create a Custom Thread Fields with this settings:
   • Title: Vehicle Image #2
   • Key: gfvimg2
   • Applicable Forums: 'select our garage forum'
   • Input Field Type: File
   • Valid File Extensions: gif|png|jpg|jpeg
     Modify it as our needs. It is the extensions of image that can be uploaded.
   • Maximum File Size: 102400
     Modify it as our needs. It is a maximum file size (in bytes) that can be uploaded.
   • Editable by / Required Field?: Everyone
   • Only accept uploaded images: Yes
   • Image Thumbnail Generation: 160x120
     Modify it as our needs. Depends on what thumbnails dimension we want to display for the image.
   • Display Format :
     
     HTML Code

     <div class="float_left" style="margin: 5px; width: 180px; height: 140px;"><div align="center"><a href="{URL}" target="_blank"><img src="{URL}/thumb160x120" alt="Image 2" title="{$thread['subject']} Image 2" style="padding: 3px; border: 1px solid #CCCCCC;" /></a></div></div>

     ---

     Variable in template for displaying this field is: {$GLOBALS['threadfields']['gfvimg2']['value']}. If we repeat this step, we need to change the variable too, and place it in our gf_showthread template.
     In this example, we only use two additional vehicle images. So, the variable is: {$GLOBALS['threadfields']['gfvimg2']['value']} and {$GLOBALS['threadfields']['gfvimg3']['value']}.
     

7. File Input for modification image:
   Repeat this step as our needs. Use different key. e.g: gfmimg2, gfmimg3 and etc....
   Create a Custom Thread Fields with this settings:
   • Title: Modification Image #1
   • Key: gfmimg1
   • Applicable Forums: 'select our garage forum'
   • Input Field Type: File
   • Valid File Extensions: gif|png|jpg|jpeg
     Modify it as our needs. It is the extensions of image that can be uploaded.
   • Maximum File Size: 102400
     Modify it as our needs. It is a maximum file size (in bytes) that can be uploaded.
   • Editable by / Required Field?: Everyone
   • Only accept uploaded images: Yes
   • Image Thumbnail Generation: 160x120
     Modify it as our needs. Depends on what thumbnails dimension we want to display for the image.
   • Display Format :
     
     HTML Code

     <div class="float_left" style="margin: 5px; width: 180px; height: 140px;"><div align="center"><a href="{URL}" target="_blank"><img src="{URL}/thumb160x120" alt="Modification 1" title="{$thread['subject']} Modification 1" style="padding: 3px; border: 1px solid #CCCCCC;" /></a></div></div>

     ---

     Variable in template for displaying this field is: {$GLOBALS['threadfields']['gfmimg1']['value']}. If we repeat this step, we need to change the variable too, and place it in our gf_showthread template.
     In this example, we only use two modification images. So, the variable is: {$GLOBALS['threadfields']['gfmimg1']['value']} and {$GLOBALS['threadfields']['gfmimg2']['value']}.
     

Now, we need to create new templates in Global Template.
Admin CP -> Templates & Style -> Templates -> Global Templates:

1. Template Name: gf_forumdisplay_nothreads
   
   HTML Code

   <div><strong><em>{$lang->nothreads}</em></strong></div>

   ---

2. Template Name: gf_forumdisplay_searchforum_inline
   
   HTML Code

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

   <br class="clear" /> <table border="0" cellspacing="{$GLOBALS['theme']['borderwidth']}" cellpadding="{$GLOBALS['theme']['tablespace']}" class="tborder"> <tr> <td class="thead" colspan="{$colspan}"> <strong>Search Vehicles</strong> </td> </tr> <tr> <td class="trow1" align="center"> <form action="forumdisplay.php" method="get"> <input type="text" class="textbox" name="search" value="{$searchval}" /><br />{$gobutton} <input type="hidden" name="fid" value="{$fid}" /> <input type="hidden" name="sortby" value="{$sortby}" /> <input type="hidden" name="order" value="{$sortordernow}" /> <input type="hidden" name="datecut" value="{$datecut}" /> </form> </td> </tr> </table>

   ---

3. Template Name: gf_forumdisplay_sticky_sep
   
   HTML Code

   <div style="display: none;"></div>

   ---

4. Template Name: gf_forumdisplay_thread
   
   HTML Code

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

   <div class="float_left" style="width: 49%;{$filters_set['__all']['hiddencss']}"> <div style="text-align: center; width: 80%; margin: auto auto;"> <div style="height: 100px; vertical align: middle;"> <a href="{$threadurl}"><img src="<img src="<img src="{$GLOBALS['threadfields']['gfvimg']['thumbs']['120x90']['url']}" alt="View {$thread['subject']}" title="View {$thread['subject']}" /></a> </div> <span><a href="{$thread['threadlink']}">{$thread['subject']}</a>{$thread['multipage']}</span> <div class="author smalltext">Owner: {$thread['profilelink']}</div> <div class="author smalltext">Added: {$thread['threaddate']} &ndash; {$thread['threadtime']}</div> </div> </div> <div style="{$filters_set['__all']['visiblecss']}"> <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="border: 0px;"> <tr> {$rating} <td class="tcat smalltext" align="center" colspan="{$colspan}"> <strong><a href="{$thread['threadlink']}" class="{$inline_edit_class} {$new_class}" id="tid_{$inline_edit_tid}">{$thread['subject']}</a></strong> </td> {$modbit} </tr> <tr> <td class="{$bgcolor} smalltext" rowspan="2" width="1" align="center" valign="middle"> <a href="{$threadurl}"><img src="{$GLOBALS['threadfields']['gfvimg']['thumbs']['120x90']['url']}" alt="View {$thread['subject']}" title="View {$thread['subject']}" /></a> </td> <td class="{$bgcolor}" colspan="4"> <div>Owner: {$thread['profilelink']}</div> <div>Added: {$thread['threaddate']} &ndash; {$thread['threadtime']}</div> </td> </tr> <tr> <td class="{$bgcolor} smalltext" align="center" height="25"> Comments: <a href="javascript:MyBB.whoPosted({$thread['tid']});">{$thread['replies']}</a>{$unapproved_posts} </td> <td class="{$bgcolor} smalltext" align="center" width="25%"> Odometer: {$GLOBALS['threadfields']['gfodometer']} </td> <td class="{$bgcolor} smalltext" align="center" width="15%"> Views: {$thread['views']} </td> <td class="{$bgcolor} smalltext" align="center" width="15%"> Price: {$GLOBALS['threadfields']['gfprice']} </td> </tr> </table> </div>

   ---

5. Template Name: gf_forumdisplay_threadlist
   
   HTML Code

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132

   <div class="float_left"> {$multipage} </div> <div class="float_right"> {$newthread} </div> <table width="100%" border="0"> <tr> <td width="200" valign="top"> <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder"> <tr> <td class="thead" colspan="{$colspan}"> <strong>{$foruminfo['name']}</strong> </td> </tr> <tr> <td class="tcat"> <strong>{$GLOBALS['threadcount']} Vehicles</strong> </td> {$inlinemodcol} </tr> <tr> <td class="trow1" colspan="{$colspan}"> <strong><a href="{$forumurl}">Garage Home</a></strong> </td> </tr> <tr> <td class="trow1" colspan="{$colspan}"> <strong><a href="{$forumurl_q}filtertf_gfbv=Browse Vehicle">Vehicles Details</a></strong> </td> </tr> </table> <br /> <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder"> <tr> <td class="thead"> <strong>Sort By</strong> </td> </tr> <tr> <td class="trow1"> <strong><a href="{$sorturl}&amp;sortby=subject&amp;order=asc">{$lang->thread}</a> {$orderarrow['subject']}</strong> </td> </tr> <tr> <td class="trow1"> <strong><a href="{$sorturl}&amp;sortby=starter&amp;order=asc">{$lang->author}</a> {$orderarrow['starter']}</strong> </td> </tr> <tr> <td class="trow1"> <strong><a href="{$sorturl}&amp;sortby=replies&amp;order=desc">{$lang->replies}</a> {$orderarrow['replies']}</strong> </td> </tr> <tr> <td class="trow1"> <strong><a href="{$sorturl}&amp;sortby=views&amp;order=desc">{$lang->views}</a> {$orderarrow['views']}</strong> </td> </tr> {$ratingcol} <tr> <td class="trow1"> <strong><a href="{$sorturl}&amp;sortby=lastpost&amp;order=desc">{$lang->lastpost}</a> {$orderarrow['lastpost']}</strong> </td> </tr> </table> {$searchforum} </td> <td valign="top"> <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="{$filters_set['__all']['visiblecss']}"> <tr> <td class="thead"> <strong>{$foruminfo['name']} &ndash; Vehicles Details</strong> </td> </tr> </table> {$threads}{$nullthreads} <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="{$filters_set['__all']['visiblecss']}"> <tr> <td class="tfoot" align="right" colspan="{$colspan}"> <form action="forumdisplay.php" method="get"> <input type="hidden" name="fid" value="{$fid}" /> <select name="sortby"> <option value="subject" {$sortsel['subject']}>{$lang->sort_by_subject}</option> <option value="lastpost" {$sortsel['lastpost']}>{$lang->sort_by_lastpost}</option> <option value="starter" {$sortsel['starter']}>{$lang->sort_by_starter}</option> <option value="started" {$sortsel['started']}>{$lang->sort_by_started}</option> {$ratingsort} <option value="replies" {$sortsel['replies']}>{$lang->sort_by_replies}</option> <option value="views" {$sortsel['views']}>{$lang->sort_by_views}</option> </select> <select name="order"> <option value="asc" {$ordersel['asc']}>{$lang->sort_order_asc}</option> <option value="desc" {$ordersel['desc']}>{$lang->sort_order_desc}</option> </select> <select name="datecut"> <option value="1" {$datecutsel['1']}>{$lang->datelimit_1day}</option> <option value="5" {$datecutsel['5']}>{$lang->datelimit_5days}</option> <option value="10" {$datecutsel['10']}>{$lang->datelimit_10days}</option> <option value="20" {$datecutsel['20']}>{$lang->datelimit_20days}</option> <option value="50" {$datecutsel['50']}>{$lang->datelimit_50days}</option> <option value="75" {$datecutsel['75']}>{$lang->datelimit_75days}</option> <option value="100" {$datecutsel['100']}>{$lang->datelimit_100days}</option> <option value="365" {$datecutsel['365']}>{$lang->datelimit_lastyear}</option> <option value="9999" {$datecutsel['9999']}>{$lang->datelimit_beginning}</option> </select> {$gobutton} </form> </td> </tr> </table> <div class="float_right" style="margin-top: 4px;{$filters_set['__all']['visiblecss']}"> {$newthread} </div> </td> </tr> </table> <div class="float_left"> {$multipage} </div> <br style="clear: both;" /> <br /> <div class="float_right" style="text-align: right;"> {$inlinemod} {$forumjump} </div> <br style="clear: both" /> <div class="smalltext" align="center"> Garage Forum<br /> Powered By <a href="http://mybbhacks.zingaburga.com">XThreads</a> - <a href="http://mybbhacks.zingaburga.com">MyBB Hacks</a> </div> {$inline_edit_js}

   ---

6. Template Name: gf_forumdisplay_threadlist_rating
   
   HTML Code

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

   <tr> <td class="trow1"> <strong><a href="{$sorturl}&amp;sortby=rating&amp;order=desc">{$lang->rating}</a> {$orderarrow['rating']}</strong> <script type="text/javascript" src="jscripts/rating.js?ver=1400"></script> <script type="text/javascript"> <!-- lang.stars = new Array(); lang.stars[1] = "{$lang->one_star}"; lang.stars[2] = "{$lang->two_stars}"; lang.stars[3] = "{$lang->three_stars}"; lang.stars[4] = "{$lang->four_stars}"; lang.stars[5] = "{$lang->five_stars}"; // --> </script> </td> </tr>

   ---

7. Template Name: gf_forumdisplay_threads_sep
   
   HTML Code

   <div style="display: none;"></div>

   ---

8. Template Name: gf_forumdisplay_thread_modbit
   
   HTML Code

   <td class="{$bgcolor}" align="center" style="width: 1px; white-space: nowrap" rowspan="3"><input type="checkbox" class="checkbox" name="inlinemod_{$multitid}" id="inlinemod_{$multitid}" value="1" {$inlinecheck} /></td>

   ---

9. Template Name: gf_forumdisplay_thread_rating
   
   HTML Code

   1 2 3 4 5 6 7 8 9 10

   <td align="center" class="tcat" id="rating_table_{$thread['tid']}"> <ul class="star_rating{$not_rated}" id="rating_thread_{$thread['tid']}"> <li style="width: {$thread['width']}%" class="current_rating" id="current_rating_{$thread['tid']}">{$ratingvotesav}</li> </ul> <script type="text/javascript"> <!-- Rating.build_forumdisplay({$thread['tid']}, { width: '{$thread['width']}', extra_class: '{$not_rated}', current_average: '{$ratingvotesav}' }); // --> </script> </td>

   ---

10. Template Name: gf_postbit_first
    
    HTML Code

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73

    {$ignore_bit} <a name="pid{$post['pid']}" id="pid{$post['pid']}"></a> <table border="0" cellspacing="0" cellpadding="{$theme['tablespace']}" class="tborder" style="{$post_extra_style} {$post_visibility}" id="post_{$post['pid']}"> <tbody> <tr> <td class="tcat" colspan="2"> <div class="float_left smalltext"> <strong>{$thread['subject']} &ndash; Overview</strong> <span id="edited_by_{$post['pid']}">{$post['editedmsg']}</span> </div> {$post['posturl']} </td> </tr> <tr> <td class="trow1 {$unapproved_shade}" valign="top"> <table width="100%" border="0"> <tr> <td width="150">Owner</td> <td width="1">:</td> <td>{$post['profilelink']}</td> </tr> <tr> <td width="150">Data Added</td> <td width="1">:</td> <td>{$thread['threaddate']} &ndash; {$thread['threadtime']}</td> </tr> <tr> <td width="150">Views</td> <td width="1">:</td> <td>{$thread['views']}</td> </tr> <tr> <td width="150">Color</td> <td width="1">:</td> <td>{$GLOBALS['threadfields']['gfcolor']}</td> </tr> <tr> <td width="150">Price</td> <td width="1">:</td> <td>{$GLOBALS['threadfields']['gfprice']}</td> </tr> <tr> <td width="150">Odometer</td> <td width="1">:</td> <td>{$GLOBALS['threadfields']['gfodometer']}</td> </tr> </table> </td> <td class="trow1 {$unapproved_shade}" width="1" valign="middle" align="center"> <a href="{$GLOBALS['threadfields']['gfvimg']['url']}" target="_blank"><img src="{$GLOBALS['threadfields']['gfvimg']['thumbs']['160x120']['url']}" alt="{$post['subject']}" title="{$post['subject']}" /></a> </td> </tr> <tr> <td colspan="2" class="trow1 {$unapproved_shade}"> <div class="post_body" id="pid_{$post['pid']}"> {$post['message']} </div> <div class="post_meta" id="post_meta_{$post['pid']}"> {$post['iplogged']} </div> </td> </tr> <tr> <td class="trow1 post_buttons {$unapproved_shade}" colspan="2"> <div class="author_buttons float_left"> {$post['button_email']}{$post['button_pm']}{$post['button_www']}{$post['button_find']} </div> <div class="post_management_buttons float_right">{$post['button_edit']}{$post['button_quickdelete']}{$post['button_quote']}{$post['button_multiquote']}{$post['button_report']}{$post['button_warn']}{$post['button_reply_pm']}{$post['button_replyall_pm']}{$post['button_forward_pm']}{$post['button_delete_pm']} </div> </td> </tr> </tbody> </table>

    ---

11. Template Name: gf_postbit_first_classic
    
    HTML Code

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73

    {$ignore_bit} <a name="pid{$post['pid']}" id="pid{$post['pid']}"></a> <table border="0" cellspacing="0" cellpadding="{$theme['tablespace']}" class="tborder" style="{$post_extra_style} {$post_visibility}" id="post_{$post['pid']}"> <tbody> <tr> <td class="tcat" colspan="2"> <div class="float_left smalltext"> <strong>{$thread['subject']} &ndash; Overview</strong> <span id="edited_by_{$post['pid']}">{$post['editedmsg']}</span> </div> {$post['posturl']} </td> </tr> <tr> <td class="trow1 {$unapproved_shade}" valign="top"> <table width="100%" border="0"> <tr> <td width="150">Owner</td> <td width="1">:</td> <td>{$post['profilelink']}</td> </tr> <tr> <td width="150">Data Added</td> <td width="1">:</td> <td>{$thread['threaddate']} &ndash; {$thread['threadtime']}</td> </tr> <tr> <td width="150">Views</td> <td width="1">:</td> <td>{$thread['views']}</td> </tr> <tr> <td width="150">Color</td> <td width="1">:</td> <td>{$GLOBALS['threadfields']['gfcolor']}</td> </tr> <tr> <td width="150">Price</td> <td width="1">:</td> <td>{$GLOBALS['threadfields']['gfprice']}</td> </tr> <tr> <td width="150">Odometer</td> <td width="1">:</td> <td>{$GLOBALS['threadfields']['gfodometer']}</td> </tr> </table> </td> <td class="trow1 {$unapproved_shade}" width="1" valign="middle" align="center"> <a href="{$GLOBALS['threadfields']['gfvimg']['url']}" target="_blank"><img src="{$GLOBALS['threadfields']['gfvimg']['thumbs']['160x120']['url']}" alt="{$post['subject']}" title="{$post['subject']}" /></a> </td> </tr> <tr> <td colspan="2" class="trow1 {$unapproved_shade}"> <div class="post_body" id="pid_{$post['pid']}"> {$post['message']} </div> <div class="post_meta" id="post_meta_{$post['pid']}"> {$post['iplogged']} </div> </td> </tr> <tr> <td class="trow1 post_buttons {$unapproved_shade}" colspan="2"> <div class="author_buttons float_left"> {$post['button_email']}{$post['button_pm']}{$post['button_www']}{$post['button_find']} </div> <div class="post_management_buttons float_right">{$post['button_edit']}{$post['button_quickdelete']}{$post['button_quote']}{$post['button_multiquote']}{$post['button_report']}{$post['button_warn']}{$post['button_reply_pm']}{$post['button_replyall_pm']}{$post['button_forward_pm']}{$post['button_delete_pm']} </div> </td> </tr> </tbody> </table>

    ---

12. Template Name: gf_showthread
    
    HTML Code

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193

    <html> <head> <title>{$thread['subject']}</title> {$headerinclude} <script type="text/javascript"> <!-- var quickdelete_confirm = "{$lang->quickdelete_confirm}"; // --> </script> <script type="text/javascript" src="jscripts/thread.js?ver=1400"></script> <script type="text/javascript" src="jscripts/jquery-1.3.2.min.js"></script> <script type="text/javascript"> $.noConflict(); </script> <style type="text/css"> .at {background: #026CB1 url(images/thead_bg.gif) top left repeat-x;color: #ffffff;} #image, #mod, #details {display: none;} </style> </head> <body> {$header} {$pollbox} <div class="float_left"> {$multipage} </div> <div class="float_right"> {$newreply} </div> <br style="clear: both;" /> <table border="0" width="100%"> <tr> <td width="200" valign="top"> <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder"> <tr> <td class="thead"> <strong>{$forum['name']}</strong> </td> </tr> <tr> <td class="trow1" colspan="{$colspan}"> <strong><a href="{$forumurl}">Garage Home</a></strong> </td> </tr> <tr> <td class="trow1" colspan="{$colspan}"> <strong><a href="{$forumurl_q}filtertf_gfbv=Browse Vehicle">Vehicle Details</a></strong> </td> </tr> </table> {$search_thread} </td> <td valign="top"> <script type="text/javascript"> jQuery(document).ready(function($){ $('.tab').click(function(){ $('.at').removeClass('at'); $(this).addClass('at'); $('.content').slideUp(); var catshow = $(this).attr('abbr'); $('#'+ catshow).slideDown(); }); }); </script> <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="clear: both; border-bottom-width: 0;"> <tr> <td class="tcat at tab" title="Overview" style="cursor: pointer; text-align: center;" abbr="overview"> <strong>Overview</strong> </td> <td class="tcat tab" title="Images" style="cursor: pointer; text-align: center;" abbr="image"> <strong>Images</strong> </td> <td class="tcat tab" title="Vehicle Modification" style="cursor: pointer; text-align: center;" abbr="mod"> <strong>Modification</strong> </td> <td class="tcat tab" title="Vehicle Details" style="cursor: pointer; text-align: center;" abbr="details"> <strong>Details</strong> </td> </tr> </table> <table border="0" cellspacing="0" cellpadding="{$theme['tablespace']}" class="tborder" style="clear: both; border-bottom-width: 0; border-top-width: 0;"> <tr> <td class="thead" colspan="2"> {$ratethread} <strong><a href="{$threadurl}">{$thread['subject']}</a></strong> </td> </tr> </table> <div id="overview" class="content"> {$first_post} </div> <div id="image" class="content"> <table border="0" cellspacing="0" cellpadding="{$theme['tablespace']}" class="tborder"> <tr> <td class="tcat"> <div class="float_left smalltext"> <strong>{$thread['subject']} - Images</strong> </div> </td> </tr> <tr> <td class="trow1" align="center"> {$GLOBALS['threadfields']['gfvimg2']['value']}{$GLOBALS['threadfields']['gfvimg3']['value']} </td> </tr> </table> </div> <div id="mod" class="content"> <table border="0" cellspacing="0" cellpadding="{$theme['tablespace']}" class="tborder"> <tr> <td class="tcat"> <div class="float_left smalltext"> <strong>{$thread['subject']} - Modification</strong> </div> </td> </tr> <tr> <td class="trow1" align="center"> {$GLOBALS['threadfields']['gfmimg1']['value']}{$GLOBALS['threadfields']['gfmimg2']['value']} </td> </tr> </table> </div> <div id="details" class="content"> <table border="0" cellspacing="0" cellpadding="{$theme['tablespace']}" class="tborder"> <tr> <td class="tcat" colspan="3"> <div class="float_left smalltext"> <strong>{$thread['subject']} - Details</strong> </div> </td> </tr> <tr> <td class="trow1" width="150">Data Added</td> <td class="trow1" width="1">:</td> <td class="trow1">{$thread['threaddate']} - {$thread['threadtime']}</td> </tr> <tr> <td class="trow1" width="150">Views</td> <td class="trow1" width="1">:</td> <td class="trow1">{$thread['views']}</td> </tr> <tr> <td class="trow1" width="150">Color</td> <td class="trow1" width="1">:</td> <td class="trow1">{$GLOBALS['threadfields']['gfcolor']}</td> </tr> <tr> <td class="trow1" width="150">Price</td> <td class="trow1" width="1">:</td> <td class="trow1">{$GLOBALS['threadfields']['gfprice']}</td> </tr> <tr> <td class="trow1" width="150">Odometer</td> <td class="trow1" width="1">:</td> <td class="trow1">{$GLOBALS['threadfields']['gfodometer']}</td> </tr> </table> </div> <br class="clear" /> <div align="center"> <strong>&laquo; <a href="{$next_oldest_link}">{$lang->next_oldest}</a> | <a href="{$next_newest_link}">{$lang->next_newest}</a> &raquo;</strong> </div> <br class="clear" /> <strong>Comments</strong> <div id="posts"> {$posts} </div> <div class="float_left"> {$multipage} </div> <div style="padding-top: 4px;" class="float_right"> {$newreply} </div> <br style="clear: both;" /> {$quickreply} {$threadexbox} {$similarthreads} <br /> <div class="float_right" style="text-align: right;"> {$moderationoptions} {$forumjump} </div> </td> </tr> </table> <br style="clear: both;" /> <div class="smalltext" align="center"> Garage Forum<br /> Powered By <a href="http://mybbhacks.zingaburga.com">XThreads</a> - <a href="http://mybbhacks.zingaburga.com">MyBB Hacks</a> </div> {$footer} </body> </html>

    ---

    Well, we are using jQuery tabs here. Not the best jQuery tabs. If you have other jQuery or other javascript framework tabs, use it. Personally, I prefer to use MyBb tabs. But it is a bit hard to control (for me ) If we don't have jQuery yet, we need to download, and upload it to our jscripts folder. Or, we can use google libraries. but if we already have jQuery attached in our forum and "works" in showthread page, remove line #11 - #14. I get this jQuery tabs from this post: http://community.mybb.com/thread-62039.html Funny story....

13. Template Name: gf_showthread_noreplies
    
    HTML Code

    1 2 3 4 5 6 7 8 9 10

    <br class="clear" /> <div id="xthreads_noreplies"> <table border="0" cellspacing="{$GLOBALS['theme']['borderwidth']}" cellpadding="{$GLOBALS['theme']['tablespace']}" class="tborder"> <tr> <td class="tcat"> <em><strong>No comments yet</strong></em> </td> </tr> </table> </div>

    ---

14. Template Name: gf_showthread_ratethread
    
    HTML Code

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

    <div class="float_right"> <script type="text/javascript" src="jscripts/rating.js?ver=1400"></script> <div id="success_rating_{$thread['tid']}" style="float: left; padding-top: 2px; padding-right: 10px;">&nbsp;</div> <strong style="float: left; padding-right: 10px;">{$lang->thread_rating}</strong> <div class="inline_rating"> <ul class="star_rating{$not_rated}" id="rating_thread_{$thread['tid']}"> <li style="width: {$thread['width']}%" class="current_rating" id="current_rating_{$thread['tid']}">{$ratingvotesav}</li> <li><a class="one_star" title="{$lang->one_star}" href="./ratethread.php?tid={$thread['tid']}&amp;rating=1&amp;my_post_key={$mybb->post_code}">1</a></li> <li><a class="two_stars" title="{$lang->two_stars}" href="./ratethread.php?tid={$thread['tid']}&amp;rating=2&amp;my_post_key={$mybb->post_code}">2</a></li> <li><a class="three_stars" title="{$lang->three_stars}" href="./ratethread.php?tid={$thread['tid']}&amp;rating=3&amp;my_post_key={$mybb->post_code}">3</a></li> <li><a class="four_stars" title="{$lang->four_stars}" href="./ratethread.php?tid={$thread['tid']}&amp;rating=4&amp;my_post_key={$mybb->post_code}">4</a></li> <li><a class="five_stars" title="{$lang->five_stars}" href="./ratethread.php?tid={$thread['tid']}&amp;rating=5&amp;my_post_key={$mybb->post_code}">5</a></li> </ul> </div> </div>

    ---

15. Template Name: gf_showthread_search
    
    HTML Code

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

    <br class="clear" /> <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder"> <tr> <td class="thead"> <strong>Search Comments</strong> </td> </tr> <tr> <td class="trow1" align="center"> <form action="search.php" method="post"> <input type="hidden" name="action" value="thread" /> <input type="hidden" name="tid" value="{$thread['tid']}" /> <input type="text" name="keywords" value="{$lang->enter_keywords}" onfocus="if(this.value == '{$lang->enter_keywords}') { this.value = ''; }" onblur="if(this.value=='') { this.value='{$lang->enter_keywords}'; }" class="textbox" size="25" /> <br /><input type="submit" class="button" value="{$lang->search_thread}" /> </form> </td> </tr> </table>

    ---

I've repeated many fields in this example, like in the overview tab and details tab. Just modify it. Template above based on MyBB 1.4 template.

Logs:
05 Oct 2010

Screenshots:
Thread List:
We have "two" thread list layout there
       

Show thread:
Like I said before, I've repeated many fields here. Just modify it.
               

Live Demo:
http://xtest.byethost7.com/forumdisplay.php?fid=8 (you can test it here)
http://www.7173mustangs.com/forum-garage