Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] widget vertical-position in sidebar – using customizer and simple-css

Home Forums Support widget vertical-position in sidebar – using customizer and simple-css

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #432338
    Clemens

    Hi.

    I want to insert an image into the right sidebar. It has to be aligned to the right and to the bottom of the sidebar. Above the footer. I used the “custom-html-widget” and “text-align:right” but I couldn’t figure out how to get the image fixed to the bottom of the sidebar. Any simple idea? – Thanks!

    GP Premium 1.5.5
    #432759
    Leo
    Staff
    Customer Support

    Hi there,

    I can’t quite picture what you mean. Can you provide an example or link me to what you have so far?

    Thanks!

    #432927
    Clemens

    I’m rebuilding and changing the following quite old website to wordpress. There is a small image of the doctor that should be inserted into the right sidebar. It has to be aligned to the right inside the widget (that was easy with “text-align right”) and it always has to stay on the bottom just above the footer. That’s may problem. It should be easy but I couldn’t find a way. The wordpress installation is still on my laptop under MAMP. Thanks!

    http://www.praxis-klein-galczinsky.de/

    #433146
    Leo
    Staff
    Customer Support
    #435806
    Clemens

    Doesn’t work. Width the footer hook the image stays outside the right sidebar.
    I can get the image inside the right sidebar using sidebar-widgets or the sidebar-hook. But it stays up in the sidebar and not at the bottom.
    Related to the length of the main content the image should always keep its position in the sidebar just above the footer-widgets.

    Maybe there is a command I could use in simple-css …

    Thanks.

    #436121
    Leo
    Staff
    Customer Support

    Ahh give this hook a shot: https://docs.generatepress.com/article/generate_after_right_sidebar_content/

    Can also try applying it as a background image for the sidebar.

    #436179
    Clemens

    I did. It works to get the image below the content of the sidebar. But I couldn’t find a proper command to stick it to the bottom of the container and aligned to the right. I am not really professional with css and html, so I was searching for hours in the internet.

    #436199
    Leo
    Staff
    Customer Support

    Are you able to show me what you have on a live site?

    This kind of problem is nearly impossible to solve without seeing it.

    #436202
    Clemens

    Yes I know. The site is on my laptop running in MAMP. So it’s not so easy to show it. Maybe in the next two days I manage to move it on a live server. I tried to send a screenshot but the forum doesn’t like it.

    #436203
    Leo
    Staff
    Customer Support

    Screenshots can be upload to a site like this: https://postimages.org/

    and you can just provide the direct links here.

    Not sure if it would help in this situation though. A live site will definitely makes things easier for us.

    #436206
    Clemens

    The thing should be quite easy. I have to tell the right sidebar to be as high as the single content inside the container. And then to tell the image to stay on the bottom of this sidebar. Maybe a command using “display:flex” or something else …

    #436218
    Clemens

    Two screenshots: https://postimg.org/gallery/2ev0jss14/

    Thanks.

    #436519
    Tom
    Lead Developer
    Lead Developer

    You can force the sidebar to the as tall as the content like this: https://generatepress.com/forums/topic/equal-length-columns/page/2/#post-38550

    However, I would probably go with a slightly different method.

    It’s hard to give you exact code without seeing your site, but try adding the image into the Inside Content Container hook, and give it a class:

    <img src="..." class="doctor" />

    Then add some CSS:

    .doctor {
        position: absolute;
        right: 0;
        bottom: 0;
    }
    #442579
    Clemens

    Back again. Now You can find the site on a live server. I tried all Your suggestions but the little doctor won’t stay on the bottom of the right bar aligned to the right. Now it is on the bottom of the content – Any new idea to get the image where it should be? – Thanks.

    http://hausarztpraxis-am-weitzesweg.de

    #442753
    Tom
    Lead Developer
    Lead Developer

    Try using this function instead of a built in hook:

    add_action( 'generate_inside_container', 'tu_add_doctor_image' );
    function tu_add_doctor_image() { ?>
        <img src="URL to image" class="doctor" />
    <?php }

    Then this CSS:

    .site-content {
        position: relative;
    }
    
    .doctor {
        position: absolute;
        bottom: 0;
        right: 20px;
    }
    
    .inside-right-sidebar {
        padding-bottom: 200px;
    }
Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.