XF 1.2 How can I put a sticky image here?

[Barbossa]

How can I put an image here which will stick there even you scroll?

 

[Lukas W.]

You could basically use the following code to create a sticky box down there:

.footer:after {
    content: "";
    background: #fff;
    position: absolute;
    width: 20px;
    height: 20px;
    display: block;
    bottom: 0;
    right: 0;
}

To receive a box sticking at the bottom right, but you'll need to do a bit more to have it scale corretly as it will either overlap the forum box next to it or leave a space between itself and the forum if you set it to a fixed with like in the example above.

 

[Barbossa]

You could basically use the following code to create a sticky box down there:

.footer:after {
    content: "";
    background: #fff;
    position: absolute;
    width: 20px;
    height: 20px;
    display: block;
    bottom: 0;
    right: 0;
}

To receive a box sticking at the bottom right, but you'll need to do a bit more to have it scale corretly as it will either overlap the forum box next to it or leave a space between itself and the forum if you set it to a fixed with like in the example above.

Kat, Its not getting sticky.

 

[Manoj_Kumar]

Try position: fixed instead of absolute.

 

[Barbossa]

Try position: fixed instead of absolute.

Another thing, if you put any text inside, content: ""; it shows. But not images!!

 

[Barbossa]

Try position: fixed instead of absolute.

It worked, thanks. Now can please tell me how to put image in it?

 

[Manoj_Kumar]

Use content: url(" "); Image source inside the quotes. Adjust width and height according to the image.

 

[Barbossa]

Use content: url(" "); Image source inside the quotes. Adjust width and height according to the image.

That did the trick!

Can I put any link there too? I mean, If someone click that image, it will go to any thread or any page?

 

[Manoj_Kumar]

Check this: https://developer.mozilla.org/en-US/docs/Web/CSS/::after

They have created a separate span and then called the attribute in the CSS. I have not done this before, but this will give you an idea. Otherwise, you can approach the method of normal div for the sticky image instead of :after.

<div class="stickyImage">
    <a href="#"><img src=" "></img></a>
</div>

And in CSS use this:

.stickyImage
{
         position: fixed;
         right: 0px;
         width: 200px;
         height: 200px;
}

 

[Barbossa]

Check this: https://developer.mozilla.org/en-US/docs/Web/CSS/::after

They have created a separate span and then called the attribute in the CSS. I have not done this before, but this will give you an idea. Otherwise, you can approach the method of normal div for the sticky image instead of :after.

<div class="stickyImage">
    <a href="#"><img src=" "></img></a>
</div>

And in CSS use this:

.stickyImage
{
         position: fixed;
         right: 0px;
         width: 200px;
         height: 200px;
}

That doesn't work.

 

[Manoj_Kumar]

Where have you tried my code?

 

[Barbossa]

I did put div in footer template and css in extra.css.

 

[Jake Bunce]

Add to EXTRA.css:

html
{
	background-attachment: fixed;
	background-image: url('path/to/image.gif');
	background-position: right bottom;
	background-repeat: no-repeat;
}

 

[Barbossa]

Add to EXTRA.css:

html
{
    background-attachment: fixed;
    background-image: url('path/to/image.gif');
    background-position: right bottom;
    background-repeat: no-repeat;
}

Thanks, but I want to click that image and want to go to a link.

 

[Barbossa]

@Ehren did exactly what I was asking for. Thanks mate.

Hello,

Remove your existing code, and add the following to extra.css

.fixedLink{ position: fixed; bottom: 20px; right: 20px; z-index: 9999; outline: 0; text-decoration: none; }

Your HTML (which can be added to the PAGE_CONTAINER template) will be:

<a href="http://www.link.com" class='fixedLink'><img src="http://www.site.com/image.png" alt="" /></a>

Change the URL of the href and image, and you're done.