Profile
I kinda forgot this thing existed, I had plans to include more detail in it but I kinda gave up on it so I never uploaded it (plus its kinda a wreck in terms of organization lol). I kind of hastily threw in some comments after the fact to make editing it a bit easier. Use Ctrl + F and search for "INPUT" to see where exactly you need to type stuff in. If you need to find resources for the background images/cookie run assets the wiki probably has what you need. Backgrounds may need some cropping to fit correctly.
If you're a premium TH member, I tried to use a custom font using google fonts to match the game. Its not a perfect match, but if you want to try, paste in this into your CSS:
@import url('https://fonts.googleapis.com/css?family=Reem Kufi Fun');
Alternatively, you could look on google fonts yourself to see if you can find a better match yourself. Replace "Reem Kufi Fun" in the CSS and HTML to change it.
Cotton Cookie
Lv. 50 /70 Support Rear
HP
62,864
ATK
9,757
DEF
14,551
CRIT%
15.7%
Power
45,595
A Warm Light
While Cotton Cookie's lantern shines, the warm light will periodically restore the allies' HP and increase the summoned creatures' ATK. Additionally, Cotton Cookie summons sheep that will charge at the enemies, dealing area damage and stunning them. The summoned sheep will fight alongside the Cookies for a certain time.
<!-- Kingdom Cookie HTML Code | rimucode -->
<!-- INPUT: Background
change : background-image:url([link]) -->
<div class="card m-auto p-3 border-0 overflow-auto" style="background-image:url(https://cdn.discordapp.com/attachments/895398650962903040/1025943724351570010/unknown.png); background-size:125%; background-position:center; max-width:800px; height:450px; color:#ffffff; font-family:'Reem Kufi Fun', Tahoma; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">
<div class="row no-gutters h-100">
<div class="col-sm-2">
<p class="mb-1">
<!-- INPUT: Rarity -->
<img src="https://cdn.discordapp.com/attachments/895398650962903040/1025951142510858240/unknown.png">
<span style="white-space:nowrap; font-weight:600; font-size:1.7em; color:#fff">
<!-- INPUT: Name -->
Cotton Cookie
</span>
</p>
<p>
<span class="badge badge-pill mb-2" style="color:#888888; font-weight:500; background-color:rgba(0,0,0,.35); width:100%; font-size:1em; text-align:left; color:#ffffff; padding-top:5px; padding-bottom:5px; padding-left:15px; padding-right:15px;">
<span style="color:#EDF495">
<!-- INPUT: Level -->
Lv. 50
</span>
/70
</span>
<!-- INPUT: Cookie Class Icon ; Replace fa-heart with one of these
CHARGE: fa-hand-fist DEFENSE: fa-shield
MAGIC: fa-wand-sparkles AMBUSH: fa-dagger
HEAL: fa-plus SUPPORT: fa-chevrons-up
RANGED: fa-bow-arrow BOMB: fa-bomb -->
<span class="badge badge-pill mb-2" style="font-weight:500; background-color:rgba(0,0,0,.35); width:100%; font-size:1em; text-align:left; color:#ffffff; padding-top:5px; padding-bottom:5px; padding-left:15px; padding-right:15px;">
<i class="fa-solid fa-fw fa-heart" style="margin-right:7px;"></i>
<!-- INPUT: Class Text -->
Support
</span>
<span class="badge badge-pill mb-2" style="font-weight:500; background-color:rgba(0,0,0,.35); width:100%; font-size:1em; text-align:left; color:#ffffff; padding-top:5px; padding-bottom:5px; padding-left:15px; padding-right:15px;">
<span style="letter-spacing:-5px">
<!-- INPUT: Position Icon ; change the color of the icons to adjust
REAR (BLUE): #80C9F9
MIDDLE (YELLOW): #F8D521
FRONT (RED): #C4312C
GRAY: #8C8C8C -->
<i class="fa-solid fa-chevron-right" style="color:#80C9F9"></i>
<i class="fa-solid fa-chevron-right" style="color:#8C8C8C"></i>
<i class="fa-solid fa-chevron-right" style="color:#8C8C8C"></i>
</span>
<span style="margin-left:9px; color:#80C9F9">
<!-- INPUT: Position Text -->
Rear
</span>
</span>
</p>
</div>
<div class="col-sm-auto mx-auto" style="width:220px">
<!-- INPUT: MAIN IMAGE CONTAINER
Getting cookies to scale/sit centered in this thing can be a bit of a hassle. I recommend going on https://th.circlejourney.net/ to see it update live as you play with it to get it to fit.
Key things to change:
background-image:url([link]) >> Link to gif/picture of cookie
background-position:0px 110px >> first # positions the cookie's horizontal axis, second # positions the cookie's vertical axis
background-size:85% >> change the percent to adjust how big you want the cookie to be
-->
<div class="card h-100 bg-transparent border-0" style="background-image:url(https://cdn.discordapp.com/attachments/895398650962903040/1025971244014768189/cotton.gif); min-height:200px;background-repeat:no-repeat; background-position:0px 110px; background-size:85%;"></div>
</div>
<div class="col-sm p-2">
<div class="card p-3 rounded-0 border-0" style="background:linear-gradient(90deg, rgba(57,130,189,0) 0%, rgba(57,130,189,0.2) 5%, rgba(57,130,189,0.4) 100%); margin-right:-24px;">
<div class="row no-gutters">
<div class="col-sm px-1">
<span class="badge badge-pill mb-1 justify-content-between" style="font-weight:500; background-color:rgba(0,0,0,.35); width:100%; font-size:1em; text-align:left; color:#ffffff; padding-top:5px; padding-bottom:5px; padding-left:15px; padding-right:15px;">
HP
<!-- INPUT: HP -->
<span>62,864</span>
</span>
<span class="badge badge-pill mb-1 justify-content-between" style="font-weight:500; background-color:rgba(0,0,0,.35); width:100%; font-size:1em; text-align:left; color:#ffffff; padding-top:5px; padding-bottom:5px; padding-left:15px; padding-right:15px;">
ATK
<!-- INPUT: ATK -->
<span>9,757</span>
</span>
<span class="badge badge-pill mb-1 justify-content-between" style="font-weight:500; background-color:rgba(0,0,0,.35); width:100%; font-size:1em; text-align:left; color:#ffffff; padding-top:5px; padding-bottom:5px; padding-left:15px; padding-right:15px;">
DEF
<!-- INPUT: DEF -->
<span>14,551</span>
</span>
<span class="badge badge-pill mb-1 justify-content-between" style="font-weight:500; background-color:rgba(0,0,0,.35); width:100%; font-size:1em; text-align:left; color:#ffffff; padding-top:5px; padding-bottom:5px; padding-left:15px; padding-right:15px;">
CRIT%
<!-- INPUT: CRIT -->
<span>15.7%</span>
</span>
</div>
<div class="col-sm px-1">
<div class="card h-100 border-0" style="background-color:rgba(0,0,0,.4); border-radius:15px;">
<p class="m-auto" align="center">
Power
<br>
<span style="color:#EDF495; font-size:2.25em;">
<!-- INPUT: Power -->
45,595
</span>
</p>
</div>
</div>
</div>
</div>
<div class="card p-3 mt-3 border-0" style="background-color:rgba(0,0,0,.4); border-radius:15px;">
<div class="row no-gutters">
<div class="col-2">
<p style="color:#EDF495;" align="center">
<!-- INPUT: Skill Icon -->
<img src="https://cdn.discordapp.com/attachments/895398650962903040/1026296454903496724/skill.png">
<!-- INPUT: Skill Name -->
A Warm Light
</p>
</div>
<div class="col pl-3">
<p>
<!-- INPUT: Skill Description -->
While Cotton Cookie's lantern shines, the warm light will periodically restore the allies' HP and increase the summoned creatures' ATK. Additionally, Cotton Cookie summons sheep that will charge at the enemies, dealing area damage and stunning them. The summoned sheep will fight alongside the Cookies for a certain time.
</p>
</div>
</div>
</div>
</div>
</div>
<a class="tooltipster" href="https://toyhou.se/18605933.kingdom-cookie" style="color:#fff; position:absolute; bottom:5px; left:8px; font-size:.8em" title="code by rimucode">
<i class="fa-solid fa-fw fa-code"></i>
</a>
</div>
Recent Images
No images.