• 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
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.webp 2.webp 3.webp
 
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.
 
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" />
 
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" />

It doesn't matter where in the <head> tag it is, it just has to be in it :)
 
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!
 
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" />
Order doesn't matter when you add <meta> tags. But important when you link css.
 
Works, but we need a button in the footer to switch to normal style (remember choice by cookies).
Hm?

Why this?
I can't see any difference in firefox in the normal style with the added code.
 
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.
 
Add to iphone.css this line: #headerMover #headerProxy {height: npx;}
And replace n with the number that suits your style.
 
Top Bottom