Help Identification Card Code?

taliaangeni · Apr 22, 2017

Is anyone able to make an identification card code? If so, the fields that need to be editable are:
Picture (That whole picture side can just be for a picture.)
State
Customer #
Name
Address
Sex
Class
DOB
Eyes
Endorsements
ISS ORI
Height
Restrictions
Exp

Lyro · Apr 23, 2017

I'll take a shot at it. Do you have a background you'd like to be used?

taliaangeni · Apr 23, 2017

Not really. Anything stately looking. Maybe a map. I dunno.

Lyro · Apr 23, 2017

Here you go, I created this using bbcoder. Let me know if you want anything changed (I went for a globe as a background because it was pretty neutral, I wasn't sure what kind of ID card this was supposed to be).

GLOBE

T10000001 01 01 1970

Virginia

ID Card

Customer #

T10000001

Name

John Smith

Address

123 Fake Street
Falseton, VA 10000

Sex

M

Class

NONE

Date of Birth

01/01/1970

Eyes

BRO

Endorsements

NONE

ISS ORI

01/01/2001

Height

6FT 1IN

Restrictions

NONE

Exp

01/01/2030

BBCode:

Code:

[DIV=background-color: #e2ead0; border: solid 1px #E0E0E0; border-radius: 20px; margin: 0 auto; overflow: hidden; position: relative; width: 500px; z-index: 1;][DIV=display: none;][FONT=Bitter]FONT[/FONT][FONT=Source Sans Pro]FONT[/FONT][FONT=Source Code Pro]FONT[/FONT][FONT=Lobster Two]FONT[/FONT][/DIV][DIV=background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Globe_centered_in_the_Atlantic_Ocean_%28green_and_grey_globe_scheme%29.svg/500px-Globe_centered_in_the_Atlantic_Ocean_%28green_and_grey_globe_scheme%29.svg.png); bottom: -50%; color: transparent; height: 500px; opacity: 0.2; position: absolute; right: -50%; transform: rotate(-20deg); width: 500px; z-index: -1;]GLOBE[/DIV][DIV=color: rgba(255, 255, 255, 0.79); font-family: Source Code Pro; font-size: 22px; left: 10px; position: absolute; text-shadow: 0px -2px black; top: 60px; transform: rotate(180deg); writing-mode: vertical-rl;]T10000001 01 01 1970[/DIV][DIV=background-color: #d0d8be; border-bottom: solid 3px #4b5435; color: #4b5435; font-size: 28px; font-weight: bold; height: 38px; padding: 5px 30px;][DIV=font-family: Lobster Two; font-size: 48px; font-style: italic; left: 20px; margin-right: 20px; position: absolute; top: -7px;]Virginia[/DIV][DIV=font-family: Source Sans Pro; font-size: 34px; position: absolute; right: 100px; text-align: center; text-transform: uppercase; top: 2px;]ID Card[/DIV][/DIV][DIV=float: left; margin: 20px 10px; width: 175px;][IMG]https://s3.amazonaws.com/cdn.roosterteeth.com/uploads/images/e8606981-1731-44d5-9909-974c266f322f/md/2028444-1441426352670-Zero_Punctuation.jpg[/IMG][/DIV][DIV=margin: 10px 10px 10px 200px;][DIV=display: inline-block; margin-bottom: 5px; margin-right: 5px; display: block;][DIV=font-family: Bitter; font-size: 11px; font-style: italic;]Customer #[/DIV][DIV=font-family: Source Sans Pro; font-size: 14px; font-weight: bold; text-shadow: 0px 0px 0px black;]T10000001[/DIV][/DIV][DIV=display: inline-block; margin-bottom: 5px; margin-right: 5px; display: block;][DIV=font-family: Bitter; font-size: 11px; font-style: italic;]Name[/DIV][DIV=font-family: Source Sans Pro; font-size: 14px; font-weight: bold; text-shadow: 0px 0px 0px black;]John Smith[/DIV][/DIV][DIV=display: inline-block; margin-bottom: 5px; margin-right: 5px; display: block;][DIV=font-family: Bitter; font-size: 11px; font-style: italic;]Address[/DIV][DIV=font-family: Source Sans Pro; font-size: 14px; font-weight: bold; text-shadow: 0px 0px 0px black;]123 Fake Street
Falseton, VA 10000[/DIV][/DIV]
[DIV=display: inline-block; margin-bottom: 5px; margin-right: 5px; width: 90px;][DIV=font-family: Bitter; font-size: 11px; font-style: italic;]Sex[/DIV][DIV=font-family: Source Sans Pro; font-size: 14px; font-weight: bold; text-shadow: 0px 0px 0px black;]M[/DIV][/DIV][DIV=display: inline-block; margin-bottom: 5px; margin-right: 5px; width: 90px;][DIV=font-family: Bitter; font-size: 11px; font-style: italic;]Class[/DIV][DIV=font-family: Source Sans Pro; font-size: 14px; font-weight: bold; text-shadow: 0px 0px 0px black;]NONE[/DIV][/DIV][DIV=display: inline-block; margin-bottom: 5px; margin-right: 5px; width: 90px;][DIV=font-family: Bitter; font-size: 11px; font-style: italic;]Date of Birth[/DIV][DIV=font-family: Source Sans Pro; font-size: 14px; font-weight: bold; text-shadow: 0px 0px 0px black;]01/01/1970[/DIV][/DIV][DIV=display: inline-block; margin-bottom: 5px; margin-right: 5px; width: 90px;][DIV=font-family: Bitter; font-size: 11px; font-style: italic;]Eyes[/DIV][DIV=font-family: Source Sans Pro; font-size: 14px; font-weight: bold; text-shadow: 0px 0px 0px black;]BRO[/DIV][/DIV][DIV=display: inline-block; margin-bottom: 5px; margin-right: 5px; width: 90px;][DIV=font-family: Bitter; font-size: 11px; font-style: italic;]Endorsements[/DIV][DIV=font-family: Source Sans Pro; font-size: 14px; font-weight: bold; text-shadow: 0px 0px 0px black;]NONE[/DIV][/DIV][DIV=display: inline-block; margin-bottom: 5px; margin-right: 5px; width: 90px;][DIV=font-family: Bitter; font-size: 11px; font-style: italic;]ISS ORI[/DIV][DIV=font-family: Source Sans Pro; font-size: 14px; font-weight: bold; text-shadow: 0px 0px 0px black;]01/01/2001[/DIV][/DIV][DIV=display: inline-block; margin-bottom: 5px; margin-right: 5px; width: 90px;][DIV=font-family: Bitter; font-size: 11px; font-style: italic;]Height[/DIV][DIV=font-family: Source Sans Pro; font-size: 14px; font-weight: bold; text-shadow: 0px 0px 0px black;]6FT 1IN[/DIV][/DIV][DIV=display: inline-block; margin-bottom: 5px; margin-right: 5px; width: 90px;][DIV=font-family: Bitter; font-size: 11px; font-style: italic;]Restrictions[/DIV][DIV=font-family: Source Sans Pro; font-size: 14px; font-weight: bold; text-shadow: 0px 0px 0px black;]NONE[/DIV][/DIV][DIV=display: inline-block; margin-bottom: 5px; margin-right: 5px; width: 90px;][DIV=font-family: Bitter; font-size: 11px; font-style: italic;]Exp[/DIV][DIV=font-family: Source Sans Pro; font-size: 14px; font-weight: bold; text-shadow: 0px 0px 0px black;]01/01/2030[/DIV][/DIV][/DIV][/DIV]

BBXML:

Code:

<bbxml>
    <classes>
        <class name="container">
            background-color: #e2ead0;
            border: solid 1px #E0E0E0;
            border-radius: 20px;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
            width: 500px;
            z-index: 1;
        </class>

        <class name="globe">
            background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Globe_centered_in_the_Atlantic_Ocean_%28green_and_grey_globe_scheme%29.svg/500px-Globe_centered_in_the_Atlantic_Ocean_%28green_and_grey_globe_scheme%29.svg.png);
            bottom: -50%;
            color: transparent;
            height: 500px;
            opacity: 0.2;
            position: absolute;
            right: -50%;
            transform: rotate(-20deg);
            width: 500px;
            z-index: -1;
        </class>

        <class name="header">
            background-color: #d0d8be;
            border-bottom: solid 3px #4b5435;
            color: #4b5435;
            font-size: 28px;
            font-weight: bold;
            height: 38px;
            padding: 5px 30px;
        </class>

        <class name="state">
            font-family: Lobster Two;
            font-size: 48px;
            font-style: italic;
            left: 20px;
            margin-right: 20px;
            position: absolute;
            top: -7px;
        </class>

        <class name="title">
            font-family: Source Sans Pro;
            font-size: 34px;
            position: absolute;
            right: 100px;
            text-align: center;
            text-transform: uppercase;
            top: 2px;
        </class>

        <class name="id">
            color: rgba(255, 255, 255, 0.79);
            font-family: Source Code Pro;
            font-size: 22px;
            left: 10px;
            position: absolute;
            text-shadow: 0px -2px black;
            top: 60px;
            transform: rotate(180deg);
            writing-mode: vertical-rl;
        </class>

        <class name="portrait">
            float: left;
            margin: 20px 10px;
            width: 175px;
        </class>

        <class name="content">
            margin: 10px 10px 10px 200px;
        </class>

        <class name="info">
            display: inline-block;
            margin-bottom: 5px;
            margin-right: 5px;
        </class>

        <class name="label">
            font-family: Bitter;
            font-size: 11px;
            font-style: italic;
        </class>

        <class name="field">
            font-family: Source Sans Pro;
            font-size: 14px;
            font-weight: bold;
            text-shadow: 0px 0px 0px black;
        </class>
    </classes>

    <templates>
        <template name="id-card">
            <div class="container">
                <div option="display: none;"><font option="Bitter">FONT</font><font option="Source Sans Pro">FONT</font><font option="Source Code Pro">FONT</font><font option="Lobster Two">FONT</font></div>
                <div class="globe">GLOBE</div>
                <div class="id">{id}</div>
                <div class="header"><div class="state">{state}</div><div class="title">ID Card</div></div>
                <div class="portrait"><img>https://s3.amazonaws.com/cdn.roosterteeth.com/uploads/images/e8606981-1731-44d5-9909-974c266f322f/md/2028444-1441426352670-Zero_Punctuation.jpg</img></div>
                <div class="content">
                    <div class="info" option="display: block;"><div class="label">Customer #</div><div class="field">{customer}</div></div>
                    <div class="info" option="display: block;"><div class="label">Name</div><div class="field">{name}</div></div>
                    <div class="info" option="display: block;"><div class="label">Address</div><div class="field">{address}</div></div>
                    <br />
                    <div class="info" option="width: 90px;"><div class="label">Sex</div><div class="field">{sex}</div></div>
                    <div class="info" option="width: 90px;"><div class="label">Class</div><div class="field">{class}</div></div>
                    <div class="info" option="width: 90px;"><div class="label">Date of Birth</div><div class="field">{dob}</div></div>
                    <div class="info" option="width: 90px;"><div class="label">Eyes</div><div class="field">{eyes}</div></div>
                    <div class="info" option="width: 90px;"><div class="label">Endorsements</div><div class="field">{endorsements}</div></div>
                    <div class="info" option="width: 90px;"><div class="label">ISS ORI</div><div class="field">{ori}</div></div>
                    <div class="info" option="width: 90px;"><div class="label">Height</div><div class="field">{height}</div></div>
                    <div class="info" option="width: 90px;"><div class="label">Restrictions</div><div class="field">{restrictions}</div></div>
                    <div class="info" option="width: 90px;"><div class="label">Exp</div><div class="field">{exp}</div></div>
                </div>
            </div>
        </template>
    </templates>
    <body>
        <include template="id-card">
            <param name="id">T10000001 01 01 1970</param>
            <param name="state">Virginia</param>
            <param name="customer">T10000001</param>
            <param name="name">John Smith</param>
            <param name="address">123 Fake Street<br />Falseton, VA 10000</param>
            <param name="sex">M</param>
            <param name="class">NONE</param>
            <param name="dob">01/01/1970</param>
            <param name="eyes">BRO</param>
            <param name="endorsements">NONE</param>
            <param name="ori">01/01/2001</param>
            <param name="height">6FT 1IN</param>
            <param name="restrictions">NONE</param>
            <param name="exp">01/01/2030</param>
        </include>
    </body>
</bbxml>

taliaangeni · Apr 23, 2017

I love it! Thank you!

Help Identification Card Code?

taliaangeni

It is what it is.

Lyro

Errant Chronicler

taliaangeni

It is what it is.

Lyro

Errant Chronicler

taliaangeni

It is what it is.

Users who are viewing this thread