Different themes for pc/mobile?

Started by Sir Osis of Liver, May 03, 2019, 12:50:57 PM

Previous topic - Next topic

Sir Osis of Liver

Has anyone tried using two different themes concurrently, one that displays for pc view, a second that displays for mobile users?  I have several non-responsive custom themes we've been using for years on family forum that don't work well on phones.  Some of us are old and set in our ways, and don't like change, so we'd like to continue using them, but I'd like to add a responsive theme that loads only for phones.  Haven't found one I like enough to replace the old themes.  Seems like it should be doable with a bit of coding.
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Kindred

there's a mod which displays different themes based on device.

personally, I don't think it's worth it...  but it's there
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Sir Osis of Liver

This one?I'll try it tonight, thanks.

It works, at least in FF mobile emulation (don't have a phone).  Will see what my members think.

Thanks.

Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Arantor

The SMF Mobile theme comes with a mod to handle this.

Sir Osis of Liver

Can't find it, are you referring to Responsive Curve mod?  But I'd guess that would require replacing the custom default theme, which is what I don't want to do.  emanuele's mod works, I'll play with that tonight.

Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Arantor

No, it's not a public mod, you buy the mobile theme, you get the companion mod.

Gwenwyfar

In the case of the theme not having many template edits, making the individual theme's css files load for phone/pc is also easy to do by simply using a different media query for each.
"It is impossible to communicate with one that does not wish to communicate"

Sir Osis of Liver

The mod works fine, but display size cutoff is too high.  Had a look on an 11" tablet and it was seeing the mobile theme.  Will pick through the code and see if I can reduce it to phone size displays only.
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Sir Osis of Liver

Anyone know if emanuele is still supporting his mods somewhere else?  Is he current on github?
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

lurkalot

Quote from: Sir Osis of Liver on May 04, 2019, 05:01:38 PM
Anyone know if emanuele is still supporting his mods somewhere else?  Is he current on github?

He is, but don't think he's updated this for about 7 years. https://github.com/emanuele45/Mobile-Device-Detect

Sir Osis of Liver

Looks like same thing I have.  The mod detects specific mobile devices several different ways.  It's displaying mobile theme on tablets, just want it for phones.  Hacked the code to disable tablet detect, waiting to here from my members.
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Sir Osis of Liver

If anyone's interested, or searches up this topic down the road, am posting a solution I've cobbled together.  Still a glitch or two, working on that.

Disclaimer:  Don't have a phone, only tablets I have access to are 7" Kindle Fire and 11" Lenovo tablet.  Most testing has been done in Firefox 65 dev tools emulations, which seem to be mostly reliable.

Object is to use a non-responsive custom theme as primary theme to be displayed on desktops, laptops, and tablets, and a mobile responsive theme to be displayed on phones only.  Custom themes I've been using display and work normally on screen sizes down to Kindle Fire, just have to zoom them up, which is easy.  On phones theme is scrambled, stuff is cut off, elements are misplaced, or you have to scroll laterally to see things.

Ok, we start with this mod.  It allows you to select a different mobile theme in Admin -> Themes and Layout.  The basic nuts & bolts work, but it hasn't been updated since 2012 and misidentifies some mobile devices.  Out-of-box, it detects tablets and phones as mobile, and feeds both the mobile theme.  Modified the code to separate phones and tablets so only phones get mobile theme, it doesn't work well, identifies some tablets (iPads especially) as phones and gives them wrong theme.

Found this free, open source utility that detects mobile devices.  Similar to emanuele's mod, it detects device type and correctly reports all the computer, tablet, and phone emulations I tried.  Now the trick is to combine it with the mod, and separate tablets from phones.  That's done by editing /Sources/Subs-MobileDetect.php, the file that's added by the mod.  Basically you delete pretty much all of the file and do this -



<?php

/**
 * Mobile Device Detect (MDD)
 *
 * @package MDD
 * @author emanuele
 * @2nd author feline
 * @copyright the class uagent_info is copyright of Anthony Hand (see Subs-MobileDetect.php for details)
 * @copyright 2012 feline, emanuele, Simple Machines
 * @license http://www.apache.org/licenses/LICENSE-2.0.html Apache License 2.0 (AL2)
 *
 * @version 0.2.2
 */

/**
 * Simple function for the hook
 * Since I'm missusing integrate_verify_user the function SHALL not return anything!
 */


function setThemeForMobileDevices()
{
global $modSettings;

// Reasoning:
//   * if the user has already a session with a theme fine, don't need to mess with it
//   * if the mobile theme is not set it's useless to check
//   * CheckIsMobile already takes care to see if $context['MobilDevice'] is set
if (!isset($_SESSION['id_theme']) && isset($modSettings['mobile_theme_id']) && CheckIsMobile())
{
$_SESSION['id_theme'] = $modSettings['mobile_theme_id'];
// On-the-fly override settings (i.e. if admins didn't set allow change themes)
$modSettings['theme_allow'] = true;
}
}

function 
CheckIsMobile($device false)
{
global $context;

if(isset($context['MobilDevice']))
{
if ($device)
return $context['MobilDevice']['device'];
else
return $context['MobilDevice']['isMobile'];
}

require_once 
'Mobile_Detect.php';
$detect = new Mobile_Detect;
 
// Any mobile device (phones or tablets).

if ($detect->isTablet()) {
return false;
}
else

if ( 
$detect->isMobile()) {
return true;
}

}

?>




Upload Mobile_Detect.php from Mobile-Detect-2.8.33 package to /Sources, and the mod will use the updated detect script and report phones only as mobile.  It works on all the FF emulations I tried, but doesn't work on the 11" Lenovo, for reasons unknown it sees the mobile theme.  Have an idea to fix it, but don't currently have access to the tablet (it's my Dad's).

Hopefully this frankenmod doesn't step on any of the licenses involved.  Any suggestions to clean it up are welcome.
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Advertisement: