1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.4 Screen size decision making and name of SHOWTHREAD template

Discussion in 'Styling and Customization Questions' started by popowich, Apr 26, 2015.

  1. 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!
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

  3. popowich

    popowich Active Member

    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:mad:maxResponsiveNarrowWidth) {
    <!--- Use the thread title displayby XenForo -->
    <xen:h1>{xen:helper threadPrefix, $thread}{$thread.title}</xen:h1>
    }
    @media (max-width:mad:maxResponsiveWideWidth) {
    <!--- Custom ad + title for desktop visitors -->
    </p>Desktop Test - Mobile should still be OK
    }
    </xen:if>
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

    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.
     
  5. popowich

    popowich Active Member

    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.
     
  6. popowich

    popowich Active Member

    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.
     
  7. popowich

    popowich Active Member

    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
     
  8. Brogan

    Brogan XenForo Moderator Staff Member

    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>
     
  9. popowich

    popowich Active Member

    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.
     
  10. popowich

    popowich Active Member

    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 -->
     
  11. popowich

    popowich Active Member

    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: Apr 27, 2015
  12. Brogan

    Brogan XenForo Moderator Staff Member

    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.
     
  13. popowich

    popowich Active Member

    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?
     
  14. popowich

    popowich Active Member

    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: Apr 27, 2015
  15. Brogan

    Brogan XenForo Moderator Staff Member

    Which title/table?

    I don't see any issue there with regards to the thread title.
     
  16. popowich

    popowich Active Member

    I attached a screen shot. I highlighted the table in blue. I'm trying to move the title down into the table.

    Example Thread Title.jpg
     
  17. Brogan

    Brogan XenForo Moderator Staff Member

    I wouldn't recommend using a table layout.
    Use float or display inline.
     
  18. popowich

    popowich Active Member

    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; }
     
  19. popowich

    popowich Active Member

    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 -->
     
  20. popowich

    popowich Active Member

    Brandon Sheley likes this.

Share This Page