Jump to content
This months Spotlight RPGs
  • Spotlight RPG
  • Spotlight RPG
  • Spotlight RPG
  • Spotlight RPG
  • Spotlight RPG
Search In
  • More options...
Find results that contain...
Find results in...
Sign in to follow this  
Followers 0
Brocade

Recommended Posts

Brocade    1

Brocade
Posted

So, I figured that I would share this here, since it is a pretty nifty little thing that I love.

 

It is a simple DOHTML, animated scroll of the medieval style. When you hover, it drops down to reveal whatever you put within. The base hover code is not mine; I found it years ago and forgot where exactly it came from. The tabbing within the code and the scroll images are mine. You may edit it to your heart's content! No need to credit, but a comment showing me where you use it would be cool! I'd love to see how you incorporate it into a roleplay. :D

 

This would be perfect for character applications, post templates, or any sort of character communication!

 

Preview: Animated Hover Scroll

 

Code:

  

[dohtml]
<link href='http://fonts.googleapis.com/css?family=IM+Fell+English:400italic|IM+Fell+DW+Pica:400italic' rel='stylesheet' type='text/css'>
<style type="text/css">
.scrollshell {
width: 472px;
margin: auto auto;
}
.scrolltop {
position: relative;
z-index: 100;
}

.scrollbot {
position: relative;
z-index: 101;
}

.scrollmiddle {
background-image:url("http://i986.photobucket.com/albums/ae347/blue-moon-stock/scrollmiddle_zpsecb97719.png");
background-repeat: repeat-y;
height: 0px;
padding-left: 60px;
padding-right: 60px;
overflow: hidden;
position: relative;
z-index: 99;
-webkit-transition: all 1.5s ease;
-moz-transition: all 1.5s ease;
-o-transition: all 1.5s ease;
-ms-transition: all 1.5s ease;
transition: all 1.5s ease;
}

.scrollshell:hover .scrollmiddle {
height: 500px;
overflow: auto;
-webkit-transition: all 1.5s ease;
-moz-transition: all 1.5s ease;
-o-transition: all 1.5s ease;
-ms-transition: all 1.5s ease;
transition: all 1.5s ease;
}

.titletext {
font-family: IM Fell English;
font-size: 21px;
color: #0F0D00;
line-height: 20px;
text-align: center;
margin-top: 10px;
}

.writetext {
font-family: IM Fell English;
font-size: 15px;
color: #0F0D00;
line-height: 15px;
text-align: justify;
}

.footertext {
font-family: IM Fell DW Pica;
font-size: 16px;
color: #0F0D00;
line-height: 20px;
text-align: right;
</style>
<html>
<div class="scrollshell">
<div class="scrolltop"><img src="http://i986.photobucket.com/albums/ae347/blue-moon-stock/scrolltop_zps5fb555d5.png"/></div><div class="scrollmiddle">
<div class="titletext">

<img src = "http://i986.photobucket.com/albums/ae347/blue-moon-stock/bastettavicboxkingzoidlord_zps863e8202.png">
<br>
Fluffly Catbutt
</div>
<br><br>
<div class="writetext">

<style type="text/css">

.tabs {
position: relative;   
min-height:545px; /* This part sucks */
clear: both;
margin: 25px 0;
}
.tab {
float: left;
}
.tab label {
background: #deb887; 
padding: 10px; 
border: 1px solid #ccc; 
margin-left: -1px; 
position: relative;
left: 1px; 
}
.tab [type=radio] {
display: none;   
}
.content {
position: absolute;
top: 28px;
left: 0;
background: burlywood;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc; 
}
[type=radio]:checked ~ label {
background: burlywood;
border-bottom: 1px solid white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
</style>

<div class="tabs">
  
 <div class="tab">
     <input type="radio" id="tab-1" name="tab-group-1" checked>
     <label for="tab-1">Basic Info</label>
     
     <div class="content">
Player Name:<br>
AIM:<br>
Yahoo:<br>
<br>
        <ul>
<li><b>Age:</b> 20</li> 
<li><b>Race:</b></li>
<li><b>Gender:</b></li>
<li><b>Alignment:</b></li>
<li><b>Home location:</b> </li>
<li><b>Current Location:</b></li>
<li><b>Leaves:</b> 500</li>
<li><b>Alliance:</b></li>
</ul>
<br>
<br>
<br>
<b> Stats</b>
        <ul>
<li><b>Strength:</b></li>
<li><b>Dexterity:</b></li>
<li><b>Constitution:</b></li>
<li><b>intelligence:</b></li>
<li><b>Charisma:</b></li>
</ul>
<b>Health:</b> 100%
<b>Stamina:</b> 100%
<b>Mana:</b> 100%
     </div> 
 </div>
 
 <div class="tab">
     <input type="radio" id="tab-2" name="tab-group-1">
     <label for="tab-2">Skills</label>
     
     <div class="content">
     <ul>
<li>Level 1 Skills</li>
<br>
---
<br>
<li>Level 2 Skills</li>
<br>
---
<br>
<li>Level 3 Skills</li>
<br>
---
<br>
<li>Level 4 Skills</li>
<br>
---
<br>
<li>Level 5 Skills</li>
<br>
---
<br>
     </div> 
 </div>
  
  <div class="tab">
     <input type="radio" id="tab-3" name="tab-group-1">
     <label for="tab-3">Equip/ inventory</label>
   
     <div class="content">
         Shiney Diamond Sword!
     </div> 
 </div>
<div class="tab">
     <input type="radio" id="tab-4" name="tab-group-1">
     <label for="tab-4">Property</label>
     
     <div class="content">
     bibbidydodab
     </div> 
 </div>
  
</div>
</div>
<br>
<div class="footertext">
Insert Personal Quote Here!
</div>
</div><div class="scrollbot">
<img src="http://i986.photobucket.com/albums/ae347/blue-moon-stock/scrollbottom_zps256c83aa.png"/>
</div>
</div>
</html>
[/dohtml]

 

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
Followers 0
Go To Topic Listing Code Gallery

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy

  I accept