sonder
Free Development Templates

Female 23 OOC OOC Owner
Undecided

9

posts
115.00

renown
Medium • apples


lavender tea cakes
member of stunning staff
posted 05-07-2021, 10:23 AM - Word count:
#1

Free Development Templates

These templates are Sonder exclusive unless otherwise defined by the coder. By using these codes, you agree to the coder's terms and conditions.

Users that post a free template will get 20 renown to distribute to an account of their choice!

Male 25 Highlander Imperial Army
posted 05-15-2021, 11:05 AM - Word count:
#2
oraeguno's tables
Alright friends, here's a freebie for you to use but we need to lay down some ground rules first.

001. This is for sonder use only. Do not copy this code, do not replicate this code, do not use the code anywhere else except here. If you do, I might just hunt you down with a stick and beat you with it. I'm not kidding, it's a very large stick. You would also lose the privilege of using any of my free codes.

002. Edit the code however you wish but keep the structure the same. So colors, fonts, backgrounds etc you can do whatever you want to but don't change the size of anything. You can also change the name of the divs, but you don't have to. Easiest way is press ctrl+f and search for CHARNAME and replace it with whatever you want. You /have/ to replace all of it if you want to use more than one of these codes in the same table, otherwise it will overlap and break. However, if there is only one version of it in your thread then you will be fine. The code won't break on it's own and it's not meant to.

003. Try not to break the table. I'd recommend doing small changes at first and slowly progressing. Some advice: Do not put any space between your divs (it'll create random voids in your code) and do not separate the css no matter how much you want to. It won't recognize the css if there is separation and spacing. Sucks, but that's how it is. If you need help just ask, but realize I cannot be available all the time.

004. Do not remove the credit. I will chase you down with the stick noted above. Stick has the ability to ban you from using my codes. Don't do it.


character
gender(pronouns) // Guild
quote
character information
current state of affairs;
stuff stuff
friends/allies/enemies;
stuff stuff
about me;
stuff stuff
Spring Y1
thread name;
stuff stuff
thread name;
stuff stuff
thread name;
stuff stuff
thread name;
stuff stuff
thread name;
stuff stuff
archived threads
year 1
none yet, but soon this chapter will be filled.
code by rae


<style>
input .CHARNAME { display: none; }input + label { display: inline;margin:0; }input ~ .CHARNAME {display: none}#CHARNAME1:checked~.CHARNAME.content1,#CHARNAME2:checked ~.CHARNAME.content2,#CHARNAME3:checked ~ .CHARNAME.content3 { display: block; }input + label {position: relative;}input:checked + label {}input ~ .CHARNAME {}input#CHARNAME1 {opacity:0.0;display:none;}input#CHARNAME2 {opacity:0.0;display:none;}input#CHARNAME3 {opacity:0.0;display:none;}.CHARNAME-tab-select {padding:10px;background: hsl(0, 0%, 20%, 0.5);cursor: pointer;font-family:'playfair display';font-size: 13px;letter-spacing:2px;text-transform:uppercase;color: #dedede;transition: ease-in 0.2s;text-align:center;display:inline-block;margin:26px;width:120px;box-shadow:3px 3px 10px #000;}buttons {text-align:center;width:100%;margin:auto;}.CHARNAME-tab-select:hover {transition: ease-in 0.2s;background-color:#000;color:#fff;}.CHARNAME {display: none;padding: 10px 40px 10px 40px;background: hsl(0, 0%, 0%, 0.5);text-align:justify;color:#dedede;font-family:verdana;font-size:11px;letter-spacing:1px;}.CHARNAME-content-scroll {height:400px;overflow:scroll;padding:10px;overflow-x:hidden;}.CHARNAME-content-scroll::-webkit-scrollbar {width: 5px;}CHARNAME-content-scroll::-webkit-scrollbar-track {background: hsl(0, 0%, 0%, 0.5);}.CHARNAME content-scroll::-webkit-scrollbar-thumb {background: hsl(0, 0%, 0%, 0.5); }
.CHARNAME-content-scroll::-webkit-scrollbar-thumb:hover {background: hsl(0, 0%, 0%, 0.5); } .CHARNAME-blurb {padding:10px;background-color:hsl(0, 0%, 0%, 0.5);margin-top:10px;font-style:italic;}.CHARNAME-title {text-align:right;font-weight:400;font-family:'playfair display';text-transform:uppercase;letter-spacing:5px;font-size:10px;color:#dedede;}.content-title {font-weight:600;font-family:georgia;text-transform:lowercase;letter-spacing:3px;font-size:8px;margin:10px;}
</style>

<div class="CHARNAME-outer" STYLE="padding:10px;background-color:hsl(0, 0%, 0%, 0.5);width:600px;background-image:url('https://images.unsplash.com/photo-1502297260054-f0f4c7e27ad8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2767&q=80');background-size:220%;background-position:90% 0%;margin:auto;">
    <table style="width:100%;padding:20px;">
    <tr><td><div style="width:100px;height:100px;background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/images/34857989_60qFcnSpMzU32kC.png');background-size:100%;background-position:center;border:1px solid #000;margin:3px;box-shadow: 3px 3px 20px #000;"></div></td>
      <td valign="top" width="100%">
                <div class="CHARNAME-title">
                  <div style="font-size:20px;">character</div>
                  gender(pronouns) // Guild
                  <div style="font-size:10px;font-style:italic;text-transform:lowercase;">quote</div>
        </div>
      </td></tr></table>
  <div class="CHARNAME-inner" style="background-color:hsl(0, 0%, 0%, 0.5);box-shadow: 0 48px 80px -32px rgba(0,0,0,0.5);margin:10px;"><table class="buttons"><input type="radio" name="CHARNAMEtabs" id="CHARNAME1" checked /><label for="CHARNAME1"><div class="CHARNAME-tab-select">info</div></label><input type="radio" name="CHARNAMEtabs" id="CHARNAME2" /><label for="CHARNAME2"><div class="CHARNAME-tab-select">booklet</div></label><input type="radio" name="CHARNAMEtabs" id="CHARNAME3" /><label for="CHARNAME3"><div class="CHARNAME-tab-select">ARCHIVES</div></label></table>
<div class="CHARNAME content1">
  <div class="CHARNAME-title" style="padding:10px;">character information</div>
     <div class="CHARNAME-content-scroll">
      <div class="content-title">current state of affairs;</div>
      stuff stuff
      <div class="content-title">friends/allies/enemies;</div>
      stuff stuff
      <div class="content-title">about me;</div>
      stuff stuff
    </div>
  </div>
<div class="CHARNAME content2">
        <div class="CHARNAME-title" style="padding:10px;">Spring Y1</div>
    <div class="CHARNAME-content-scroll">
      <div class="content-title">thread name;</div>
      stuff stuff
      <div class="content-title">thread name;</div>
      stuff stuff
      <div class="content-title">thread name;</div>
      stuff stuff
      <div class="content-title">thread name;</div>
      stuff stuff
      <div class="content-title">thread name;</div>
      stuff stuff
    </div>
  </div>
<div class="CHARNAME content3">
        <div class="CHARNAME-title" style="padding:10px;">archived threads</div>
    <div class="CHARNAME-content-scroll">
      <div class="content-title">year 1</div>
      none yet, but soon this chapter will be filled.
    </div>
  </div>
</div>
<div class="CHARNAME-title" style="padding:10px;">code by rae</div></div>


Male 10 billion OOC OOC administrator
Royalist

4

posts
35.00

renown
Extra Small •



posted 05-31-2021, 06:09 PM - Word count:
#3
bean's codes ;; rules

- a 3 x 3 moodboard if any of you want to use it
- please leave the credit where it is
- these codes are for Sonder use only

editing tips:
> adding pictures:
- all you have to do is slap a link into:

<img src="LINK HERE">


> want to leave gaps like the example?
- just leave the div blank!


template © bean



<style>.box { width:500px; height:500px; margin: 0 auto; box-sizing:border-box; padding:20px; display:flex; flex-wrap:wrap; justify-content: space-evenly; } .charbox { width:150px; height:150px; box-sizing:border-box; margin:1px 1px 1px 1px; padding:5px; box-shadow:0px px 15px #333; } .charbox img { width:100%; height:100%; object-fit:cover; }</style>
<div class="box">
   <div class="charbox"><img src="URL HERE"></div>
   <div class="charbox"><img src="URL HERE"></div>
   <div class="charbox"><img src="URL HERE"></div>
   <div class="charbox"><img src="URL HERE"></div>
    <div class="charbox"><img src="URL HERE"></div>
   <div class="charbox"><img src="URL HERE"></div>
   <div class="charbox"><img src="URL HERE"></div>
   <div class="charbox"><img src="URL HERE"></div>
   <div class="charbox"><img src="URL HERE"></div>
</div>
<center><div style="font: 10px/1 'playfair display'; font-variant: small-caps;">template (c) bean</div></center>


Female Highlander Imperial Army


0

posts
10.00

renown
Extra Small •


cue the 80's disco
posted 09-22-2021, 11:37 PM - Word count:
#4

hey!
please replace the COLORHERE with your own color of choice.
please replace the name in .nameTABLE with your own name or character name.

please leave the credit attached and do not change the base code outside of color edits.
enjoy!
— bunny






character name
gender, age, affiliation




season

thread title in territory with character(s)
thread title in territory with character(s)
thread title in territory with character(s)
thread title in territory with character(s)
thread title in territory with character(s)
thread title in territory with character(s)

season

thread title in territory with character(s)
thread title in territory with character(s)
thread title in territory with character(s)
thread title in territory with character(s)
thread title in territory with character(s)
thread title in territory with character(s)

season

thread title in territory with character(s)
thread title in territory with character(s)
thread title in territory with character(s)
thread title in territory with character(s)
thread title in territory with character(s)
thread title in territory with character(s)

season

thread title in territory with character(s)
thread title in territory with character(s)
thread title in territory with character(s)
thread title in territory with character(s)
thread title in territory with character(s)
thread title in territory with character(s)



season

thread title in territory with character(s)
thread title in territory with character(s)
thread title in territory with character(s)
thread title in territory with character(s)
thread title in territory with character(s)
thread title in territory with character(s)


<link rel="stylesheet" href="https://dl.dropbox.com/s/14o2rsd4qk9eru5/bunnytrackerthread.css?dl=0">

<style> .nameTABLE { --color1: #COLORHERE; width: 550px; background-color: #13120f; margin: 0 auto; padding: 0; box-sizing: border-box; border: 1px solid #292929; } .nameTABLE h { color: var(--color1); font-weight: bold; font-style: italic; } </style>

<div class="nameTABLE">
<center>
<div class="btNAMEHEADER">character name</div>
<span style="font-size: 10px; margin-left: -5px; color: #cecbca; text-decoration: none; font-variant: small-caps; font-family: arial; letter-spacing: 1px;">gender, age, affiliation</center></span>
  
<div class="btPAGES">
<div class="btMAINTAB">
<input type="radio" id="dark-tab-1" name="dark-bunny-main-tabs" checked>
<label for="dark-tab-1">year one</label>
<div class="btTEXT" style="text-align: justify;">
<div class="btSEASON"><b>season</b></div>
<br>
<div class="btTRACKERTHREAD">
<a href="">thread title</a> in territory with character(s)
<a href="">thread title</a> in territory with character(s)
<a href="">thread title</a> in territory with character(s)
<a href="">thread title</a> in territory with character(s)
<a href="">thread title</a> in territory with character(s)
<a href="">thread title</a> in territory with character(s)</div>
<br>
<div class="btSEASON"><b>season</b></div>
<br>
<div class="btTRACKERTHREAD">
<a href="">thread title</a> in territory with character(s)
<a href="">thread title</a> in territory with character(s)
<a href="">thread title</a> in territory with character(s)
<a href="">thread title</a> in territory with character(s)
<a href="">thread title</a> in territory with character(s)
<a href="">thread title</a> in territory with character(s)</div>
<br>
<div class="btSEASON"><b>season</b></div>
<br>
<div class="btTRACKERTHREAD">
<a href="">thread title</a> in territory with character(s)
<a href="">thread title</a> in territory with character(s)
<a href="">thread title</a> in territory with character(s)
<a href="">thread title</a> in territory with character(s)
<a href="">thread title</a> in territory with character(s)
<a href="">thread title</a> in territory with character(s)</div>
<br>
<div class="btSEASON"><b>season</b></div>
<br>
<div class="btTRACKERTHREAD">
<a href="">thread title</a> in territory with character(s)
<a href="">thread title</a> in territory with character(s)
<a href="">thread title</a> in territory with character(s)
<a href="">thread title</a> in territory with character(s)
<a href="">thread title</a> in territory with character(s)
<a href="">thread title</a> in territory with character(s)</div>
</div>
  
<div class="btMAINTAB">
<input type="radio" id="dark-tab-2" name="dark-bunny-main-tabs">
<label for="dark-tab-2">year two</label>
<div class="btTEXT" style="text-align: justify;">
<div class="btSEASON"><b>season</b></div>
<br>
<div class="btTRACKERTHREAD">
<a href="">thread title</a> in territory with character(s)
<a href="">thread title</a> in territory with character(s)
<a href="">thread title</a> in territory with character(s)
<a href="">thread title</a> in territory with character(s)
<a href="">thread title</a> in territory with character(s)
<a href="">thread title</a> in territory with character(s)
</div></div></div></div></div>


Female Highlander Imperial Army


0

posts
10.00

renown
Extra Small •


cue the 80's disco
posted 10-21-2021, 11:35 PM - Word count:
#5

hey!
please replace the COLORHERE with your own color of choice.
please replace the CHARNAME with your own name or character name.

you may replace the text season with whatever season you'd like.
please leave the credit attached and do not change the base code outside of color edits.
enjoy!
— bunny





year one



spring


thread name in territory with character
active


thread name in territory with character
finished


thread name in territory with character
inactive



summer


thread name in territory with character
active


thread name in territory with character
finished


thread name in territory with character
inactive






<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">

<style>.electricCHARNAMEtextbox { background-color: rgba(15, 15, 15, 1.0); padding: 25px 60px 25px 60px; text-align: justify; font-family: 'Lato', sans-serif; font-size: 9.5px; color: #848484; letter-spacing: 1px; text-transform: lowercase; line-height: 13px; height: auto; overflow: none; } .electricCHARNAMEtable { width: 550px; margin: auto; color: #222; border-image: linear-gradient(to bottom, rgb(RGBA COLOR HERE),rgba(255, 255, 255)) 1 100%; border-image-slice: 1; border-style: solid; border-width: 1px; z-index: 1; } .electricCHARNAMEtable h { color: #COLORHERE; font-size: 11px; font-style: italic; font-family: 'georgia'; font-weight: bold; } .electricCHARNAMEtable a, .electricCHARNAMEtable a:active, .electricCHARNAMEtable a:visited { color: #ff4d76; transition: all 0.8s ease; } .electricCHARNAMEtable a:hover { color: #fff; transition: all 0.8s ease-out; } </style>

<center><div class="electricCHARNAMEtable"><div class="electricCHARNAMEtextbox"><center><h style="background-color: rgba(0, 0, 0, 0.2); display: block; color: #c3c3c3; font-size: 20px; padding: 10px;">year one</h></center>


<center><h style="font-size: 15px; font-style: normal; text-transform: lowercase; font-family: 'Lato', sans-serif; border-bottom: 1px solid #000; padding: 5px 40px; font-weight: 300;">season</h></center>

<a href="#">thread name</a> in <I>territory</i> with <I>character</I><div style="float: right;"><I>active</I></div><br><br>
<a href="#">thread name</a> in <I>territory</i> with <I>character</I><div style="float: right;"><b>finished</b></div><br><br>
<a href="#">thread name</a> in <I>territory</i> with <I>character</I><div style="float: right;"><s>inactive</s></div><br><br>

<center><h style="font-size: 15px; font-style: normal; text-transform: lowercase; font-family: 'Lato', sans-serif; border-bottom: 1px solid #000; padding: 5px 40px; font-weight: 300;">season</h></center>

<a href="#">thread name</a> in <I>territory</i> with <I>character</I><div style="float: right;"><I>active</I></div><br><br>
<a href="#">thread name</a> in <I>territory</i> with <I>character</I><div style="float: right;"><b>finished</b></div><br><br>
<a href="#">thread name</a> in <I>territory</i> with <I>character</I><div style="float: right;"><s>inactive</s></div><br><br>

</div></div></center>