General Information

This is just a really basic template creator for Toyhou.se HTML codes! It has a lot of limitations but we really hope it helps users that are less code savvy.

This tool was created by Cheeriko and Sylueon! It would be great if you could support us!

Variables

Variables just need to be inserted wherever you want the user to be able to change things (save for the section variables).

{{input type::title||value}}

Input types are posted below. Titles and values should not have line breaks/new lines - special characters might also break them. Values are optional!

Variables can not be inserted into other variables. Something like {{textarea::title||{{text::title||value}}}} will break the template.

{{template::title}}

Purely optional. When the user downloads their templates, it'll save with your template name.

{{section::title}}

Adds a title to the form output for better organization.

{{subsection::title}}

Adds a subtitle to the form output for better organization.

{{text::title||value}}

Simple text input. For things like quick profile info, urls to images, links, etc.

{{textarea::title||value}}

For larger bodies of text like History or Personality info. Will automatically seperate new lines with a <p></p>.

If you want to add multiple lines in the initial value, please add && between them.

{{list::title}}

This will input user text as a simple <li>[user text]</li>.

If you want to add multiple lines in the initial value, please add && between them.

{{color::title||value}}

For hex colors. Make sure the initial variable has a value in RGB, rgb(000,000,000), or hex, #000000.

{{number::title||value}}

Number input. For things like border-width, paddings, margins, etc.

{{dropdown::title||option1,option2,option3}}

For simple dropdown options.

These must be in plain text, they can not have HTML in them. Something like {{dropdown::title||<i class="fal fa-circle"></i>,<i class="fas fa-circle"></i>}} will not work.

{{bootstrap::title||primary}}

A quick default dropdown for bootstrap colors made for your convenience!

Options for the default value are: primary, success, warning, info, or danger. Only put one in the value place!

Best Use for Creating a Template

When creating a template, we advise that you state all of the variables with their default values in a comment at the very top of the file (we will call these the 'initial variable'). Then you can call them later in the actual HTML. Example below.

<!-- 

>_ Template Variables
(These are the 'initial' variables.)

  {{template::test template}}

  {{section::Card Styles}}
  {{bootstrap::card outline||primary}}
  {{number::card border width||4}}
  {{dropdown::card border style||double,solid,dotted,dashed}}
  {{number::card border radius||1}}

  {{section::Card Top}}
  {{text::example title||This is an Example Title}}
  {{text::example subtext||You can do so many things with the text!}}

  {{section::Card Middle}}
  {{textarea::lorem ipsum||Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend mi sit amet enim gravida, nec congue urna porttitor.&&Praesent porttitor enim et efficitur consequat.}}

  {{section::Card Bottom}}
  {{bootstrap::link color||primary}}

  {{subsection::Link One}}
  {{text::link one||#}}
  {{text::link one icon||fas fa-coffee}}

  {{subsection::Link Two}}
  {{text::link two||#}}
  {{text::link two icon||fab fa-twitter}}

  {{subsection::Link Three}}
  {{text::link three||#}}
  {{text::link three icon||fas fa-link}}

-->

<div class="mx-auto my-md-5" style="max-width:700px;">
  <div class="card d-block text-center bg-faded card-outline-{{bootstrap::card outline}} p-5" style="border-width: {{number::card border width}}px;border-style: {{dropdown::card border style}};border-radius:{{number::card border radius}}rem;">

    <h1>{{text::example title}}</h1>
    <small class="text-muted">{{text::example subtext}}</small>
    <hr class="my-4 card-outline-{{bootstrap::card outline}}" style="border-top-width: {{number::card border width}}px;border-top-style: {{dropdown::card border style}}">
    {{textarea::lorem ipsum}}
    <hr class="my-4 card-outline-{{bootstrap::card outline}}" style="border-top-width: {{number::card border width}}px;border-top-style: {{dropdown::card border style}}">

    <a class="text-{{bootstrap::link color}}" href="{{text::link one}}"><i class="{{text::link one icon}} fa-fw mx-1"></i></a>
    <a class="text-{{bootstrap::link color}}" href="{{text::link two}}"><i class="{{text::link two icon}} fa-fw mx-1"></i></a>
    <a class="text-{{bootstrap::link color}}" href="{{text::link three}}"><i class="{{text::link three icon}} fa-fw mx-1"></i></a>
    
  </div>
</div>

Warning: Having 2 initial variables with the same input type and value will break the template. The initial variable must come before you call it.