HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

How to add links to the mobile hooks

edited August 2013 in Tutorials

This may be old news to some but to me it is a breakthrough in understanding php. I wanted to add a link to the menu in the mobile theme I made.

Tried several things to no avail until:

I added this into the class.mobilethemehooks.php

$this->_AddButton($Sender, 'MobileHome');

I added this into the private function, I suppose it can be also public if you want it to show when not logged in

elseif ($ButtonType == 'MobileHome')
            $Sender->Menu->AddLink('MobileHome', Img('/themes/mobile/mhicon.png', array('alt' => T('MobileHome'))), '/plugin/MobileHome',  array('class' => 'MobileHome'));

Now I have a link back to the MobileHome page I made ! and it works :)))

Comments

  • edited January 2013

    You can also select where to add these links or add them to extra pages where they don't normally appear by default.

    I want this link to appear in the profile page too so I added it's controller

     
     public function ProfileController_Render_Before($Sender) {
          $this->_AddButton($Sender, 'MobileHome');
       }
    
  • How would I add a button for pointing to a different domain url?

    I need to add a Blog button to the Vanilla Mobile theme.

    My Forum is http://forum.domain.com/
    My Blog is http://www.domain.com/

    I am not sure of the syntax for straight url.

  • edited January 2013

    To the mobile hooks? Yea the million dollar php question lol !! , as soon as I know for sure I will let you know.... for now tho I'm looking at this, however, as a possibility :

    < ? print( '< a href=" http://mylink.com/path/" >click Me'); ? >

    One way to by pass this is to make a lead in page , an html page with links to other places.I made a plugin which is just another page accessed by mobile only and there I put an index with links elsewhere. It is a take of peregrine's extra page but made for mobile only. I will submit it if it something you might find useful , I made it for myself really.

    If this is just for the default.master.php though you can use simple html links.

  • edited January 2013

    Good, so I was not missing something obvious.

    I see how you made links buttons to different things within Vanilla, but none to a straight URL like http://other.domain.com/thing.html

    I am doing a site for Android users, so embedding the page into WordPress is not pleasant for them. So I keep the Forum and Blog as independent apps. About 75% come in on Windows or Linux. Of the other number who are Android devices, about 75% android users see the full web page, and 25% trigger the mobile.

    The default Vanilla Mobile forum is fine for the ones with Tiny Screens. I am not about flash, but content anyway. I just need a button in the mobile theme to take them back to the Blog.

    The Wordpress blog so far runs sweet on everything that is able to access it. Only minor CSS glitches that only I really notice on the weirdest of browsers and devices. Like Opera on a modded Kyros Android.

    In a perfect world, the ideal mobile plugin would be to add a URL button & MOVE THE FULLSITE BUTTON away from the Sign In button.

    Such a tiny button set next to another tiny button so that you hit the wrong one 50% of the time with no easy way of getting back. Those two buttons should not be near each other. The fullsite button should not be near anything. Maybe next to the Vanilla tag not the sign in button.

  • edited January 2013

    I see default.master.tpl not default.master.php in the Mobile theme. Is that what you are talking about?

    I figured they had class.mobilethemehooks.php so you would not have edit default.master.tpl. I am not even sure what a tpl is. Mobile something.

    But what do I know. I only started using Vanilla 72 hours ago. phpBB became too fractured and full of infinite holes.

  • edited January 2013

    Yes I agree with the buttons etc of the default mobile theme, which is why I made new mobile themes. You should install the mobile theme switcher plugin and paste the css for the themes I made, or install the mobile themes instead of the default.
    I made all the links more visible .

    A link to an external site can be placed in the mobile using the Smarty functions. In fact that is how the Vanilla url is placed in there. You could try adding it to the mobile tpl . I have not been successful using that approach though, it became easier to make an index page with links to other places.

  • tpl is a framework that Smarty uses , the meat of the content is in the plugin and the tpl is the asset container from what I understand.

    http://www.smarty.net

  • edited January 2013

    I am on a PC laptop, and said to hell with it and opened the tpl with my text editor just to see what happened.

    No problem. It is just a text file. I insert the line

    below
    <body id="{$BodyID}" class="{$BodyClass}">
      <div id="Frame">
         <div class="Banner">
            <ul>
              {discussions_link}
              {profile_link}
              {inbox_link}
              {custom_menu}
              <li><a href="http://myblogdomain.com/"><span>Blog</span></a></li>
              {event name="BeforeSignInLink"}
              {if !$User.SignedIn}
                 <li class="SignInItem">{link path="signin" class="SignIn"}</li>
              {/if}
            </ul>
         </div>
    

    Bam! I got my menu item. Ugly red looking but it is there.

    Oh, I use my phone, iPad, and six other android devices for testing, but a good tip is the Opera Mobile Emulator for fast easy look over.

  • OK, this made an exact menu item when I edited the default.master.tpl. There really is not much in there. Only 44 lines.

    <body id="{$BodyID}" class="{$BodyClass}">
      <div id="Frame">
         <div class="Banner">
            <ul>
              {discussions_link}
              {profile_link}
              {inbox_link}
              {custom_menu}
              <li><a class="" href="http://rootitall.com/">Blog</a></li>
              {event name="BeforeSignInLink"}
              {if !$User.SignedIn}
                 <li class="SignInItem">{link path="signin" class="SignIn"}</li>
              {/if}
            </ul>
         </div>
    
  • edited January 2013

    That damn Full Site is next to the Add a Comment and Sign In Button. Geez, you kidding me.

    Where do I find Foot defined?

    {asset name="Foot"}

  • I tried editing my tpl but it did not work for me for some reason ... Good to know you managed to do it. I will try again .

    You can rearrange the way the links look by editing the mobile.css file.
    Use this firefox extension to get user agents to see on your desktop and edit with firebug. http://chrispederick.com/work/user-agent-switcher/

  • edited January 2013

    I just wanted my link to look like everything else. My first swing in the dark was:

    <li><a href="http://myblogdomain.com/"><span>Blog</span></a></li>

    to

    <li><a class="" href="http://rootitall.com/">Blog</a></li>

    Made it match everything else. This way anyone searching for answers has an example.

    Make sure you use a straight text editor for programming. On Notepad++ for windows, and Vim for Linux. FTP as binary.

    Any ideas to lose that full site button? It needs to go.

    I did a grep on the mobile theme for Foot and nomobile, with no useful hits. How is {asset name="Foot"} set up.

  • yes, and you could also give it a class like .Button, that is what I did in the themes I made.

    I tried using a straight text editor but it kept being converted to rich text :( so I gave up doing it that way. I am glad it worked for you,.

  • use css to hide it the code is

    div.FootMenu span a{display:none;}

  • I can cut it out of the tpl too, but I lose access to my dashboard if I do that.

    <div id="Foot">
            <div class="FootMenu">
              <!--
              <span>Mobile</span>
              <span><a href="#">Desktop</a></span>
              -->
            {nomobile_link wrap="span"}
              {dashboard_link wrap="span"}
              {signinout_link wrap="span"}
            </div>
            <div>
              <a href="http://myblog.com/"><span>Return to RootItAll Blog</span> / <a class="" href="/profile/nomobile">Full Site</a></a>
            </div>
            {asset name="Foot"}
         </div>
    

    Delete {asset name="Foot"}, but where is {asset name="Foot"} setup? I can't find it.

  • edited January 2013

    The assets are handled by the Smarty Plugin. They are made up of functions that apply to each asset. To remove or hide specific links use css, or you will lose other links that appear in the foot. And also will lose the ability to add stuff to the foot other than links, like images etc.
    If you choose to remove the Foot asset, then you could also add the links to the menu part using my formula in the beginning of this article.

    $this->_AddButton($Sender, 'Dashboard');

  • BTW {nomobile_link wrap="span"} is the full site link

Sign In or Register to comment.