Add Back-to-Top button to your Tikiwiki

When browsing the Tikiwiki forum, I noticed the Back-to-Top button which is pretty useful and I want to bring it to my own Tikiwiki. But, the thing is there is no documentation about it so I have to look into the HTML source of the forum. It turned out that It's quite simple:

1. What you need to do first is to create a custom module:

http://your-tikiwiki-url/tiki-admin_modules.php

In the Custom Modules tab -> Add this to the Data text field:

<div class="backtotop"><a href="#top" title="Back To Top">⌅</a></div>

-> Click Save

2. Then, assign the custom module to the Bottom section:

Go to Assigned Modules -> Bottom tab -> Add module -> Select your Back to Top module
Make sure these parameter was set:

Position: bottom
Parameters: nobox=y

-> Click Assign

3. Go to Look & Feel, Customization tab, add this CSS:

.backtotop {
bottom: 3rem;
position: fixed;
right: 3rem;
}
.backtotop a:after {
border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(255, 255, 255, 0.5);
border-style: none solid solid;
border-width: 0 1rem 1.5rem;
content: "";
display: block;
left: 0.5rem;
position: absolute;
top: 0.6rem;
}
.backtotop a {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.25);
border-radius: 12.8rem !important;
color: rgba(255, 255, 255, 0.5);
display: block;
font-size: 400%;
height: 3rem;
line-height: 58%;
margin-right: 0;
overflow: hidden;
position: relative;
text-align: center;
text-decoration: none;
text-indent: -999rem;
width: 3rem;
z-index: 1;
}
.backtotop a:active, .backtotop a:focus {
outline: none;
}

4. Click Apply and enjoy

Comments