1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. This forum is for release discussion only. Discussions that do not relate specifically to the resource release should be discussed in another, more appropriate forum.
    Dismiss Notice
  3. This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

Add mobile support for any XF style

Discussion in 'Template Modifications [Archive]' started by CyberAP, May 29, 2011.

  1. CyberAP

    CyberAP Well-Known Member

    Open your style templates and find template called PAGE_CONTAINER
    Find there:
    PHP:
        <meta charset="utf-8" />
    Replace this with:
    PHP:
        <meta charset="utf-8" />
        <
    meta name "viewport" content "width = device-width, user-scalable = no" />
    Find there:
    PHP:
        <!--XenForo_Require:CSS-->
    Replace this with:

    PHP:
        <!--XenForo_Require:CSS-->

        <
    link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="css.php?css=iphone&amp;style={xen:urlencode $_styleId}&amp;d={$visitorStyle.last_modified_date}/>
    Again open your style templates and click + Create new template
    Call your new template: iphone.css
    Paste this code into it: (be sure you are adding template to the proper style)
    Code:
    /*general */
    
    html
    {
        width: 480px;
        margin: 0 auto;
    }
    
    .pageWidth
    {
        min-width: 0;
        margin: 0;
    }
    
    /* navigation */
    
    .navTabs
    {
        border-radius: 0;
        border-left-style: none;
        border-right-style: none;
    }
    
    .navTabs .visitorTabs
    {
        display: none; /* have no idea where to put this ATM */
    }
    
    /* breadcrumbs */
    
    .breadBoxTop, .breadBoxBottom
    {
        margin-right: 0;
        margin-left: 0;
    }
    
    /* content */
    
    .mainContainer
    {
        float: none;
        margin: 0;
    }
    
    .mainContent
    {
        margin: 0;
        padding: 0;
    }
    
    #content .pageContent
    {
        padding-left: 6px;
        padding-right: 6px;
    }
    
    .node .nodeText
    {
        margin-right: 210px;
    }
    
    .node .nodeControls
    {
        right: 190px;
    }
    
    .node .nodeLastPost
    {
        width: 160px;
    }
    
    /* message */
    
    .messageUserInfo
    {
        width: 67px;
    }
    
    .messageUserBlock div.avatarHolder
    {
        padding: 6px;
    }
    
    .avatar .img.m
    {
        width: 48px;
        height: 48px;
        background-size: cover;
        background-position: 0 0;
    }
    
    .message .messageInfo, #QuickReply
    {
        margin-left: 82px;
    }
    
    /* sidebar */
    
    .sidebar
    {
        width: 468px;
        float: none;
        padding: 0;
    }
    
    .sidebar .section
    {
        width: 232px;
        display: inline-block;
        vertical-align: top;
    }
    
    /* search + forms */
    
    #QuickSearch
    {
        top: -90px;
        padding: 3px;
    }
    
    .formPopup
    {
        width: 100%;
    }
    
    .formPopup .primaryControls
    {
        padding: 0;
    }
    
    .formPopup .textCtrl, .formPopup .button
    {
        width: 241px;
    }
    
    .formPopup .secondaryControls
    {
        padding: 0;
    }
    
    /* footer */
    
    .footer .pageContent
    {
        border-radius: 0;
    }
    
    /* popup */
    
    .xenOverlay, .xenOverlay.chooserOverlay
    {
        width: 480px !important;
    }
    
    .xenOverlay #jumpMenu .jumpMenuColumn
    {
        width: 100% !important;
    }
    

    Save the template. That's it! Test it with your iPhone!

    Screenines:
    1.png 2.png 3.png
     
    yavuz, AdamU, Skeletor and 13 others like this.
  2. Nasr

    Nasr Well-Known Member

    cool

    does it work with all mobile phones or just Iphones?
     
    Vincent likes this.
  3. CyberAP

    CyberAP Well-Known Member

    With all devices which have screen width of 480 pixels.
    The style is not fluid, but maybe after some time I rework the css and it will support more mobile devices.
     
    Vincent likes this.
  4. Vincent

    Vincent Well-Known Member

    I would install this if it was an addon ;)
     
  5. CyberAP

    CyberAP Well-Known Member

    I am not a coder but this is possible to do with an addon.
     
  6. Vincent

    Vincent Well-Known Member

    I'm pretty sure someone around here can :D
     
  7. ragtek

    ragtek Guest

    *here* (tomorrow;) now, its too late^^)
     
  8. ragtek

    ragtek Guest

    Anybody knows if i need to follow this order?
    Everything is in the head part, so wouldn't it be possible to add everything after <meta charset="utf-8" />
     
  9. Vincent

    Vincent Well-Known Member

    It doesn't matter where in the <head> tag it is, it just has to be in it :)
     
  10. ragtek

    ragtek Guest

    CyberAP likes this.
  11. CyberAP

    CyberAP Well-Known Member

    Works, but we need a button in the footer to switch to normal style (remember choice by cookies).
    I will work on css this week, then post the changes in the first post.
    Also waiting for addon release :) Nice work!
     
  12. CyberAP

    CyberAP Well-Known Member

    Order doesn't matter when you add <meta> tags. But important when you link css.
     
  13. ragtek

    ragtek Guest

    Hm?

    Why this?
    I can't see any difference in firefox in the normal style with the added code.
     
  14. CyberAP

    CyberAP Well-Known Member

    If you remove media="only screen and (max-device-width: 480px)" form the code this style becomes mobile in any browser. And with this code we can use our style as mobile only for mobile devices.
    Button is seriously needed because not all elements are supported ATM. And some users prefer standard view on their devices.
    Of course button should be viewable only with mobile browsers. It is possible to do with content property.
    Or maybe it is better to make a browser check and then output all the changes. But it is really hard to do I think.
     
  15. AndreaMarucci

    AndreaMarucci Well-Known Member

    Fantastic works! This is my screenshot. How can I make the little triangles in the menu smaller?
    foto.PNG
     
  16. CyberAP

    CyberAP Well-Known Member

    Add to iphone.css this line: #headerMover #headerProxy {height: npx;}
    And replace n with the number that suits your style.
     
    Vincent likes this.
  17. Vincent

    Vincent Well-Known Member

    Ragtek, CyberAP, you should think about teaming up :)

    You 2 together are amazing :D
     
    CyberAP likes this.
  18. ragtek

    ragtek Guest

    CyberAP is great! He helped me sooooooooooooooooooooo much with my add-ons:)
     
    Vincent and CyberAP like this.
  19. CyberAP

    CyberAP Well-Known Member

    We are :)
     
    Vincent and ragtek like this.
  20. Vincent

    Vincent Well-Known Member

    Awesomeeee :D :D :D
     

Share This Page