The Avatar RP | An Avatar: The Last Airbender Roleplay

Guest Avatar

Welcome, Guest!

Please Login or Register.

Previously, on Avatar...

Plot Update 10 March 2021

A year has passed since Fire Lord Zuko ascended the throne, and it seems like trouble is brewing between the Fire Nation and the Earth Kingdom once more. The Fire Lord and the Avatar began the Harmony Restoration Movement to restore the Fire Nation Colonies to their pre-war state by bringing any Fire Nation nationals back home, but for many of the citizens — of mixed Fire Nation and Earth Kingdom … Read more ›

The Moderation Team

Latest TARP News

SITE UNDER CONSTRUCTION

We're making some changes to adjust to our new plot. Sorry for the delay! We will be up and running shortly.

Mike & Bryan leave Netflix Adaptation

The original creators of ATLA quit the Netflix series, citing creative differences & an unsupportive environment.

A slideable bar

Nefra
Apr 2, 2013 5:59:19 GMT -6

Post by Nefra on Apr 2, 2013 5:59:19 GMT -6

Guest Avatar
Hello there! :)
Sorry if my question can't be answered, but I was looking and asking everywhere and I wouldn't get any help.
The think I want to ask about is the "Credits and Rating" slideable sidebar you have. Could you maybe let me know where the code for this bar is, or maybe offer any help concerning that? I'm making a Polish forum, also connected with Avatar, and I'd like this sidebar for news and stuff like this.
I'd be greatful for any help, and sorry for taking your time. :)
This user is a guest

Post by A Long Display Name Here on Apr 2, 2013 14:06:45 GMT -6

A Long Display Name Here Avatar
Hello! The code we are using is as follows. You should put this in your CSS file, or between <style type="text/css"></style> tags.

/* Slide Tab Left */
#slidingtab { position: fixed; top: 30%; left: -180px; width: 200px; height: auto; border-radius: 0px 0px 10px 10px; -moz-border-radius: 0px 0px 10px 0px; z-index: 3; transition: .5s all ease-in-out; -o-transition: .5s all ease-in-out; -moz-transition: .5s all ease-in-out; -webkit-transition: .5s all ease-in-out; }
/*Left should be the same value, only in negative numbers, as the content block you’re trying to hide.*/

#slidingtab:hover { left: 0px; transition: .5s all ease-in-out; -o-transition: .5s all ease-in-out; -moz-transition: .5s all ease-in-out; -webkit-transition: .5s all ease-in-out; }
/*This makes it slide out. The transitions listed here already are Chrome, Safari, Firefox, and default. Left being set to zero sets it to the default left side of the border.*/

#tabs_content_block { font-size: 9px; font-family: georgia; display: block; width: 180px; height: auto; background: #3f3627; color: #cec5af; float: left; padding: 0px !important; text-align: justify; .5s all ease-in-out; -o-transition: .5s all ease-in-out; -moz-transition: .5s all ease-in-out; -webkit-transition: .5s all ease-in-out; border-radius: 0px 0px 10px 0px; -moz-border-radius: 0px 0px 10px 10px; z-index: 100; }
/*This is the content block coding.*/

#slidingtab_tab { display: block; width: 20px; height: auto; padding-top: 2px; padding-bottom: 2px; text-align: center; background: #3f3627; color: #cec5af; float: right; border-top-right-radius: 10px; border-bottom-right-radius: 10px; .5s all ease-in-out; -o-transition: .5s all ease-in-out; -moz-transition: .5s all ease-in-out; -webkit-transition: .5s all ease-in-out; }
/*This is the tab.*/


This is the CSS for the tab. The content between /* and */ are comments — anything between those two markings will not show up on your forum/site, nor will it affect the code itself. .5s refers to how fast or slow you want the tab to slide out. Areas I've marked in red are values you need to change based on what the font face & colour scheme are of your forum, and areas I've marked in purple are values you need to change for how wide or narrow you want the tab box and content box to be.

The tab itself is as follows:

<div id="slidingtab">
<div id="tabs_content_block"><p style="padding-left: 5px!important; padding-right: 5px; padding-top: 2px; padding-bottom: 2px;">Place the content to be hidden here.</p></div>
<div id="slidingtab_tab" style="display: inline;">This is the tab that you see at first. This can be an image or text. </div>
</div>


This will need to go in your global footers, or under any code that dictates the body of the forum.

Credit goes to jitaroo and drawgirldraw for helping with this code. If you use it, please credit them & us. Thank you!
This user is Mod