How can I make my theme also be used for mobile devices
lumio
New
Hello,
right now I'm developing a theme and I realised, that it won't be viewed for mobile devices. How can I make my theme mobile friendly?
Best Answers
-
hgtonight
∞ · New Moderator
Welcome to the community!
What version number of Vanilla are you running?
You can specify what theme should be loaded for mobile devices via a
/conf/config.phpsetting.$Configuration['Garden']['MobileTheme'] = 'YourThemeName';Check out the Documentation! We are always looking for new content and pull requests.
Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.
6 -
hgtonight
∞ · New Moderator
You are looking to add an asset to the head module. Open up your theme hooks file and add the following:
public function HeadModule_BeforeToString_Handler($Sender) { $Sender->AddTag('meta', array('name' => 'viewport', 'content' => 'initial-scale=1.0, width=device-width')); }Check out the Documentation! We are always looking for new content and pull requests.
Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.
3
Answers
Welcome to the community!
What version number of Vanilla are you running?
You can specify what theme should be loaded for mobile devices via a
/conf/config.phpsetting.$Configuration['Garden']['MobileTheme'] = 'YourThemeName';Search first
Check out the Documentation! We are always looking for new content and pull requests.
Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.
Thanks for your quick response! And thank you
I'm running Vanilla 2.1 now again.
Your answer works perfectly... now I only need to be able to add
<meta name="viewport" content="initial-scale=1.0, width=device-width">toDo you know how to do that?
You are looking to add an asset to the head module. Open up your theme hooks file and add the following:
public function HeadModule_BeforeToString_Handler($Sender) { $Sender->AddTag('meta', array('name' => 'viewport', 'content' => 'initial-scale=1.0, width=device-width')); }Search first
Check out the Documentation! We are always looking for new content and pull requests.
Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.
Very straight forward! Thanks!
You can also clone and modify your theme to work on mobile. Just make all the widths for content and panel 100% ...
❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌
Which is not really a clean solution @vrijvlinder
Really ? Please see my themes, the glass series has mobile themes to match. It is the same theme but altered to fit in mobiles. Have had no complaints yet .
Not everything you put on a desktop theme works on a mobile. Sometimes you want different content for the mobile and ways to control the uploaded materials which may not conform to the size automatically .
If you are going to use a desktop theme for mobile you will need to do much more than just adjust the window and scale the page to fit using that tag alone.
❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌
Yes of course you need to do more than just adjusting the window scale. Responsive is your friend
I just don't find it very clean, having a copy of a theme where you need to make global changes double and in two different places.
@lumio That's true, but it also compounds the difficulty of theming tremendously trying to make a solution that scales to both. We applaud folks who take on that challenge, but we also take the realistic view that many folks don't have that level of time to dedicate to their forum theme(s).