Jump to content
Soothing Sands

[Template] Simple, equip+blurb+list

Recommended Posts

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>

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Forum Statistics

    15,837
    Total Topics
    173,513
    Total Posts
  • Recently Browsing

    No registered users viewing this page.

  • Upcoming Events

    No upcoming events found
  • Recent Event Reviews

×
×
  • Create New...