Clickable Thread Listing?

DRE

Well-known member
You know when you click on a subforum and see the list of threads. Instead of having to click the thread title to enter the thread, how can you click on the list to enter the thread? You can see this effect on Russ Mobile theme for instance. I'm trying to do this on the default xenforo skin. I spent all night last night and this morning trying to get this to work.
 
I think you would need to make the entire content inside the li tag of each thread listing one single link, then use display block. Otherwise it will just fit to available space.
 
It can be done. I already did it to the forum listing. Just having trouble with the thread listing.

Here it is working on my forum home: http://www.8thos.com/board

The whole point of this is so that topics are easily clickable from a mobile phone.
Understood, If you don't care about the moderator edit link and being able to click the username I can give you that when I get to my computer. It requires a template edit and some css.
 
First make a backup of thread_list_item.
Then ->
In thread_list_item find the entire div <div class="listBlock main">

Replace it with:
HTML:
    <a href="{xen:link "threads{xen:if '{$thread.isNew} AND {$thread.haveReadData}', '/unread'}", $thread}"
                    title="{xen:if '{$thread.isNew} AND {$thread.haveReadData}', {xen:phrase go_to_first_unread_message}}"
                    class="{xen:if $thread.hasPreview, PreviewTooltip}"
                    data-previewUrl="{xen:if $thread.hasPreview, {xen:link threads/preview, $thread}}" class="fullDivLink">
        <div class="listBlock main">
            <div class="titleText">
                <h3 class="title">
                    <xen:if is="{$thread.canInlineMod}"><input type="checkbox" name="threads[]" value="{$thread.thread_id}" class="InlineModCheck" id="inlineModCheck-thread-{$thread.thread_id}" data-target="#thread-{$thread.thread_id}" title="{xen:phrase select_thread}: '{$thread.title}'" /></xen:if>
                    <xen:if is="{$showSubscribeOptions}"><input type="checkbox" name="thread_ids[]" value="{$thread.thread_id}" /></xen:if>
                    <xen:if is="{$thread.prefix_id}">
                        <xen:if is="{$linkPrefix}">
                            {xen:helper threadPrefix, $thread, html, ''}
                        <xen:else />
                            {xen:helper threadPrefix, $thread}
                        </xen:if>
                    </xen:if>
                    {xen:helper wrap, $thread.title, 50}
                </h3>
 
                <xen:if hascontent="true">
                    <div class="iconKey">
                    <xen:contentcheck>
                        <xen:hook name="thread_list_item_icon_key" params="{xen:array 'thread={$thread}'}">
                        <xen:if is="{$thread.isModerated}"><span class="moderated" title="{xen:phrase moderated}">{xen:phrase moderated}</span></xen:if>
                        <xen:if is="!{$thread.discussion_open}"><span class="locked" title="{xen:phrase locked}">{xen:phrase locked}</span></xen:if>
                        <xen:if is="{$thread.sticky}"><span class="sticky" title="{xen:phrase sticky}">{xen:phrase sticky}</span></xen:if>
                        <xen:if is="{$thread.isRedirect}"><span class="redirect" title="{xen:phrase redirect}">{xen:phrase redirect}</span></xen:if>
                        </xen:hook>
                    </xen:contentcheck>
                    </div>
                </xen:if>
 
                <div class="secondRow">
                    <div class="posterDate muted">
                        <xen:username user="$thread" title="{xen:phrase thread_starter}" />,
                        <xen:datetime time="$thread.post_date" title="{xen:if {$visitor.user_id}, '{xen:phrase go_to_first_message_in_thread}'}" /><xen:if is="{$showForumLink}">,
                        {$thread.forum.title}</xen:if>
 
                        <xen:if is="{$showLastPageNumbers} AND {$thread.lastPageNumbers}">
                            <span class="itemPageNav">
                                <span>...</span>
                                <xen:foreach loop="$thread.lastPageNumbers" value="$pageNumber">
                                    {$pageNumber}
                                </xen:foreach>
                            </span>
                        </xen:if>
                    </div>
                </div>
            </div>
        </div>
    </a>

Add to EXTRA.css
HTML:
.fullDivLink
{
    display:block;
}
.fullDivLink .listBlock.main
{
    width:100%;
}
That worked on my default skin.
 
First make a backup of thread_list_item.
Then ->
In thread_list_item find the entire div <div class="listBlock main">

Replace it with:
HTML:
    <a href="{xen:link "threads{xen:if '{$thread.isNew} AND {$thread.haveReadData}', '/unread'}", $thread}"
                    title="{xen:if '{$thread.isNew} AND {$thread.haveReadData}', {xen:phrase go_to_first_unread_message}}"
                    class="{xen:if $thread.hasPreview, PreviewTooltip}"
                    data-previewUrl="{xen:if $thread.hasPreview, {xen:link threads/preview, $thread}}" class="fullDivLink">
        <div class="listBlock main">
            <div class="titleText">
                <h3 class="title">
                    <xen:if is="{$thread.canInlineMod}"><input type="checkbox" name="threads[]" value="{$thread.thread_id}" class="InlineModCheck" id="inlineModCheck-thread-{$thread.thread_id}" data-target="#thread-{$thread.thread_id}" title="{xen:phrase select_thread}: '{$thread.title}'" /></xen:if>
                    <xen:if is="{$showSubscribeOptions}"><input type="checkbox" name="thread_ids[]" value="{$thread.thread_id}" /></xen:if>
                    <xen:if is="{$thread.prefix_id}">
                        <xen:if is="{$linkPrefix}">
                            {xen:helper threadPrefix, $thread, html, ''}
                        <xen:else />
                            {xen:helper threadPrefix, $thread}
                        </xen:if>
                    </xen:if>
                    {xen:helper wrap, $thread.title, 50}
                </h3>
 
                <xen:if hascontent="true">
                    <div class="iconKey">
                    <xen:contentcheck>
                        <xen:hook name="thread_list_item_icon_key" params="{xen:array 'thread={$thread}'}">
                        <xen:if is="{$thread.isModerated}"><span class="moderated" title="{xen:phrase moderated}">{xen:phrase moderated}</span></xen:if>
                        <xen:if is="!{$thread.discussion_open}"><span class="locked" title="{xen:phrase locked}">{xen:phrase locked}</span></xen:if>
                        <xen:if is="{$thread.sticky}"><span class="sticky" title="{xen:phrase sticky}">{xen:phrase sticky}</span></xen:if>
                        <xen:if is="{$thread.isRedirect}"><span class="redirect" title="{xen:phrase redirect}">{xen:phrase redirect}</span></xen:if>
                        </xen:hook>
                    </xen:contentcheck>
                    </div>
                </xen:if>
 
                <div class="secondRow">
                    <div class="posterDate muted">
                        <xen:username user="$thread" title="{xen:phrase thread_starter}" />,
                        <xen:datetime time="$thread.post_date" title="{xen:if {$visitor.user_id}, '{xen:phrase go_to_first_message_in_thread}'}" /><xen:if is="{$showForumLink}">,
                        {$thread.forum.title}</xen:if>
 
                        <xen:if is="{$showLastPageNumbers} AND {$thread.lastPageNumbers}">
                            <span class="itemPageNav">
                                <span>...</span>
                                <xen:foreach loop="$thread.lastPageNumbers" value="$pageNumber">
                                    {$pageNumber}
                                </xen:foreach>
                            </span>
                        </xen:if>
                    </div>
                </div>
            </div>
        </div>
    </a>

Add to EXTRA.css
HTML:
.fullDivLink
{
    display:block;
}
.fullDivLink .listBlock.main
{
    width:100%;
}
That worked on my default skin.
Didn't work. Thanks anyway though.
 
Top Bottom