Examples
This page has some code templates donated by various coders to serve as examples of the template syntax.
Item Description
created by Snowwyflake
<div class="container-fluid w-50">
<div class="card border-0 rounded-0 p-2" style="background-color:{{c!Color!}}; margin:auto;">
<div class="row align-items-center justify-content-left">
<div class="col-sm-3">
<img style="width:100px;" src="{{u!Image!}}">
</div>
<div class="col-sm-8">
<h1 class="text-uppercase">{{!Item Name!}}</h1>
<p><em>{{!Item Description!}}</em></p>
</div>
</div>
</div>
<div class="card bg-faded border-0 rounded-0 p-3" style="margin:auto">
<h2 class="text-uppercase">{{!Item Type!}}</h2>
<p>{{l!Item Stats/Affects!}}</p>
</div>
</div>
<div class="text-center"><a href="https://toyhou.se/13768823.item-description-code" target="_blank" style="font-size:10px">~ Code by Snowwyflake ~</a></div>put your paws up
created by BakuCodes
<div class="card border-0 mt-2 hidden-md-down" style="height:80px;background:transparent;"></div>
<div class="container p-0 mt-3 mt-md-0" style="max-width:600px;">
<!--- top bar --->
<div class="card p-0 rounded-0 text-muted text-lowercase">
<!----- row ----->
<div class="row no-gutters">
<div class="col-lg-12">
<!--- top bar --->
<div class="card p-2 rounded-0 small text-muted text-lowercase" style="letter-spacing:2px;border-width:0 0 1px 0;">
<div class="row no-gutters">
<div class="col-auto px-1">
<!--- credit - please don't remove --->
<a href="https://toyhou.se/13429841" class="text-muted"><i class="fal fa-code fa-fw mt-2"></i></a>
</div>
<div class="col px-1">
<!--- link --->
<div class="card px-2 py-1 bg-faded" style="border-radius:15px;">
toyhou.se/{{!Username!}}
</div>
</div>
<div class="col-auto px-1"><i class="fal fa-window-minimize fa-fw mt-2"></i>
<i class="fal fa-window-restore fa-fw "></i>
<i class="fal fa-times fa-fw mt-2" style="font-size:11pt;"></i></div>
</div>
</div>
</div>
<div class="col-lg-4 hidden-md-down">
<!--- left box --->
<div class="card p-3 rounded-0 small" style="letter-spacing:2px;border-width:0 1px 0 0;">
<!---- big icon // use a square image ----->
<div class="card rounded-0 border-0" style="background-image:url('{{u!Sidebar Picture Link!}}');background-size:cover;height:170px;width:170px;"></div>
</div>
<!--- left box --->
<div class="card p-2 rounded-0 small text-muted text-justify" style="letter-spacing:1px;border-width:1px 1px 0 0;">
<p>{{!Sidebar Info!}}
<br>
commissions: {{!Comms Status!}}<br>
requests: {{!Requests Status!}}<br>
roleplay: {{!RP Status!}}</p>
</div>
<!--- left box --->
<div class="card p-2 rounded-0 small text-muted text-justify" style="letter-spacing:1px;border-width:1px 1px 0 0;">
<div class="row no-gutters">
<div class="col-auto p-1">
<i class="fas fa-play fa-fw"></i>
<!-----
music player
how to use: https://toyhou.se/8682081.all-music-players-wip/8682087
----->
<iframe src="https://www.youtube.com/embed/{{y!YouTube ID!}}?controls=0" class="w-100" frameborder="0" style="height:30px; position:absolute; bottom:1px; left:0; opacity:0">
</iframe>
</div>
<div class="col p-1">
<div class="card bg-faded px-2 py-1 border-0 small text-center" style="border-radius:15px;letter-spacing:1px;">
{{!Song Name!}}</div>
</div>
</div>
</div>
</div>
<div class="col-lg-8">
<!--- right box --->
<div class="card p-2 rounded-0 small text-muted text-lowercase border-0" style="letter-spacing:2px;">
<!---- tags card ----->
<div class="card bg-faded rounded-0 border-0 p-3 m-1">
<!----- rows ------>
<div class="row no-gutters">
<div class="col-3 p-1">
<!---- mini icon ---->
<img src="{{u!Small Image Link!}}" class="img-thumbnail p-2 rounded-0">
</div>
<div class="col-9 px-1 py-2">
<h3>{{!Your Name!}}</h3>
<!--- pronouns ----->
<span class="badge font-weight-normal" style="background-color:{{c!Accent Colour!}};letter-spacing:2px;font-size:8pt;">{{!Pronouns 1!}}</span>
<!--- pronouns ----->
<span class="badge font-weight-normal" style="background-color:{{c!Accent Colour!}};letter-spacing:2px;font-size:8pt;">{{!Pronouns 2!}}</span>
<!--- soc. media --->
<div class="mt-2">
<!--twitter-->
<a href="{{u!Twitter Link!}}" class="text-muted"><i class="fab fa-twitter"></i></a>
<!--tumblr-->
<a href="{{u!Tumblr Link!}}" class="text-muted"><i class="fab fa-tumblr"></i></a>
<!--instagram-->
<a href="{{u!Instagram Link!}}" class="text-muted"><i class="fab fa-instagram"></i></a>
<!--furaffinity-->
<a href="{{u!FurAffinity Link!}}" class="text-muted"><i class="fas fa-paw"></i></a>
<!--kofi-->
<a href="{{u!KoFi Link!}}" class="text-muted"><i class="fas fa-coffee"></i></a>
<!--twitch-->
<a href="{{u!Twitch Link!}}" class="text-muted"><i class="fab fa-twitch"></i></a>
<!--- add more above this line --->
</div>
</div>
</div>
</div>
<!------- body ------------>
<div class="row no-gutters">
<!--- body text --->
<div class="col-lg-6 p-1 text-justify" style="overflow:auto;max-height:190px;letter-spacing:0">
<p> {{l!About Me Text!}} </p>
</div>
<!--- content --->
<div class="col-lg-6 p-1">
<div class="card bg-faded rounded-0 border-0 p-3">
{{%Game IDs%
<!--- genshin id --->
<span>{{%ID%}}</span>
<span class="small text-uppercase mb-2" style="color:{{c!Accent Colour!}};letter-spacing:1px;">{{%ID TITLE%}}</span>
%end%}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Underlined
created by Togo
<!--==========================================
[12] UNDERLINED (CARD) by TOGO
-- -- -- -- -- -- -- -- -- -- -- -- -- --
anything you need to edit should be
tabbed and clearly marked - i've also
added comments for light code edits you
may want to do. feel free to change
any elements to your needs!
-- -- -- -- -- -- -- -- -- -- -- -- -- --
this code has a custom accent colour;
the easiest way to change it is to
mark the colour code below, and
then use ctrl+f to find and replace
all instances of it in the code.
-- -- -- -- -- -- -- -- -- -- -- -- -- --
> do not use with WYSIWYG on, it will
break the code.
> keep my credit in.
> direct any questions to my comments,
PMs or discord. thank you!
===========================================-->
<!-- MAIN CONTAINER =======================-->
<div class="my-5 mx-auto py-4 px-3 p-md-4" style="position: relative; max-width: 750px; border-radius: 15px; overflow: hidden;">
<!-- BACKGROUND ===========================-->
<div class="h-100 w-100" style="position: absolute; top: 0; left: 0;
background-image: url({{u!Background Image!}});
background-size: cover;
filter: blur(3px);
/*
remove background-size if you're using a seamless pattern.
filter will automatically blur the background - remove it if you'd like the bg sharp.
*/;
background-position: center; transform: scale(1.1,1.1);"></div>
<div class="row flex-md-row-reverse justify-content-center align-items-center">
<!-- IMAGE ================================-->
<div class="col-7 col-md-4">
<img class="w-100"
src="{{u!Side Image!}}">
</div>
<!-- TEXT TITLE ===========================-->
<div class="my-4 col-10 col-md-8">
<div class="card p-3 border-0" style="border-radius: 15px;">
<p class="mb-0" style="font-family: 'Courier New', monospace;">
{{!Name!}}. {{!Pronouns!}}. {{!Adjective!}}.
<!-- MUSIC LINK ===========================-->
<a class="float-right"
href="{{u!Youtube URL!}}" target="_blank" style="color: {{c!Accent Color!}};">
<i class="fal fa-music-alt"></i>
</a>
</p>
<hr class="w-100 mt-1 mb-3" style="border-top-style: dashed; border-top-width: 2px;">
<!-- TEXT BODY ============================-->
<div class="mb-3 text-center font-italic text-muted" style="max-height: 200px; overflow-y: auto;">
<p>
{{l!Character Text!}}
</p>
</div>
<!-- TEXT FOOTER ==========================-->
<hr class="w-100 mt-0 mb-1" style="border-top-style: dashed; border-top-width: 2px;">
<p class="text-right" style="font-family: 'Courier New', monospace;">
<!-- credit. you can restyle, but don't hide/remove it. -->
<a href="https://toyhou.se/Togo" class="float-left" style="color: {{c!Accent Color!}}; margin-top: 1px;">
<i class="fal fa-code"></i>
</a>
design + art by
<a href="{{u!Designer URL!}}" style="color: {{c!Accent Color!}};">
designer.
</a>
</p>
</div>
</div>
</div>
</div>notte
created by hanyu
<div class="container" style="max-width:800px;">
<div class="container text-dark" style="background:url({{u!Background Image!}}); background-attachment:fixed; box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px;">
<div class="row p-0">
<div class="col-sm-3 p-2">
<!-- main side image - put image url where it says IMG HERE -->
<div class="container" style="background:url({{u!Image one URL!}}); height:400px; background-size:cover; background-position:center; box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; clip-path: polygon(25% 0%, 100% 0, 100% 50%, 100% 100%, 0 100%, 0% 10%)"></div>
</div>
<div class="col-sm-9 p-0">
<div class="container">
<div class="row">
<div class="col-sm-8 p-2">
<div class="bg-white container" style="box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;">
<div class="container p-0" style="height:140px; overflow:auto; overflow-x:hidden">
<div class="row">
<!-- BASIC INFO -->
<div class="col-sm-6 p-1">
<div class="container p-0 my-2" style="border-right:1px dashed"><i class="fal fa-user mx-2 fa-fw"></i><span style="font-weight:lighter; font-size:14px" class="text-secondary">
{{!Name!}}</span></div>
<div class="container p-0 my-2" style="border-right:1px dashed"><i class="fal fa-calendar mx-2 fa-fw"></i><span style="font-weight:lighter; font-size:14px" class="text-secondary">
{{!Age!}}</span></div>
<div class="container p-0 my-2" style="border-right:1px dashed"><i class="fal fa-comments mx-2 fa-fw"></i><span style="font-weight:lighter; font-size:14px" class="text-secondary">
{{!Pronouns!}}</span></div>
<div class="container p-0 my-2" style="border-right:1px dashed"><i class="fal fa-question mx-2 fa-fw"></i><span style="font-weight:lighter; font-size:14px" class="text-secondary">
{{!Species!}}</span></div>
</div>
<div class="col-sm-6 p-1">
<div class="container p-0 my-2"><i class="fal fa-signature mx-2 fa-fw"></i><span style="font-weight:lighter; font-size:14px" class="text-secondary">
{{!Nicknames!}}</span></div>
<div class="container p-0 my-2"><i class="fal fa-genderless mx-2 fa-fw"></i><span style="font-weight:lighter; font-size:14px" class="text-secondary">
{{!Gender!}}</span></div>
<div class="container p-0 my-2"><i class="fal fa-heart mx-2 fa-fw"></i><span style="font-weight:lighter; font-size:14px" class="text-secondary">
{{!Sexuality!}}</span></div>
<div class="container p-0 my-2"><i class="fal fa-skull mx-2 fa-fw"></i><span style="font-weight:lighter; font-size:14px" class="text-secondary">
{{!Status!}}</span></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4 p-2">
<!-- smaller right-side image - put image url where it says IMG HERE -->
<div class="container" style="background:url({{u!Image 2 URL!}}); height:140px; background-size:cover; background-position:center; box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px"></div>
</div>
<div class="col-sm-2 p-2">
<!-- colour palette - change the hex codes to fit whatever you'd like! -->
<div class="card rounded-0 border-0 mb-2" style="height:25px; background-color:{{c!Palette colour 1!}}"></div>
<div class="card rounded-0 border-0 mb-2" style="height:35px; background-color:{{c!Palette colour 2!}}"></div>
<div class="card rounded-0 border-0 my-2" style="height:45px; background-color:{{c!Palette colour 3!}}"></div>
<div class="card rounded-0 border-0 mt-2" style="height:116px; background-color:{{c!Palette colour 4!}}"></div>
</div>
<div class="col-sm-10 p-2">
<!-- main summary/story box -->
<div class="container bg-white p-2 px-3" style="box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; height:245px; overflow:auto; font-weight:lighter; font-size:14px">
<p>{{l!About section!!}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="/hanyu" class="pull-right" style="font-size:0.7rem">code by hanyu</a>
</div>