Creating a popup login form in Callisto
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
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:Now save the particle.<a href="#" data-rokbox data-rokbox-element="#mypoplogin"><span class="button button-2 button-red">Login</span></a>
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: 7 years 11 months ago by MrT.
-
The following users have thanked you: Chuck C., Adi Heutschi, James Albury (aka Skip), Jami Dennis, Hugo Avila, C4, Henning, DanG, Josep M, 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.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
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.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
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
- Sr. Rocketeer
- Posts: 104
- Thanks: 3
-
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
- Hero Rocketeer
- Posts: 393
- Thanks: 3
-
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
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
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.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
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.067 seconds