Several members have asked me if it's possible to add a fixed position panel to their Gantry 5 templates. Often this requirement is borne of a desire to have a login or contact forum on the page but not have it use up valuable screen real estate. So, I've come up with this new particle that I've called "StickyPanel".
The "StickyPanel" particle allows you to add a tab in a fixed position of your page and when you click on the tab a panel slides out to show your content. The tab and panel can be attached to the left, right, top, or bottom of your page and placed wherever you need it. Furthermore, the content can be sourced from the particle itself or (if you're using the Joomla CMS) a Joomla Module. The particle can be used in Joomla, Wordpress or GRAV.
Even more exciting is that you can use many of these particle all on the same page, so if you really wanted to go crazy you could have a whole load of these tabs on the side, top, or bottom of your page each opening different content.
This is what it looks like:
This image is hidden for guests.
Please log in or register to see it.
Ok, hopefully I have you attention now so let's get the particle installed (Joomla only - look for the equivalent locations in GRAV or Wordpress
here
).
1. From the ZIP file copy stickypanel.yaml and stickypanel.html.twig to /templates/TEMPLATENAME/custom/particles (note you may need to create this folder).
2. From the ZIP file copy _stickypanel.scss to /templates/TEMPLATENAME/custom/scss (note you may need to create this folder).
3. Open your existing custom.scss file (or add one to /templates/TEMPLATENAME/custom/scss) and at the top add this line:
So, now we're ready to actually use the particle.
4. Drag and drop the stickypanel particle on to the layout of your outline and click on the settings cog in the particle. Complete the settings (they should all be self explanatory):
This image is hidden for guests.
Please log in or register to see it.
This should also help with understanding what the fields mean:
This image is hidden for guests.
Please log in or register to see it.
Tips:
1. Pay attention to the field tooltips for settings and the info panels - there's good advice therein.
2. Don't go too crazy! You could end up with lots of panels overlapping if you're not careful.
3. You might want to hide a stickypanel in mobile view as the viewport often gets too small to show panel content well - just add "hidden-phone" class to the "block" tab of the particle settings to hide the panel in mobile view.
4. Do test in all viewport sizes.
I hope you find this particle useful.
Any questions or suggestions please ask.
Regards, Mark.
The following users have thanked you: Joombler, Henning, Ed Williams, Reggie Simmons, Ron Miller, Zbigniew Sokal, Bigfly