[Template] Simple, equip+blurb+list

September 18, 201312 yr

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

Report

[Template] Simple, equip+blurb+list

Featured Replies

Join the conversation

Forum Statistics

Recently Browsing 0

Account

Navigation

Search

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)