Archived topic
Customized sidebar
2 replies · Started by Matthias on June 17, 2022
Hi there,
i played around with a sticky contact button bar for a while - but now decided to go with a sidebar using the Off-Canvas-Sidebars Plugin.
I had some trouble getting this to work with a sticky generateblocks button - but using Legacy CSS solution its now working. Except the looks.
So my question:
Could you help me customize the sidebar to work with gb (used inside the sidebar as widget) and the gb button (used to open/close the bar)?
What i am trying to achieve:
1. adjust the width & position of the bar. currently it opens full height. width can be adjusted in the plugin settings. I would like to position it parallel to the button -> so when you click the button a bar at the same height & positon as the button appears
2. cursor: i added a css class to the button to open the bar. But that way when you hover over it is not recognized by the mouse - meaning it doesn't change from arrow to hand like when you hover over a link. Can i add this so users recognize its a link by that change? The bar can also be opened by shortcode
[ocs_trigger id="email"]
This could also be an alternative but i couldnt get this to look nice with a headline
3.Bonus: sticky button on top of bar. If possible - can the button be sticky not only to the website scrolling down - but also to the sidebar? Meaning: currently - when i use the button to open the sidebar, the bar slides over the site and covers part of the website including the button. Is there a way to push the button also? So the bar is open and the button still is in front of the bar?
Hope this was somewhat understandable
Hi Mattias,
1. You can try adding this CSS in Appearance > Customize > Additional CSS:
div#ocs-email {
height: fit-content;
top: 50%;
}The right CSS rule is generated through JS by your plugin though. Are you able to change this through the settings?
2. Here’s a CSS you may try:
.sticky-sidebar-buttons:hover {
cursor:pointer;
}3. The right CSS rule as mentioned is generated by JS through the plugin. It’s added on click of the button. What you can try is adding this CSS:
div#ocs-email[style*="display: block"] {
right:71px !important;
margin-right: 0 !important;
}This overrides the CSS added via JS. Kindly modify the values to your preference.
Hope this helps!
thx a lot - almost perfect.
1. i tried to adjust the width (space after text is quite large) - without success.
4.i decided to go for a larger sidebar then the button - and add a vertical text instead.
But somehow the vertical text is wrongly aligned. I choose right in the headline block - but it is still centered.
I would like to have the vertical text of the opened sidebar at the same position as the text of the button (when sidebar is not shown) - so basically like i set it already: right side aligned.
btw fyi - i discovered a weird problem with generateblocks.
Until now i a) created the sidebar in the plugin settings, b)created the sidebar via generateblocks in the widgets (main container + grid with 4 subcontainers with 1 headline each). That way for some reason colors and margins were set for all 4 subcontainers if i changed them in 1 headline.
Looking for a way out of thhis annoying behaviour i Now just saw that the sidebar plugin offers the possibility to use a custom hook ( Custom -> Action hook: ocs_custom_content_sidebar_email ). Therefore i created a new block element with the custom hook. This works normally with margins and colors (i also prefer it over widgets - where editing with gutenberg currently isnt't that well developed) - so i skipped the widget for a new element.
