Here's how to move the Tebex Bar (Tebex Ultimate or Tebex Premium Plan Required!)

[Kuchy]

I've gotten quite a few requests from people asking me how to move the tebex bar. Instead of having to repeat myself over and over I figured I'd make a guide on how to implement this. The following codes will allow you to move the tebex bar to the bottom ONLY. This method is completely allowed by Tebex as stated on their knowledgebase here:

You cannot disable the Tebex Accounts bar (And you are not allowed to hide it). This feature is in place to comply with GDPR and European Union regulations relating to data privacy. You are welcome to place it at the bottom of your webstore using custom CSS if you wish.

This guide will not tell you how to remove it or hide the bar but how to move it to the bottom (as this is what most people are requesting).

Disclaimer: If you use the following codes to hide/remove the tebex bar, I am not liable for consequences that will occur on your webstore. This guide is ONLY here to move the tebex bar to the bottom.



| For Tebex Premium Plan:
Notice: I do not recommend this way if you're on the Ultimate plan.

If you want the tebex bar at the bottom of the page (right below the copyright block):
Head over to your Tebex Panel and follow these steps:

1. Go to Webstore > Design > Appearance > Edit Flat Template > Edit theme (right box)
2. Add this code:
   

   body {
       margin-top: 0px !important;
       padding-top: 0px !important;
       position: relative;
   }
   
   .footer {
       margin-bottom: 75px;
       display: block;
   }
   
   .tebexLogin {
       position: absolute !important;
       top: unset !important;
       bottom: 0px;
   }

This code will not show at the bottom of the screen at all times but will show at the bottom of the page.
Preview:

| For Tebex Ultimate Plan:
Notice: This way will only work with the Tebex Ultimate Plan.

Head over to your Tebex Panel and follow these steps:

1. Go to Webstore > Design > Appearance > Edit your Activated Template > Edit Template (left box) > layout.html
2. Scroll down until you find the ending tag </body>
3. Add this code right before the ending tag </body>:
   

   <script>
   $(document).ready(function(){
       $(".tebexLogin").appendTo("body");
   });
   </script>

4. Then save and go to Webstore > Design > Appearance > Edit your Activated Template > Edit Theme (right box)
5. Add this code:
   

   body {
       margin-top: 0px !important;
       padding-top: 0px !important;
       position: relative;
   }
   
   .tebexLogin {
       position: relative !important;
       top: 0px !important;
   }

Preview:

| For either plan:
Notice: This way will work on either Tebex Ultimate or Premium plans.

If you want to display at the bottom at all times (even when scrolling):
Head over to your Tebex Panel and follow these steps:

1. Go to Webstore > Design > Appearance > Edit Flat Template > Edit theme (right box)
2. Add this code:
   

   body {
       margin-top: 0px !important;
       padding-top: 0px !important;
   }
   
   .footer {
       margin-bottom: 75px;
       display: block;
   }
   
   .tebexLogin {
       position: fixed !important;
       top: unset !important;
       bottom: 0px;
   }

This will show the tebex bar at the bottom of the screen at all times.
Preview:

Please do not ask me how to remove the bar entirely because I will not do this. Other than that, feel free to ask me any questions.

 

[Kuchy]

Thank you, nobody likes the dumbo bar they decided to stick on there.

No problem; however, it is still required to be visible on the webstore. Personally, the bar looks nicer at the bottom anyways.

 

[Kuchy]

Usually people just remove the bar ngl, nobody wants that thing there.

True but that's completely all them. I won't provide a guide on how to remove it for the reasons stated in the thread. I'm glad you appreciate this post though.