[Tutorial] How to Create a new mobile theme.

peregrine · March 2014

duplicate the mobile theme in a new folder.

1 -copy the files and folders from themes/mobile to themes/mynewmobile

2 - edit the about.php in themes/mynewmobile to reflect your new name.

    <?php if (!defined('APPLICATION')) exit();

    $ThemeInfo['mynewmobile'] = array(
       'Name' => 'My New Mobile',
       'Description' => "my  design for mobile browsers",
       'Version' => '1.0',
       'Author' => "You",
       'AuthorUrl' => 'http://vanillaforums.com'
    );

3 - edit the custom.css if desired in themes/mynewmobile /design/custom.css
4 - edit the default.master.tpl in themes/mynewmobile /views/default.master.tpl

5 - edit your config.php

 change line MobileTheme line ($Configuration['Garden']['MobileTheme'] = " 

 if it exists or add this if it doesn't exist in your config.php 
                     `$Configuration['Garden']['MobileTheme'] = "mynewmobile';`

6 - delete the .ini files in your cache folder.

your new theme should be now available.

NOTE:

the folder name mynewmobile must match the name exactly (upper and lowercase)
in $ThemeInfo['mynewmobile'] = array(

also @vrijvlinder has generously made an assortment of mobile themes - search the theme add-ons for mobile to see see samples.

peregrine · March 2014

it should say this in config.php after you are finished (the previous message had some erroneous punctuation).

$Configuration['Garden']['MobileTheme'] = 'mynewmobile';

troubleshooting notes:

make sure you delete the .ini files in the cache folder if your new mobile theme does not appear and re-read the tutorial to double check your steps.

if for some reason you get a bonk error read this

http://vanillaforums.org/docs/errors

if the error you get is similar to this...

**/cache/Smarty/compile' does not exist, or is not a directory.

The error occurred on or near: /library/vendors/Smarty-2.6.25/libs/Smarty.class.php**

then do this

create the /cache/Smarty/compile directory and give it the correct permissions,

so it can place files in the folder. and make sure cache directory can be written to

vrijvlinder · March 2014

I would like to add that mobile themes can have a default.master.php or a default.master.tpl and it will also have a themehooks file unlike the php based themes.

The benefits from using a php based mobile theme is that most of the plugins work well.

The benefits from using a tpl based theme is that it is easy to code because it uses html and smarty compiles the php.

So instead of a very long complex php link you would use a smarty link like this {user_link} in your template.

To edit a mobile theme on the desktop, you will need to use a User Agent Switcher so you can see the mobile view on the desktop.

You can edit your mobile theme also by turning on dev tools on the iPhone and connecting your iPhone to the computer then using safari select the iPhone as the source to be edited.

http://chrisbowler.com/journal/web-inspector

[Tutorial] How to Create a new mobile theme.

Comments