[Support request] Button on the side of page – positions?

Home Forums Support Button on the side of page – positions?

  • This topic has 11 replies, 4 voices, and was last updated 4 months ago by Tom.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1287549
    Matthias

    I got a follow up question to this topic: https://generatepress.com/forums/topic/slide-out-bar/

    I played around with the plugin you recommended a little and really like it so far

    With the plugin you can create a code for a button that opens the slidebar as seen here: https://ps.w.org/off-canvas-sidebars/assets/screenshot-4.jpg?rev=1888961

    Not sure about the available positions gp offers
    Which position to insert the button-code to show it best on the left or right side of my gp theme?

    #1287804
    Leo
    Staff
    Customer Support

    Hi there,

    Not sure about the available positions gp offers
    Which position to insert the button-code to show it best on the left or right side of my gp theme?

    Sorry not sure if I understand.

    GP doesn’t offer any specific options for that plugin.

    Where did you want the button to show? I believe a hook element would be what you are looking for:
    https://docs.generatepress.com/article/hooks-element-overview/
    https://docs.generatepress.com/article/hooks-visual-guide/

    #1288230
    Matthias

    i want to show it on the right side of the page – somewhere around the middle.
    thought this was somehow a widget position.

    #1288949
    Tom
    Lead Developer
    Lead Developer

    Can you show us a screenshot of where you’re wanting to place it maybe?

    Let me know 🙂

    #1289159
    Matthias
    #1289248
    Tom
    Lead Developer
    Lead Developer

    Ah, so you would do this:

    1. Create a Hook Element: https://docs.generatepress.com/article/hooks-element-overview/
    2. Add your hook content:

    <div class="floating-button">
        Your shortcode here
    </div>

    3. Check the Execute Shortcodes checkbox.

    4. Set your Display Rules

    Then, you’d add this CSS:

    .floating-button {
        position: fixed;
        top: 45%;
        right: 0;
    }
    #1289985
    Matthias

    This didnt work.

    Is wp_head the right hook?
    I added the css to my child-theme style css.

    I added it
    a) for entire site and
    b) for the vision page – but it doesn’t show.

    What i tried also: it can be added as widget (it is available as widget (off-canvas-trigger)- which i added in the footer bar for testing) to test if it works – which it does.

    Also i tried adding the shortcode-code (via gutenberg shortcode block) to a page – which also works) – so the shortcode should be fine.

    You can see that on the vision page (button is grey on the left bottom).

    #1290046
    David
    Staff
    Customer Support

    Use the after_header hook for adding the HTML. WP_head should be reserved for meta,links and scripts…

    #1290482
    Matthias

    that actually worked now the button can be seen on the right side.

    A few follow ups though:

    1.is there a possibility to rotate it? (Text Bottom to top).

    2. position says fixed – if i read right what that means – it should stay on that position even when scrolling the page. This isnt the case.

    3. Also about further customization of the button (color, corners etc.)- this codes will work when i add to style-css code from tom right? (dumb question maybe – but im no programmer 😉 ) https://www.w3schools.com/css/css3_buttons.asp .

    4. if i want to add a 2nd button – i just have to do the same with different position and top in the css right?

    5. Also – i can’t just add a button created with gb for that right?

    6. Been asking myself 5 and – also about gutenberg in widget areas (as i want to fill the sidebars opened by the button with content next).

    #1290916
    Tom
    Lead Developer
    Lead Developer

    I wonder if a plugin like this might help more?: https://wordpress.org/plugins/sticky-side-buttons/

    It seems to do everything you’re looking for – it might be a better option?

    1. This should do it:

    .floating-button {
        transform: rotate(-90deg);
        transform-origin: 100% 100%;
    }

    2. Strange, it’s acting like it’s position: absolute instead of being fixed.. I wonder if there’s something conflicting. What if you use generate_after_footer for the hook?

    3. Correct – basic CSS will work.

    4. Exactly, just add another button inside the floating-button element.

    5. It’s not possible to hook Gutenberg elements at the moment, but we’re working on it.

    #1291464
    Matthias

    The slidebar plugin provided the button shortcode – thats why i didn’t think about using a plugin.
    Edit – just tried the plugin you linked. Sadly it can only link to url (and open in same or new tab) – shortcode does not work.

    1. Thx – that worked nicely.

    2. Yes – for some reason it was not floating.
    I tried the different hook as described on the plugin page – but it works (floating aside) with the recommended wp_body_open and wp_footer.
    generate_after_footer works also – but doesnt change behaviour.

    What did work: the plugin has some options for “Compatibility for fixed elements”. Before i had it set on:
    -> No (Use CSS3 transform with hardware acceleration), This is the default Slidebars behaviour.

    Changing it to:
    “Legacy CSS solution” (Use basic CSS positioning instead of CSS3 transform with hardware acceleration) This is your best option if your site uses sticky menus and/or other fixed elements within the site container.

    did make the button float.
    But in return it was stuck when opening the slidebar (meaning the bar floated over the button.) – instead of the button staying in front.

    Even more interesting: changing fixed to position: absolute; -> it floats together with the slidebar again. Deja vu :D. Guess i will try around a little and stay with non-floating if i didnt get it to work.

    3+4 thx – already playing around – but for some reason it doesn’t take over the changes (like font-size or color)

    5. sounds like a plan – btw- do you know this plugin – pages in widgets??

    #1292312
    Tom
    Lead Developer
    Lead Developer

    3+4: Make sure your CSS is specific enough. If you right-click + Inspect the element it will open developer tools and you’ll be able to see the CSS added.

    5. I haven’t, but it looks interesting 🙂

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.