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

[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!

[Leo]

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!

[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/

[Leo]

What about using the before footer hook?
http://demo.generatepress.com/hook-locations/
https://docs.generatepress.com/article/hooks-overview/

[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.

[Leo]

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.

[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.

[Leo]

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.

[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.

[Leo]

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.

[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 …

[Clemens]

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

Thanks.

[Tom]

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;
}

[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

[Tom]

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;
}

[Author]

Posts