Advertisement:

Author Topic: Different themes for pc/mobile?  (Read 708 times)

Offline Sir Osis of Liver

  • SMF Hero
  • ******
  • Posts: 9,133
Different themes for pc/mobile?
« on: May 03, 2019, 12:50:57 PM »
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.

Offline Kindred

  • The Mean One
  • Support Specialist
  • SMF Legend
  • *
  • Posts: 58,316
  • Gender: Male
    • Kindred-999 on GitHub
Re: Different themes for pc/mobile?
« Reply #1 on: May 03, 2019, 01:01:26 PM »
there's a mod which displays different themes based on device.

personally, I don't think it's worth it...  but it's there
Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

Offline Sir Osis of Liver

  • SMF Hero
  • ******
  • Posts: 9,133
Re: Different themes for pc/mobile?
« Reply #2 on: May 03, 2019, 01:13:09 PM »
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.


Offline Arantor

  • Resident Overthinker
  • SMF Friend
  • SMF Legend
  • *
  • Posts: 71,197
    • StoryBB/StoryBB on GitHub
Re: Different themes for pc/mobile?
« Reply #3 on: May 03, 2019, 01:14:34 PM »
The SMF Mobile theme comes with a mod to handle this.
Don’t try to tell me that some power can corrupt a person. You haven’t had enough to know what it’s like.

No good deed goes unpunished / No act of charity goes unresented.

Offline Sir Osis of Liver

  • SMF Hero
  • ******
  • Posts: 9,133
Re: Different themes for pc/mobile?
« Reply #4 on: May 03, 2019, 01:23:20 PM »
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.


Offline Arantor

  • Resident Overthinker
  • SMF Friend
  • SMF Legend
  • *
  • Posts: 71,197
    • StoryBB/StoryBB on GitHub
Re: Different themes for pc/mobile?
« Reply #5 on: May 03, 2019, 01:31:51 PM »
No, it’s not a public mod, you buy the mobile theme, you get the companion mod.
Don’t try to tell me that some power can corrupt a person. You haven’t had enough to know what it’s like.

No good deed goes unpunished / No act of charity goes unresented.

Offline Gwenwyfar

  • Great Wizard's familiar
  • SMF Friend
  • SMF Hero
  • *
  • Posts: 2,263
  • Gender: Female
Re: Different themes for pc/mobile?
« Reply #6 on: May 03, 2019, 02:21:13 PM »
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.
Energy follows attention.

There is nothing more precious than being yourself and following your heart.

Offline Sir Osis of Liver

  • SMF Hero
  • ******
  • Posts: 9,133
Re: Different themes for pc/mobile?
« Reply #7 on: May 03, 2019, 09:50:54 PM »
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.

Offline Sir Osis of Liver

  • SMF Hero
  • ******
  • Posts: 9,133
Re: Different themes for pc/mobile?
« Reply #8 on: May 04, 2019, 05:01:38 PM »
Anyone know if emanuele is still supporting his mods somewhere else?  Is he current on github?

Offline lurkalot

  • Sophist Member
  • *****
  • Posts: 1,326
  • Gender: Male
  • Tinyportal Support
    • guitaristguild on Facebook
    • Tinyportal on GitHub
    • @GuitaristGuild on Twitter
    • Guitarist Guild
Re: Different themes for pc/mobile?
« Reply #9 on: May 04, 2019, 05:17:28 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

Offline Sir Osis of Liver

  • SMF Hero
  • ******
  • Posts: 9,133
Re: Different themes for pc/mobile?
« Reply #10 on: May 04, 2019, 05:25:18 PM »
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.

Offline Sir Osis of Liver

  • SMF Hero
  • ******
  • Posts: 9,133
Re: Different themes for pc/mobile?
« Reply #11 on: May 07, 2019, 06:20:29 PM »
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 -

Code: [Select]

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