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
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
Post a Comment