Seems pretty solid!

Hi @lijitimit

Thanks you for your kind words! I’m trying my best to get this as cross-template compatible as I can. Good to hear it works for you. May I ask what template you are using and if you needed to do this simple theme setup or your theme supported the right actions by default?

As for your feature request, sounds like a nice feature to have. I’ll put it on the list to implement.
Any thoughts on how you would like to use this in regards to shortcode arguments?

Some ideas:

[ocs_trigger id="sidebarid" type="toggle" button="1" element="button" text="My button"]

id = your defined sidebar ID
type = trigger type (options: toggle, open, close)
button = wether to add a button class
element = The type of HTML element (normally would be <button> or <a>)
text = The actual text to display for your element. Can also be HTML for an icon for example

Let me know what you think!

• This reply was modified 8 years, 1 month ago by Jory Hogeveen.
• This reply was modified 8 years, 1 month ago by Jory Hogeveen.

Hi Jory,
I’m using Showcase Pro child theme (Genesis). Simple theme install worked fine using “Genesis Simple Hooks” plugin to place the code.

Seems your shortcode arguments would work great. Having the option to add a button class or not is nice for the user.

OTHER NOTES:
– My theme is overriding any css you are adding to the button for the off canvas control widget. Seems like a conflict that will happen a lot for people as most themes have some sort of button class and sometimes it will play nice, sometimes not. An idea is to add options in the settings or widget settings for “background color”, “text-color” maybe padding etc. so people can match to their theme manually and you can use a unique class such as .ocs-button to avoid conflicts. Have a look at my test site https://sandbox.lijitimit.com/category/candidates/ to see the issues.

– Not seeing a “close” button inside the activated off canvas sidebar. Is that something that needs to be manually added? I see there is a hook ocs_container_inner_before so I suppose something could be put there. I’ve seen other off canvas plugins add a “header div” before the container content to show a close button or link.

– Out of the box, it seems the activated sidebar container has no margin or padding. This is actually a good thing in my opinion, however some may not know what to do with it or how to style it. I love it when devs give a css selector “cheatsheet” with an example for the common elements:

#ocs-off-canvas-left {
    padding: 20px;
}

Might save you some time in the forums with the “how do I change the link color?” questions ??

– The top of the activated OCS is cut off by the WordPress admin bar.

Again, quite happy with what you’ve done here. You’ve given a solid framework for people to work from. If you’d like, I’m happy to jump over to github for anything further I find, or I can post here.

Ah a Genesis theme!
Just so you know, no changes are needed for a Genesis theme :). Genesis already has the genesis_before and genesis_after hooks and this plugin will recognize these with any Genesis based theme automatically.

I’ve added the shortcodes to the todo list: https://github.com/JoryHogeveen/off-canvas-sidebars/issues/24

Let me quickly respond to your ideas!

– My theme is overriding any css…
Correct, this plugin does absolutely nothing with front-end CSS other than off-canvas handling at this point. It’s all up to the user to define it with their own CSS.
I am thinking about the option to add custom CSS from within the plugin settings though (https://github.com/JoryHogeveen/off-canvas-sidebars/issues/20)

So in short. The button class option is meant to be picked by the theme, what happened with your installation is exactly what it should do!
The only thing is that your theme isn’t ready to handle icons within button classes.
In your case, simply add this to your theme CSS:

button .icon, 
input[type="button"] .icon, 
input[type="reset"] .icon, 
input[type="submit"] .icon, 
.button .icon {
	margin-bottom: 0;
	vertical-align: text-bottom;
}

– Not seeing a “close” button inside the activated off canvas sidebar.
Correct, you can decide for yourself where and how to put your content. Either with an actual WP Sidebar, a WP Menu or a custom hook.

In case of a sidebar:
Add a text widget with a close button or add the Off-Canvas controller widget

In case of a menu:
Simply add the controller items to the menu

In case of custom code:
You get the picture ??

– Out of the box, it seems the activated sidebar container has no margin or padding.
You can set the padding within the sidebar settings. Other than that it’s a custom CSS thing.
I think this is relevant to the first item and idea: (https://github.com/JoryHogeveen/off-canvas-sidebars/issues/20)

– The top of the activated OCS is cut off by the WordPress admin bar.
I am aware of this “bug”. Unfortunately, this is due to how fixed elements work within a browser.
Unless I create some custom JS to check if the admin_bar exists, there is nothing I can do about this with the Slidebars jQuery plugin because of it’s structure.
There are some other issues which are related to this like smooth-scrolling libraries and fixed elements within the site container (like sticky menu’s etc).
This is all work in progress! (It might even result in me writing my own off-canvas library instead of using Slidebars…)

If you find anything, feel free to post an issue on GH so I can check it!
https://github.com/JoryHogeveen/off-canvas-sidebars/issues

Please be aware that I am not putting a 1.x version out untill all issues with the Slidebars structure is fixed.

Thanks again!

• This reply was modified 8 years, 1 month ago by Jory Hogeveen.
• This reply was modified 8 years, 1 month ago by Jory Hogeveen. Reason: Improve CSS

Hi @lijitimit

First commits are done and the shortcodes are planned for the next release!

See here for the documentation/wiki:
https://github.com/JoryHogeveen/off-canvas-sidebars/wiki/Shortcodes

I’ve extended the initial idea to support nested content in shortcodes aswell.
Also, you can add other attributes as you like.

Let me know if you have more ideas and again, thanks for your review!