Soothing Sands Posted September 18, 2013 Report Posted September 18, 2013 Example: http://magicduel.com/players/Soothing_Sands Alright, here is a very simple template that is super easy to use. Only 1 moving part and two places to add text. It doesn't display any papers, people will have to look in game or at the default template for that. -Also note, I will try at some point to put an in game avatar in the top left rather than the [equipment] marking. The model looks fine too, though. Hovering over "About" will reveal the list below it. Changing text can be done at the bottom of the code, settings changed in the middle. #wrap is the main box everything is in #mainText holds.. the main text #charImage holds the [equipment] #list holds the about list. Enjoy! <!-- Personal Page by Soothing Sands. Let me know if you have any questions or anything. You can delete this comment if you want. --> <html> <head> <title>Personal Page</title> <script> function expand(){ document.getElementById("list").style.maxHeight=200; } function retract() { document.getElementById("list").style.maxHeight=0; } </script> <style> #wrap{ background-color: #EBE2C7; border: solid 3px #755F14; width: 600px; margin-left: auto; margin-right: auto; height: 500px; } #mainText{ position: relative; top:0px; left:150px; font-size: 30px; color: #755F14; width:430px; height: 300px; overflow: visible; } #charImage{ position: relative; top:20px; left:20px; width:80px; height:100px; } #list{ font-family: "Georgia", serif; position: relative; max-height: 0px; width: 200px; top:-100px; left:50px; overflow: hidden; transition: max-height .5s; -webkit-transition: max-height .5s; /* Safari */ padding-bottom: 20px; } </style> </head> <body> <div id="wrap"> <div id="charImage"> [equipment] </div> <div id="mainText"> <!-- Main text. </br> makes a new line. If it goes too far down, change the #mainText font-size to be smaller or the top: to be negative, raising the text. --> Your name here </br> </br> Born: Day 0, Year 0 </br> Active: 00-24 ST </div> <div id="list" onmouseover=expand() onmouseout=retract()> <span style=color:#755F14;>About</span> <!-- About text. </br> makes a new line. change the href in the link if you want to make it go somewhere else --> </br> Citizen of place </br> Spellcaster </br> Quest Creator </br> Poet </br> On the forums <a target="_blank" href=http://google.com>here</a> </div> </div> </body> </html> Quote
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.