7. HTML Templates

Using Templates

Templates control how your tracker cards look. You can use built-in templates or create your own custom designs.

Built-in Templates

The extension comes with several templates ready to use:

Dating Card Template

• Designed for relationship tracking
• Shows affection, desire, trust, and contempt meters
• Includes status effects and internal thoughts

Text Message Template

• Simple, clean design
• Good for minimal tracking needs
• Easy to read format

Changing Templates

1. Open SillyTavern
2. Go to Extensions settings
3. Find Silly Sim Tracker
4. Select a different template from the dropdown
5. Cards will update automatically

Creating Custom Templates

You can create completely custom templates for your specific needs.

Basic Template Structure

<!-- CARD_TEMPLATE_START -->
<style>
/* Your CSS styles here */
.card {
  background: linear-gradient(145deg, {{bgColor}}, {{darkerBgColor}});
  color: {{contrastColor}};
}
</style>

<div class="card">
  <h2>{{characterName}}</h2>
  <div>Date: {{currentDate}}</div>
  {{#each stats}}
    <div>{{@key}}: {{this}}</div>
  {{/each}}
</div>
<!-- CARD_TEMPLATE_END -->

Required Elements

1. Markers: Use <!-- CARD_TEMPLATE_START --> and <!-- CARD_TEMPLATE_END -->
2. Handlebars Variables: Use {{variable}} for dynamic content
3. CSS Styling: Include styles in a <style> tag

Available Variables

• {{characterName}} - Character's name
• {{currentDate}} - Current date (YYYY-MM-DD)
• {{currentTime}} - Current time (HH:MM)
• {{bgColor}} - Card background color
• {{darkerBgColor}} - Darker background variant
• {{contrastColor}} - Text color for contrast
• {{stats.fieldName}} - Any field from your JSON data

Loading Custom Templates

1. Create your template in a text editor
2. Save as an HTML file
3. In SST settings, click "Load from File"
4. Select your template file
5. Cards will update to use your design

Clearing Custom Templates

To go back to built-in templates:

1. In SST settings, click "Clear Custom"
2. Select a default template from the dropdown

Template Tips

1. Start Simple: Begin with the built-in template and modify it
2. Use CSS Variables: {{bgColor}} and related variables automatically adapt to your data
3. Test Often: Make small changes and test the results
4. Responsive Design: Consider how your template looks on mobile vs desktop
5. Keep It Readable: Don't overcrowd cards with too much information

Example Custom Template

Here's a simple custom template to get you started:

<!-- CARD_TEMPLATE_START -->
<style>
.rpg-card {
  background: linear-gradient(145deg, {{bgColor}} 0%, {{darkerBgColor}} 100%);
  border-radius: 12px;
  padding: 16px;
  color: {{contrastColor}};
  font-family: Arial, sans-serif;
  min-width: 250px;
}

.character-header {
  border-bottom: 1px solid rgba(255,255,255,0.2);
  padding-bottom: 8px;
  margin-bottom: 12px;
}

.stat-line {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}
</style>

<div class="rpg-card">
  <div class="character-header">
    <h3>{{characterName}}</h3>
    <div>{{currentDate}} at {{currentTime}}</div>
  </div>
  
  {{#each stats}}
    {{#if (and (not (eq @key "bg")) (not (eq @key "inactive")))}}
      <div class="stat-line">
        <span>{{@key}}:</span>
        <span>{{this}}</span>
      </div>
    {{/if}}
  {{/each}}
</div>
<!-- CARD_TEMPLATE_END -->

This template will display all your character stats in a clean, organized format.