• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
  • 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.
  • 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

CyberAP

Well-known member
#1
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
 

CyberAP

Well-known member
#3
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.
 
R

ragtek

Guest
#8
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" />
 

CyberAP

Well-known member
#11
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!
 

CyberAP

Well-known member
#14
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.