button activation

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

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 6 years, 9 months ago by Brogaard.

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 6 years, 9 months ago by Brogaard.
• This reply was modified 6 years, 9 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 6 years, 9 months ago by Brogaard.

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