Support » Plugin: Off-Canvas Sidebars & Menus (Slidebars) » button activation

  • Resolved Brogaard

    (@jenzgaard)


    Hi there, thx for you plugin 🙂

    The idea is to create a button “Psst” on the far left side of the homepage, and not a menu, which toggles the canvas.
    Your plugin works when enabling via the menu. But when putting the ‘Off-canvas control’ widget into Off-canvas widget area nothing is to be seen? What am I missing here?

    Looking forward to your findings 😉
    Best Jens

    • This topic was modified 1 year, 6 months ago by  Brogaard.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Jory Hogeveen

    (@keraweb)

    Hi @jenzgaard,

    You should put the trigger buttons outside of the off-canvas area since that would be hidden on pageload.

    I’d say add it to the #trigger-wrapper where you have the widget and search triggers and align it all the way left (float: left; or probably the class alignleft).

    Let me know if you need help!

    Regards, Jory

    Plugin Author Jory Hogeveen

    (@keraweb)

    Hi @jenzgaard,

    I see you’ve sorted your issue, great!
    Keep in mind that all CSS markup etc. is not done by this plugin. This plugin is meant as a framework for off-canvas sidebars and menu’s, all UI should be done in your theme!

    Good luck and let me know if you need help!

    Also, if you like the plugin, please consider leaving a nice review, it will help the plugin grow 🙂

    Cheers, Jory

    Hi @keraweb , sorry for not getting back sooner.

    Thanks for the hint of placing the trigger outside of the area. That made it appear.

    But how do I place the button 10% down on the left of the window (outside of the top roll-down curtain widget area)?

    I found #trigger-wrapper in the global css but then what? I tried to write:
    .ocs-toggle-psst{ align-content: left; }
    Didn’t expect it would work…

    On the way to make a review 🙂

    • This reply was modified 1 year, 6 months ago by  Brogaard.
    Plugin Author Jory Hogeveen

    (@keraweb)

    Hi @jenzgaard,

    Do you mean to place it just like the carrot?
    If so, you should use position: fixed; and put it outside of the whole site to get it working properly.

    If you need to put it in the roll-down you should use the legacy CSS option of this plugin (global setting). After that you can use fixed elements within your website.

    align-content: left; will only work with flexboxes, this is not placement CSS.

    If would be something like this:

    .ocs-toggle-psst{
        position: fixed;
        left: 0;
        top: 10%;
    }

    Also keep in mind that this will only affect that single trigger button, not the whole widget which might be better for UI. (#top-sidebar-one .widget.off_canvas_control)

    Thanks for your review!

    Regards, Jory

    Exactly like the carrot but would prefer your slide-out.

    I’ve now put your code .ocs-tog… in the css styling customizer. I guess that’s not all – what’s missing in order to show the button and content?
    Also put
    <button class="ocs-trigger ocs-toggle ocs-toggle-psst">psst!</button>
    after <body…

    Sorry for these questions but I guess I’m almost there 😉 Actually it’s an issue about if you can use this plugin outside of the widget area and menu bar.

    • This reply was modified 1 year, 6 months ago by  Brogaard.
    • This reply was modified 1 year, 6 months ago by  Brogaard.

    Seems something’s right – it’s there but just not on the frontpage 😉 I’ll try doing things…

    • This reply was modified 1 year, 6 months ago by  Brogaard.
    Plugin Author Jory Hogeveen

    (@keraweb)

    Hi @jenzgaard,

    No my code was just an example. Also, you’ll need to enable legacy-css to get fixed elements working within the canvas container.

    And yes, you can use shortcodes and PHP functions to add trigger buttons outside of menu’s and widgets.

    PHP: https://github.com/JoryHogeveen/off-canvas-sidebars/wiki/PHP-API#the_ocs_control_trigger

    Shortcodes: https://github.com/JoryHogeveen/off-canvas-sidebars/wiki/Shortcodes

    Again, keep in mind that all CSS markup etc. is not done by this plugin.
    This plugin is meant as a framework for off-canvas sidebars and menu’s, all UI should be done in your theme! So if you are uncomfortable with CSS and front-end webdevelopment then this plugin might not be your best choice.

    Seems something’s right – it’s there but just not on the frontpage 😉 I’ll try doing things…

    That is because it’s not in legacy-css mode. Fixed elements will behave as absolute elements within the canvas container in default mode. This is the default for the Slidebars JS library.

    Cheers! Jory

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘button activation’ is closed to new replies.