how to make a sticky ad on sidebar-below in XenForo

[gumya]

Am using XenForo default template, how can i make a sticky ad on sidebar-below?

 

[ENXF NET]

1. First download and unzip the file jquery.sticky-kit.min.js attached below, copy it to the js/sticky-kit folder
2. Open the helper_js_global template, insert the following code at the bottom of the template content:

<script src="js/sticky-kit/jquery.sticky-kit.min.js"></script>
<script>
$(".stickyside").stick_in_parent({parent:".pageContent", offset_top:35});
</script>

You can edit the top alignment at the offset_top (px) option if you want to match the site interface

3. Create widgets using Widget Framework with the following structure:

<div class="stickyside">
Code widget
</div>

 

[gumya]

Is this the footer template you mentioned?

Once I insert the JS Code into footer.less template the site start Misbehaving like this

 

[gumya]

1st Step:

3rd step:

 

[ENXF NET]

insert it here helper_js_global

 

[gumya]

Like this? It's not working, no effect at all. Can you double check please, or am i missing something?

 

[ENXF NET]

@gumya I will try it again

 

[gumya]

Thank you, I'll be waiting...

 

[Miss98]

1 - You don't put the script in helper_js_global
2 - Then you put this code in the template you want :

<div class="stickyside">
<xf:widget key="widget_key" />
</div>

Change the widget key

 

[gumya]

@Miss98 Can you clarify step no.1 please

 

[Miss98]

Below this code : <!--XF:JS--> http://prntscr.com/u5k73u

 

[Miss98]

Other solution :

In the PAGE_CONTAINER template looks for : <footer class="p-footer" id="footer">
Add above : <div class="sticky_1">Ad test sticky, this is a test ad . . . </div>

In extra.less adds :

.sticky_1 {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  text-align: center;
  background-color: #185886;
  padding: 10px;
  font-size: 20px;
  z-index: 9999;
}

Result : http://prntscr.com/u5lqbh

If you want the ad at the top :
Change : bottom: 0; by : top: 0;

 

[gumya]

Thank you