Custom Label Templates

eaglereptiles · October 24, 2023, 10:05am

You can now design and export your own enclosure/rack labels directly within MorphMarket. It’s a fantastic way to add a personal touch to your enclosures, and keep tabs on your animals on MM (especially when husbandry actions are released), and we encourage you to get creative!

We understand that not everyone is familiar with HTML and CSS, and that’s perfectly okay! We want to make this a collaborative effort, so even if you’re brand new to coding, you’re encouraged to participate. Share your design ideas, and our more experienced community members can help bring them to life in your labels.

A few of the parts you can easily edit:

Font:

To change the font family for the entire label text:

.label-box {
    font-family: "Arial", sans-serif;
}

Color Scheme:

To set the background color to light gray:

.label-box {
    background-color: #f2f2f2;

To change the text color to blue:

.label-box {
    color: #3498db;
}

Color Picker

Default Settings

HTML:

{% load static %}
<div class="label-box">
    <div class="label">
        <div class="flex-row">
            <h1>{{ object.title }}</h1>
        </div>
        <div class="flex-row">
            <div class="content">
                <img class="sex-icon" src="{{ object.sex_icon }}"> {{ object.category }}
                <p>{{ object.serial }}</p>

                <p class="traits"><strong>Traits: </strong> {% for trait in object.traits %}
                {{ trait.name }} ({{ trait.possibility }}) {% if not forloop.last %},{% endif %}
                {% endfor %}</p>

                {% if object.weight %}
                <p class="traits"><strong>Weight: </strong> {{ object.weight }}g</p>
                {% endif %}
            </div>
            <div class="logos">
                {% if object.store.logo_url %}
                    <img class="store-logo" src="{{ object.store.logo_url }}">
                {% endif %}
                <img class="store-logo" src="{{ object.qr_code_url }}">
            </div>
        </div>
        {% if object.dob %}
            <div>
                <div class="bottom">DOB: <strong>{{ object.dob }}</strong></div>
            </div>
        {% endif %}
    </div>
</div>

CSS:

table.label-container {
    border-collapse: collapse;
}

table, tr, td, table.label-container, table.label-container tr, table.label-container tr td {
    margin: 0;
    padding: 0;
    border: 0;
}

@page {
    size: Letter;
    padding: 0.24in 0.14in 0.24in 0.14in;
    margin: 0;
}

.label-box {
    width: 6in;
    height: 4in;
    border-width: 0.01in;

    border-style: solid;
    overflow: hidden;
    margin: 0 0.1in 0.1in 0;
    position: relative;

}

.label-box .store-logo {
    width: 100%;
    margin-right: 0.2in;
}


.label {
    margin: 0.2in;
    height: 3.6in;
    position: relative;
    font-size: 160%;
}

.label .flex-row {
    display: flex;
    position: relative;
}

.label .content {
    order: 1;
    flex: 2;
    flex-basis: 70%;
    position: relative;
}

.label .logos {
    order: 2;
    flex-basis: 25%;
}

.label h1 {
    padding-top: 0.1in;
    margin-top: 0.1in;
    font-size: 24pt;
}

.bottom {
    position: absolute;
    bottom: 0;
}

.traits {
    font-size: 0.8em;
}

eaglereptiles · October 25, 2023, 4:10pm

Clean Centred:

HTML:

{% load static %}
<div class="label-box">
    <div class="label">
        <h1>{{ object.title }}</h1>
        <p class="category">{{ object.category }}</p>
        <p class="serial">{{ object.serial }}</p>

        <p class="traits"><strong>Traits: </strong> {% for trait in object.traits %}
        {{ trait.name }} ({{ trait.possibility }}) {% if not forloop.last %},{% endif %}
        {% endfor %}</p>

        {% if object.weight %}
        <p class="weight"><strong>Weight: </strong> {{ object.weight }}g</p>
        {% endif %}

        <img class="sex-icon" src="{{ object.sex_icon }}">
        <p class="sex">{{ object.sex }}</p>
    </div>
</div>

CSS:

table.label-container {
    border-collapse: collapse;
}

table, tr, td, table.label-container, table.label-container tr, table.label-container tr td {
    margin: 0;
    padding: 0;
    border: 0;
}

@page {
    size: Letter;
    padding: 0.24in 0.14in 0.24in 0.14in;
    margin: 0;
}

.label-box {
    width: 6in;
    height: 4in;
    border-width: 0.01in;
    border-style: solid;
    border-color: #333;
    background-color: #FFF;
    margin: 0.1in;
    padding: 0.2in;
    position: relative;
}

.label {
    font-size: 18pt;
    text-align: center;
}

.label h1 {
    font-size: 24pt;
}

.label .category {
    font-weight: bold;
}

.label .serial {
    margin-top: 10px;
}

.label .traits {
    font-size: 0.9em;
}

.label .weight {
    font-size: 0.9em;
}

.sex-icon {
    display: block;
    margin: 0 auto;
    margin-top: 10px;
}

.sex {
    text-align: center;
    font-weight: bold;
    margin-top: 5px;
}

eaglereptiles · October 25, 2023, 4:16pm

Clean Centred w/ Logo

HTML:

{% load static %}
<div class="label-box">
    <div class="label">
        <h1>{{ object.title }}</h1>
        <p class="category">{{ object.category }}</p>
        <p class="serial">{{ object.serial }}</p>

        <p class="traits"><strong>Traits: </strong> {% for trait in object.traits %}
        {{ trait.name }} ({{ trait.possibility }}) {% if not forloop.last %},{% endif %}
        {% endfor %}</p>

        {% if object.weight %}
        <p class="weight"><strong>Weight: </strong> {{ object.weight }}g</p>
        {% endif %}

        <img class="sex-icon" src="{{ object.sex_icon }}">
        <p class="sex">{{ object.sex }}</p>

        <img class="logo" src="{{ object.store.logo_url }}">
    </div>
</div>

CSS:

table.label-container {
    border-collapse: collapse;
}

table, tr, td, table.label-container, table.label-container tr, table.label-container tr td {
    margin: 0;
    padding: 0;
    border: 0;
}

@page {
    size: Letter;
    padding: 0.24in 0.14in 0.24in 0.14in;
    margin: 0;
}

.label-box {
    width: 6in;
    height: 4in;
    border-width: 0.01in;
    border-style: solid;
    border-color: #333;
    background-color: #FFF;
    margin: 0.1in;
    padding: 0.2in;
    position: relative;
}

.label {
    font-size: 18pt;
    text-align: center;
    position: relative; /* Add relative positioning to the label container */
}

.logo {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 1in; 
}

.label h1 {
    font-size: 24pt;
}

.label .category {
    font-weight: bold;
}

.label .serial {
    margin-top: 10px;
}

.label .traits {
    font-size: 0.9em;
}

.label .weight {
    font-size: 0.9em;
}

.sex-icon {
    display: block;
    margin: 0 auto;
    margin-top: 10px;
}

.sex {
    text-align: center;
    font-weight: bold;
    margin-top: 5px;
}

eaglereptiles · October 25, 2023, 4:40pm

Border w/ Logo

HTML:

{% load static %}
<div class="label-box">
    <div class="label">
        <h1>{{ object.title }}</h1>
        <p class="category">{{ object.category }}</p>
        <p class="serial">{{ object.serial }}</p>

        <p class="traits"><strong>Traits: </strong> {% for trait in object.traits %}
        {{ trait.name }} ({{ trait.possibility }}) {% if not forloop.last %},{% endif %}
        {% endfor %}</p>

        {% if object.weight %}
        <p class="weight"><strong>Weight: </strong> {{ object.weight }}g</p>
        {% endif %}

        <img class="sex-icon" src="{{ object.sex_icon }}">
        <p class="sex">{{ object.sex }}</p>

        <img class="logo" src="{{ object.store.logo_url }}">
    </div>
</div>

CSS:

table.label-container {
    border-collapse: collapse;
    color: black;
    background-color: black; 
}

table, tr, td, table.label-container, table.label-container tr, table.label-container tr td {
    margin: 0;
    padding: 0;
    border: 0;
}

@page {
    size: Letter;
    padding: 0.24in 0.14in 0.24in 0.14in;
    margin: 0;
}

.label-box {
    width: 6in;
    height: 4in;
    border-width: 0.01in;
    border-style: solid;
    border-color: #333;
    background-color: #FFF;
    margin: 0.1in;
    padding: 0.2in;
    position: relative;
}

.label {
    font-size: 18pt;
    text-align: left;
    position: relative; /* Add relative positioning to the label container */
}

.logo {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 1in; 
}

.label h1 {
    font-size: 24pt;
}

.label .category {
    font-weight: bold;
}

.label .serial {
    margin-top: 10px;
}

.label .traits {
    font-size: 0.9em;
}

.label .weight {
    font-size: 0.9em;
}

.sex-icon {
    display: block;
    margin: 0 auto;
    margin-top: 10px;
}

.sex {
    text-align: left;
    font-weight: bold;
    margin-top: 5px;
}

eaglereptiles · November 7, 2023, 5:14pm

Black on Blue

HTML:

{% load static %}
<div class="label-box">
    <div class="label">
        <div class="flex-row">
            <h1>{{ object.title }}</h1>
        </div>
        <div class="flex-row">
            <div class="content">
                <img class="sex-icon" src="{{ object.sex_icon }}"> {{ object.category }}
                <p>{{ object.serial }}</p>

                <p class="traits"><strong>Traits: </strong> {% for trait in object.traits %}
                {{ trait.name }} ({{ trait.possibility }}) {% if not forloop.last %},{% endif %}
                {% endfor %}</p>

                {% if object.weight %}
                <p class="traits"><strong>Weight: </strong> {{ object.weight }}g</p>
                {% endif %}
            </div>
            <div class="logos">
                <img class="store-logo" src="{{ object.store.logo_url }}">
                <img class="store-logo" src="{{ object.qr_code_url }}">
            </div>
        </div>
        {% if object.dob %}
            <div>
                <div class="bottom">DOB: <strong>{{ object.dob }}</strong></div>
            </div>
        {% endif %}
    </div>
</div>

CSS:

table.label-container {
    border-collapse: collapse;
}

table, tr, td, table.label-container, table.label-container tr, table.label-container tr td {
    margin: 0;
    padding: 0;
    border: 0;
}

@page {
    size: Letter;
    padding: 0.24in 0.14in 0.24in 0.14in;
    margin: 0;
}

.label-box {
    width: 6in;
    height: 4in;
    border-width: 0.01in;

    border-style: solid;
    overflow: hidden;
    margin: 0 0.1in 0.1in 0;
    position: relative;
background-color: #b5dbf5;
    color: #0d0d0d;
    font-family: Arial, sans-serif;

}

.label-box .store-logo {
    width: 100%;
    margin-right: 0.2in;
}


.label {
    margin: 0.2in;
    height: 3.6in;
    position: relative;
    font-size: 160%;
}

.label .flex-row {
    display: flex;
    position: relative;
}

.label .content {
    order: 1;
    flex: 2;
    flex-basis: 70%;
    position: relative;
}

.label .logos {
    order: 2;
    flex-basis: 25%;
}

.label h1 {
    padding-top: 0.1in;
    margin-top: 0.1in;
    font-size: 24pt;
}

.bottom {
    position: absolute;
    bottom: 0;
}

.traits {
    font-size: 0.8em;
}

eaglereptiles · November 7, 2023, 5:16pm

Black on Pink

HTML:

{% load static %}
<div class="label-box">
    <div class="label">
        <div class="flex-row">
            <h1>{{ object.title }}</h1>
        </div>
        <div class="flex-row">
            <div class="content">
                <img class="sex-icon" src="{{ object.sex_icon }}"> {{ object.category }}
                <p>{{ object.serial }}</p>

                <p class="traits"><strong>Traits: </strong> {% for trait in object.traits %}
                {{ trait.name }} ({{ trait.possibility }}) {% if not forloop.last %},{% endif %}
                {% endfor %}</p>

                {% if object.weight %}
                <p class="traits"><strong>Weight: </strong> {{ object.weight }}g</p>
                {% endif %}
            </div>
            <div class="logos">
                <img class="store-logo" src="{{ object.store.logo_url }}">
                <img class="store-logo" src="{{ object.qr_code_url }}">
            </div>
        </div>
        {% if object.dob %}
            <div>
                <div class="bottom">DOB: <strong>{{ object.dob }}</strong></div>
            </div>
        {% endif %}
    </div>
</div>

CSS:

table.label-container {
    border-collapse: collapse;
}

table, tr, td, table.label-container, table.label-container tr, table.label-container tr td {
    margin: 0;
    padding: 0;
    border: 0;
}

@page {
    size: Letter;
    padding: 0.24in 0.14in 0.24in 0.14in;
    margin: 0;
}

.label-box {
    width: 6in;
    height: 4in;
    border-width: 0.01in;

    border-style: solid;
    overflow: hidden;
    margin: 0 0.1in 0.1in 0;
    position: relative;
background-color: #fcd2d2;
    color: #0d0d0d;
    font-family: Arial, sans-serif;

}

.label-box .store-logo {
    width: 100%;
    margin-right: 0.2in;
}


.label {
    margin: 0.2in;
    height: 3.6in;
    position: relative;
    font-size: 160%;
}

.label .flex-row {
    display: flex;
    position: relative;
}

.label .content {
    order: 1;
    flex: 2;
    flex-basis: 70%;
    position: relative;
}

.label .logos {
    order: 2;
    flex-basis: 25%;
}

.label h1 {
    padding-top: 0.1in;
    margin-top: 0.1in;
    font-size: 24pt;
}

.bottom {
    position: absolute;
    bottom: 0;
}

.traits {
    font-size: 0.8em;
}