• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.2 How can I put a sticky image here?

katsulynx

Well-known member
#2
You could basically use the following code to create a sticky box down there:
HTML:
.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

Active member
#3
You could basically use the following code to create a sticky box down there:
HTML:
.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. :(
 
M

Manoj_Kumar

Guest
#9
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.

Code:
<div class="stickyImage">
    <a href="#"><img src=" "></img></a>
</div>
And in CSS use this:

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

Barbossa

Active member
#10
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.

Code:
<div class="stickyImage">
    <a href="#"><img src=" "></img></a>
</div>
And in CSS use this:

Code:
.stickyImage
{
         position: fixed;
         right: 0px;
         width: 200px;
         height: 200px;
}
That doesn't work. :(
 

Jake Bunce

XenForo moderator
Staff member
#13
Add to EXTRA.css:

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

Barbossa

Active member
#15
@Ehren did exactly what I was asking for. :) Thanks mate.
Hello,

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

Code:
.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:
Code:
<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. :)