0
Welcome Guest! Login
0 items Join Now

Creating a popup login form in Callisto

    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 82539
    • Thanks: 10472
    • Web Designer/Developer

    Creating a popup login form in Callisto

    Posted 3 years 11 months ago
    • PLEASE NOTE: This tutorial has now been superseded. There is no longer a need to use this method as there is now a template particle in most templates now called "popupmodule" that you can use to popup any module at all. Although this particle is not present in Callisto you can copy it from another template that does have it. If you want to know how to copy a Gantry 5 particle from one template to another please read my tutorial here in Gantry 5 Official Documentation here .



      Creating a popup login form is quite easy to do in Gantry 5 and Callisto. There are other methods too that work just as well but I find this one the easiest.

      1. Create a login module in module manager - there's no need to assign it to any position, just make a note of the ID of the module after you have create it.
      This image is hidden for guests.
      Please log in or register to see it.


      2. In the callisto template > layout tab drag a "module instance" particle from the side of the screen onto the "copyright section" of the layout (down at the bottom).
      This image is hidden for guests.
      Please log in or register to see it.


      3. Change the settings for the particle that you have added, on the particle tab add the module ID that you just made a note of.
      This image is hidden for guests.
      Please log in or register to see it.


      4. On the block tab add a CSS ID of "mypoplogin" and a tag attribute "style" with value "display: none;". Save the particle.
      This image is hidden for guests.
      Please log in or register to see it.


      5. Make sure that you have rokbox installed.

      6. Now we need to create a link somewhere that opens the popup. To do that we'll use a "custom HTML" particle, so drag one of these from the side on the layout tab onto a suitable place on your layout.
      This image is hidden for guests.
      Please log in or register to see it.


      7. In that particle add the following:
      <a href="#" data-rokbox data-rokbox-element="#mypoplogin"><span class="button button-2 button-red">Login</span></a>
      Now save the particle.
      This image is hidden for guests.
      Please log in or register to see it.


      8. Save the layout.

      You should now have "login" button on the frontend of you site in whichever location you placed it. Clicking on the button will popup a login form.
      This image is hidden for guests.
      Please log in or register to see it.



      The astute of you will have noticed that the button always says "Login" whether you are logged in or not. Don't worry we can soon improve that too (though we do need to use a little PHP too).

      9. As you not allowed to enter PHP directly into custom HTML particle the first thing we need to do is download an install the FREE version of NoNumber Sourcerer https://www.nonumber.nl/extensions/sourcerer#description .

      10. Now we can change all of the code in our custom HTML particle to this:
      {source}
      <?php
      $user = JFactory::getUser();
      if ($user->guest) { 
      ?>
      [[a href="#" data-rokbox data-rokbox-element="#mypoplogin"]][[span class="button button-2 button-red"]]Login[[/span]][[/a]]
      <?php
      }
      else { 
      ?>
      [[a href="#" data-rokbox data-rokbox-element="#mypoplogin"]][[span class="button button-2 button-red"]]Logout[[/span]][[/a]]
      <?php
      }
      ?>
      {/source}

      Now you'll find that the button says "Login" when you're not logged in and "Logout" when you are logged in.

      :)


      Regards, Mark.
    • Last Edit: 2 years 2 weeks ago by MrT.
    • The following users have thanked you: Chuck C., David Jakob, James Albury (aka Skip), Jami Dennis, Hugo Avila, C4, Henning, DanG, JohnnyDement, Max Power COM_KUNENA_THANKYOU_MORE_USERS

    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
  • Re: Creating a popup login form in Callisto

    Posted 3 years 11 months ago
    • What would be the correct link/text if I want to put the login button in my social bar? :)
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 82539
    • Thanks: 10472
    • Web Designer/Developer

    Re: Creating a popup login form in Callisto

    Posted 3 years 11 months ago
    • You don't put it in your social bar. Just put the custom HTML particle next to your social particle in the layout.

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
  • Re: Creating a popup login form in Callisto

    Posted 3 years 11 months ago
    • I'm getting an error when clicking no the login button:

      The element #Popup was not found in the DOM. (I used Popup instead mypoplogin)
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 82539
    • Thanks: 10472
    • Web Designer/Developer

    Re: Creating a popup login form in Callisto

    Posted 3 years 11 months ago
    • why deviate from my instructions? replicate my tutorial first then change what you need to after.

      Regards, Mark
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    • jsox's Avatar
    • jsox
    • Sr. Rocketeer
    • Posts: 104
    • Thanks: 3

    Re: Creating a popup login form in Callisto

    Posted 3 years 11 months ago
    • You can modify Mark's code slightly to get Logout yourusername

      caveats:

      i set my module instance to popup-login so the code below will show that, if you are using Mark's code word for word then change the instance of popup-login to mypoplogin as it is in Mark's code;

      my theme isn't red so I removed the button-red css class, and just used button button-2 to grab my themes default styling;

      {source}
      <?php
      $user = JFactory::getUser();
      $username = $user->username; // bit i added to allow for a more customized greeting
      if ($user->guest) { echo "<a href=\"#\" data-rokbox data-rokbox-element=\"#popup-login\"><span class=\"button button-2\">Login</span></a>";} else { echo "<a href=\"#\" data-rokbox data-rokbox-element=\"#popup-login\"><span class=\"button button-2 \">Logout $username</span></a>";}
      ?>
      {/source}

      this will give you full functionality of gantry 4 rockettheme login module, login, and logout username.

      thanks Mark for sharing the code. the more i use gantry 5 the more I like it, at first it was offputting, as I am used to doing everything via Joomla, but the power of the template backend is amazing and I learn more cool features everyday. it was a major change, but in this case, its good.
    • The following users have thanked you: findhab

    • tonnick's Avatar
    • tonnick
    • Hero Rocketeer
    • Posts: 393
    • Thanks: 2

    Re: Creating a popup login form in Callisto

    Posted 3 years 10 months ago
    • Hello

      I have a funny thing, when I click on "home" from my main menu, which is the homepage item of my website, the login popup is activated.

      So basically, when I am on other page than the home page, I cannot back to the homepage .... the only way is the link on the logo which work.

      Do you have any idea about this issue ?
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 82539
    • Thanks: 10472
    • Web Designer/Developer

    Re: Creating a popup login form in Callisto

    Posted 3 years 10 months ago
    • No idea without checking your site and you didn't post a link for me to check - nor any login details.

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    • tonnick's Avatar
    • tonnick
    • Hero Rocketeer
    • Posts: 393
    • Thanks: 2

    Re: Creating a popup login form in Callisto

    Posted 3 years 10 months ago
    • yes for sure, you can see it on dev.alcalina.net. I put the credentials in secure tab
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 82539
    • Thanks: 10472
    • Web Designer/Developer

    Re: Creating a popup login form in Callisto

    Posted 3 years 10 months ago
    • Tonnick - there was an error in my original code that cause the issue - I have corrected the code on your site and also corrected the tutorial.

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.

Time to create page: 0.145 seconds