Free Development Templates

claerie · 05-07-2021, 10:23 AM

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!

oraeguno · 05-15-2021, 11:05 AM

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

info

booklet

ARCHIVES

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>

bean · 05-31-2021, 06:09 PM

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>

bunny · 09-22-2021, 11:37 PM

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

year one

season