XF 1.4 Screen size decision making and name of SHOWTHREAD template

popowich

popowich

Active member
Hello,

What's the name of the template equivalent to vB's SHOWTHREAD?

Scratch some of the adsense specific questions earlier, I'm having a more general problem.

It appears that width > 483 is the magic trigger between say an iPhone4 vs. desktop display (well, anything else) decission making.

Is there a clean way to do:

if (width > 483) { code; } else { other code; }

I'm trying to do soemthing like that while working with regular HTML.

It appears that I might need to wrap any HTML I'm working on inside some js?

Hopefully I'll be more up to speed in Xenforo'isms sooner than later.

Thanks again!
 
Sort by date Sort by votes
I've tried this a few different ways in the thread_view template but it's not "Activating" correctly. Is what I'm attempting possible?

The goal is the functionality below but I'd be replacing the "Desktop Test" part of it with other code once I have the triggering between mobile and desktop correct.

<!--- Turn thread title into my vB3 style SHOWTHREAD table ad unit + title block for desktop visitors -->
<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveNarrowWidth) {
<!--- Use the thread title displayby XenForo -->
<xen:h1>{xen:helper threadPrefix, $thread}{$thread.title}</xen:h1>
}
@media (max-width:@maxResponsiveWideWidth) {
<!--- Custom ad + title for desktop visitors -->
</p>Desktop Test - Mobile should still be OK
}
</xen:if>
 
Upvote 0 Downvote
Media queries can only be used for CSS, not HTML.

You would have to add a class to the HTML which would then be used in the media query.
 
Upvote 0 Downvote
Is anyone available to help me through this quick for some beer money?

It sounds like it shouldn't be too hard but I need my first working example faster than I'm apparently able to figure it out myself with a few pointers.
 
Upvote 0 Downvote
EXTRA.css - I added the following:

@media screen and (min-width: 481px) {
#EQ-mobile { display: none; }
#EQ-desktop { display: initial; }
}

@media screen and (max-width: 480px) {
#EQ-mobile { display: initial; }
#EQ-desktop { display: none; }
}



thread_view - I modified near the top of the template:

<!--- Edit this to create custom SHOWTHREAD style ad+title table for Desktop visitors-->
<!--- This is the original one liner: <xen:h1>{xen:helper threadPrefix, $thread}{$thread.title}</xen:h1> -->

<div id="EQ-mobile">
<!-- <xen:h1>{xen:helper threadPrefix, $thread}{$thread.title}</xen:h1> -->
</div>

<div id="EQ-desktop">
Desktop Test
</div>

<!--- END edit for SHOWTHREAD style ad+title table for Desktop visitors-->




When viewing on my iPhone it looks good, I still see the XenForo style title displayed and -not- Desktop Test

When viewing on my computer I still see the thread title above "Desktop Test", even if I comment out what I thought was the line of style generating the title?

I don't understand what I'm doing wrong.
 
Upvote 0 Downvote
OK, this works perfectly

<div id="EQ-mobile">
Mobile Test
</div>

<div id="EQ-desktop">
Desktop Test
</div>

I'm just stuck on iidentifying what's actually generating the thread title.

If I comment out everything above <xen:description> I still get the title displayed for all
 
Upvote 0 Downvote
Which template are you editing?
The thread_view template?

If so, the thread title comes from:
Code: 
<xen:h1>{xen:helper threadPrefix, $thread}{$thread.title}</xen:h1>
 
Upvote 0 Downvote
That's what I was thinking, but if I move that inside the EQ-mobile div it still displays on desktop too.

If I put plain text in those div's the text only displays on the correct device

Somehow that title is overridding and always displaying.
 
Upvote 0 Downvote
If I do this I'm expecting not to see any title on Desktop while Mobile displays normally

<!--- START edit to create custom SHOWTHREAD style ad+title table for Desktop visitors -->
<div id="EQ-mobile">
<xen:h1>{xen:helper threadPrefix, $thread}{$thread.title}</xen:h1>
</div>
<div id="EQ-desktop">
</div>
<!--- END edit for SHOWTHREAD style ad+title table for Desktop visitors -->
 
Upvote 0 Downvote
Should I really be in the page_container template?

Looks like in there near <!-- h1 title, description --> is triggering the Site Title for the home page vs thread title on thread pages?
 
Last edited:
Upvote 0 Downvote
The thread_view template has both h1 and title tags.

The xen:h1 tag sets the page title.
The xen:title tag sets the browser tab title.

If you just use xen:title, the h1 will be generated from it.
If you just use xen:h1, the browser tab title will be the board title.
 
Upvote 0 Downvote
I think you are saying I need to "fill in the blanks" and make sure I'm setting the title to "something" and not just trying to comment it out while testing?
 
Upvote 0 Downvote
I don't understand why the title is breaking out from the table - {removed link}

I'm trying to move the title & description into the right side of the table

<div id="EQ-desktop">
<table width="100%" border="1">
<tr>
<xen:if is="!{$visitor.user_id}">
<td width="336">
{removed my ad code}
</td>
</xen:if>
<td width="100%">
<xen:h1>{xen:helper threadPrefix, $thread}{$thread.title}</xen:h1>
</td>
</tr>
</table>
 
Last edited:
Upvote 0 Downvote
I looked up float and added the EXTRA.css and updated thread_view but the thread title still "breaks out" of the table and appears above it


<!--- START edit to create custom SHOWTHREAD style ad+title table for Desktop visitors -->
<div id="EQ-mobile">
<xen:h1>{xen:helper threadPrefix, $thread}{$thread.title}</xen:h1>
</div>
<div id="EQ-desktop">
<div id="EQ-container">
<div id="EQ-row">
<xen:if is="!{$visitor.user_id}">
<div id="EQ-left" width="336">
{ad code removed}
</div>
</xen:if>
<div id="EQ-right" width="100%">
<xen:h1>{xen:helper threadPrefix, $thread}{$thread.title}</xen:h1>
</div>
</div>
</div>
</div>
<!--- END edit for SHOWTHREAD style ad+title table for Desktop visitors -->


From the EXTRA.css template:

#EQ-container { display: table; }
#EQ-row { display: table-row; }
#EQ-left, #EQ-right, #EQ-middle { display: table-cell; }
 
Upvote 0 Downvote
If I remove or replace the <xen:h1> I end up with two titles on the page, the version you are forcing and the extra version I'm editing.

There must be a way to work with the thread title displayed on thread pages?

I styled this into three groups.

Mobile and "logged in desktop" get your layout, and I'm simply trying to move the thread title displayed for desktop visitors.

How can I get what I marked in red inside the table without it breaking out and/or the forums force duplicating an extra version of it?


<!--- START edit to create custom SHOWTHREAD style ad+title table for Desktop visitors -->

<div id="EQ-mobile">
<xen:h1>{xen:helper threadPrefix, $thread}{$thread.title}</xen:h1>
</div>

<div id="EQ-desktop">
<xen:if is="!{$visitor.user_id}">
<div id="EQ-container">
<div id="EQ-row">
<div id="EQ-left">
{ad code removed}
</div>
<div id="EQ-right">
<xen:h1>{xen:helper threadPrefix, $thread}{$thread.title}</xen:h1>
</div>
</div>
</div>
</xen:if>
<xen:h1>{xen:helper threadPrefix, $thread}{$thread.title}</xen:h1>
</div>

<!--- END edit for SHOWTHREAD style ad+title table for Desktop visitors -->
 
Upvote 0 Downvote
You must log in or register to reply here.
Back
Top Bottom