0
Welcome Guest! Login
0 items Join Now

StickyPanel Particle - Freebie by MrT

    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 87720
    • Thanks: 11341
    • Web Designer/Developer

    StickyPanel Particle - Freebie by MrT

    Posted 1 year 3 months ago
    • 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:
      @import "stickypanel";

      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.
    • Last Edit: 1 year 3 months ago by MrT.
    • The following users have thanked you: Henning, Ed W., Reggie Simmons, Ron Miller, Zbigniew Sokal

    • 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: StickyPanel Particle - Freebie by MrT

    Posted 4 weeks 17 hours ago
    • Hi Mark,

      This is extremely handy! Finally found a use for this one... as an index for a glossary !

      I was able to make this as a module, and then use the same module on two separate pages.

      Suggested feature request... :) A check box for "opened on load" or "closed on load." Is this possible?
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 87720
    • Thanks: 11341
    • Web Designer/Developer

    Re: StickyPanel Particle - Freebie by MrT

    Posted 4 weeks 17 hours ago
    • It's a freebie from me - so go ahead and change anything you want to add more features. I won't be changing this any further I'm afraid.

      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.095 seconds