Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

possible to make a responsive theme work with mobile without editing config.php ?

jeongweejeongwee Vanilla version 2.6 ✭✭
edited June 2018 in Vanilla 2.0 - 2.8

is there anyway to make a responsive theme work with mobile without adding $Configuration['Garden']['MobileTheme'] = 'theme-name'; to config.php ?
in addon.json or about.php maybe?

Comments

  • R_JR_J Ex-Fanboy Munich Admin

    Add "mobileFriendly": true, to addon.json or 'MobileFriendly' => true, to the about.php

  • jeongweejeongwee Vanilla version 2.6 ✭✭
    edited June 2018

    @R_J

    sry, it doesnt work. vanilla still using the origiral mobile theme replacing my responsive theme on mobile.

  • R_JR_J Ex-Fanboy Munich Admin

    Having "MobileFriendly" in the theme information is needed that you can choose the theme to be the mobile theme. Got to the dashboard and the themes and look for the mobile theme section (it's a tab on the themes page)

  • jeongweejeongwee Vanilla version 2.6 ✭✭
    edited June 2018

    i have try both "mobileFriendly": true, "mobileFriendly": "true", and clear cache / clear cookie on broswer .
    they dont fix it , still only default mobile theme form the dashboard. vanilla 2.6.0here.

    {
    "key": "a",
    "name": "a",
    "description": "a",
    "version": "1.0.0",
    "type": "theme",
    "license": "MIT",
    "MobileFriendly": "true",
    "author": [{
    "name": "a",
    "email": "a@a.com"
    }],
    "layout": {
    "categories": "Modern",
    "discussions": "Modern"
    },
    "options": {
    "styles": {
    "Default": "%s",
    "Red": "%s_Red",
    "Orange": "%s_Orange",
    "Yellow": "%s_Yellow",
    "Green": "%s_Green",
    "Cyan": "%s_Cyan",
    "Blue": "%s_Blue",
    "Purple": "%s_Purple",
    "Ocean": "%s_Ocean"
    }
    }
    }

  • R_JR_J Ex-Fanboy Munich Admin

    Sorry, my fault! It must be "isMobile": true,

  • jeongweejeongwee Vanilla version 2.6 ✭✭
    edited June 2018

    @R_J
    thank you ,thats correct!
    may i ask another question?
    the theme uses format screenshot_**.png for pictures.
    whats the format of picture for mobile themes?
    i believe the tutorial article didnt tell that.


  • R_JR_J Ex-Fanboy Munich Admin

    @jeongwee said:
    whats the format of picture for mobile themes?

    I do not know that, but from looking at the /themes/mobile folder, I would assume that "screenshot" is used for desktop themes and "mobile" is used for mobile themes

  • jeongweejeongwee Vanilla version 2.6 ✭✭

    something went wrong.
    yes, the mobile is using my theme now.
    but after i click on another theme and then refresh the page.
    my theme gone from desktop themes and no matter how i refresh the page the theme doesnt coming back.
    and on my last comment , i didnt check carefully , i can not enable a theme from it, they are all enabled....
    now i go back to the site, the theme is broken, but on mobile it works fine.

  • jeongweejeongwee Vanilla version 2.6 ✭✭
    edited June 2018

    is that i cant enable the theme for both mobile and desktop at a same time from dashboard by using "isMobile": true, ?

  • R_JR_J Ex-Fanboy Munich Admin

    I don't think there is a way to make a theme desktop and mobile at once. You could achieve that with a trick, though. Add something like that to your about.php:

        'Options' => [
            'Text' => [
                'Mobile Theme' => [
                    'Description' => 'You can use this theme as your mobile theme, too ',
                    'Type' => 'checkbox'
                ]
            ]
        ]
    

    In the themehooks file something like that should do the trick:

        public function settingsController_render_before($sender, $args) {
            if (
                $sender->Request->getPath() == '/dashboard/settings/themeoptions' &&
                c('ThemeOption.Mobile Theme') == true
            ) {
                saveToConfig('Garden.MobileTheme', 'YourThemeName');
            }
        }
    
  • jeongweejeongwee Vanilla version 2.6 ✭✭
    edited June 2018

    thx @R_J
    i have questions about it
    1.i have a addon.json now and theres no about.php, even i creat one, it is empty before adding the codes to it. so am i still able to use the about.php when the addon.json alrdy exist?
    2.if it is able to add a about.php when addon.json alrdy exist ,and add the codes into it. but since its a "trick" ,will the "trick" possibly cause any problem or cause any problem in the future ?
    3.by add $Configuration['Garden']['MobileTheme'] = 'theme-name'; to config.php or make the "trick" to make the theme works on both desktop and moble. which one do you recommanded ?

  • R_JR_J Ex-Fanboy Munich Admin

    about.php is the old format. You do not really need it if you use addon.json

    Instead of using the PHP array from above, for the addon.json you would need the same info in json format.

    The code needs to be in a theme hooks file.

    I have called it a trick, but in fact it is a super-genius-solution for solving a problem. There might be an even more elegant solution in the future, but my solution would work nevertheless.

    You can certainly change the line in the config directly, but if you want to publish your theme, it is always nice to be able to offer a friendly gui.

  • jeongweejeongwee Vanilla version 2.6 ✭✭

    ty , appreciated. but since i cant change the picture of mobile theme, it is look bad . i will stay with adding $Configuration['Garden']['MobileTheme'] = 'theme-name'; to config.php.

  • ShadowdareShadowdare r_j MVP
    edited June 2018

    @R_J said:
    I have called it a trick, but in fact it is a super-genius-solution for solving a problem. There might be an even more elegant solution in the future, but my solution would work nevertheless.

    You can certainly change the line in the config directly, but if you want to publish your theme, it is always nice to be able to offer a friendly gui.

    I like your solution. Clever! :)

    @jeongwee, I don't think you can set two separate thumbnails for the theme unfortunately, so just having it be a "desktop theme" and applying this solution should work nicely.

    Add Pages to Vanilla with the Basic Pages app

  • R_JR_J Ex-Fanboy Munich Admin

    There' always a way:

         public function settingsController_render_before($sender) {
            if (!$sender->ResolvedPath == 'dashboard/settings/mobilethemes') {
                return;
            }
    
            // Get all themes.
            $themes = Gdn::themeManager()->availableThemes();
    
            // Make Bootstrap theme a mobile theme;
            $themes['Bootstrap']['IsMobile'] = true;
            $themes['Bootstrap']['ScreenshotUrl'] = '/themes/Bootstrap/mobile.png';
    
    
            // Filter themes.
            foreach ($themes as $themeKey => $themeData) {
                // Only show mobile themes.
                if (empty($themeData['IsMobile'])) {
                    unset($themes[$themeKey]);
                }
                // Remove themes that are archived
                if (!empty($themeData['Archived'])) {
                    unset($themes[$themeKey]);
                }
            }
            uasort($themes, ['SettingsController', '_NameSort']);
            $sender->setData('AvailableThemes', $themes);
        }
    
        public function settingsController_themeOptions_create($sender) {
            $sender->mobileThemeOptions();
        }
    

    Putting this into the themehooks file makes Bootstrap theme an available mobile theme. And if there would be mobile.png file in the themes folder, it would be displayed. The theme options are not very elegant, but I would call this code a "tweak" and not a real smooth solution.

    By the way: when using a themehooks file, you can use

    public function setup() {
        saveToConfig('Garden.MobileTheme', 'YourTheme');
    }
    

    and that would make your theme automatically also the mobile theme. But that changes a config setting that the user is not expecting, and therefore I would call it bad practice.

  • jeongweejeongwee Vanilla version 2.6 ✭✭

    ty ,both im trying.

Sign In or Register to comment.