[SNIP] Sky audio settings
created by:FlowerlyRat
Custom ColorsHTMLMiscellaneous
Copy
<!--
╭━━╮╱╱╱╱╱╱╱╱╱╱╱╱╱╭━╮╱╱╭╮
┃━┳┫╭━┳┳┳┳━┳┳┳╮╭┳┫╋┣━╮┃╰╮
┃╭┫╰┫╋┃┃┃┃┻┫╭┫╰┫┃┃╮┫╋╰┫╭┫
╰╯╰━┻━┻━━┻━┻╯╰━╋╮┣┻┻━━┻━╯
╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╰━╯
Sky audio settings: code by FlowerlyRat || Based on the game Sky: Children of the Light's UI by ThatGameCompany
This is a filler code while I still work on the Sky: Children of the Light code bundle [never finishing this fxcker fr,,,]
> It is recommended to use circlejourney's ToyHouse live editor to see what you're doing -> https://th.circlejourney.net/
Code is compatible with the "Sky: Children of the Light avatar frame" and "Sky: Children of the Light candle UI" add-ons.
To add them to this code, please copy and paste them above this commentary
Feel free to add this snippet to other codes, although it might need some playing around to get it to look correct [I do not recommend changing the width of the collapsible]
Background is completely optional, if you wish to remove it, please delete lines 26 to 30 and line 146 [before filling the code out]
Multiple background images have been screenshoted from the game to give a wide variety of possibilities [ToyHouse gallery: https://toyhou.se/25042050./gallery || Google Drive: https://drive.google.com/drive/folders/12YBvvXe9MoIYj9oUo8MVpngCojj8vCv3?usp=sharing], however if none of them suits your taste or vision, please go on and take your own in-game
-->
<div class="card bg-faded border-0 rounded-0 p-3" style="margin-top: -17px; margin-left: -15px; margin-right: -15px; background: url(
BACKGROUND_URL
); background-size: cover; background-position: center; background-attachment: fixed; color: #cdcfc3">
<!-- BUTTON -->
<div class="justify-content-center">
<a data-toggle="collapse" href="#MUSIC" style="color: #ffffef; text-decoration: none">
<div class="btn btn-outline-warning border-0" style="padding: 1px; width: 57px; height: 57px; color: #ffffef; border-radius: 16px; border-color: rgba(91, 92, 87, 0.7); filter: saturate(60%)">
<div class="card border-0 h-100 justify-content-center" style="border-radius: 15px; background: rgba(0, 0, 0, 0.8)">
<!--===ICON===-->
<i class="fas fa-headphones-alt" style="font-size: 35px"></i>
</div>
</div>
</a>
</div>
<!-- BUTTON end -->
<!-- COLLAPSIBLE -->
<div class="collapse fade mt-2" id="MUSIC">
<div class="card bg-faded mx-auto pt-3" style="width: 350px; color: #cdcfc3; border-radius: 20px; border-width: 2px; background: rgba(0, 0, 0, 0.8)">
<h1 class="text-center" style="color: #ffffef">Audio Settings</h1>
<div class="px-3" style="height: 250px; overflow: auto; scrollbar-width: thin; scrollbar-color: #afb1b0 rgba(0, 0, 0, 0)">
<!-- PLAYLIST NAME -->
<p class="mt-3" style="color: #ffffef; font-size: 15px"><b>
Playlist name
</b></p>
<!-- PLAYLIST NAME end -->
<!-- TEXT -->
<p class="mt-n2" style="text-align: justify">
Short playlist description
</p>
<!-- TEXT end -->
<!-- Divider -->
<div class="row no-gutters my-2">
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
<div class="col-auto border-0 rounded-0">
<p class="mx-2" style="margin-top: -3px; font-size: 10px">◆</p>
</div>
<div class="col justify-content-center" style="border-width: 0 0 1px 0; height: 5px; border-style: solid"></div>
</div>
<!-- Divider end -->
<!-- SONGS -->
<div>
<div class="card border-0 rounded-0 bg-transparent mr-n2 pb-3" style="color: #ffffef">
<!-- [1] --> <!-- Duplicate this entire senction to add a new song -->
<div class="row no-gutters mb-2 align-items-center">
<div class="col">
<!-- SONG NAME --> <!-- Please also change the tooltip for the name, so that when it gets cut off, people can still see the full name by hovering over or clicking on it -->
<a class="tooltipster" title="
Song name
"><p class="text-truncate" style="width: 140px"><b>
Song name
</b></p></a>
<!-- SONG NAME end -->
</div>
<div class="col-auto">
<div class="card border-0 p-2" style="width: 160px; border-radius: 40px; background: #3fb452">
<div class="row no-gutters align-items-center">
<div class="col">
<!-- ARTIST NAME --> <!-- Please also change the tooltip for the name, so that when it gets cut off, people can still see the full name by hovering over or clicking on it -->
<a class="tooltipster" title="
Artist name
"><p class="text-truncate" style="width: 119px; font-size: 12px">
Artist name
</p></a>
<!-- ARTIST NAME end -->
</div>
<div class="col-auto align-items-center">
<i class="fas fa-play-circle" style="font-size: 20px"></i>
<span>
<!-- YOUTUBE VIDEO ID -->
<iframe class="flex-fill" style="position: absolute; top: -4px; right: -3px; width: 25px; height: 25px; opacity: 0.00000005" frameborder="0" src="
https://www.youtube.com/embed/VIDEO_ID
"></iframe>
<!-- YOUTUBE VIDEO ID end -->
</span>
</div>
</div>
</div>
</div>
</div>
<!-- [1] -->
</div>
</div>
<!-- SONGS end -->
</div>
</div>
<!--///// CREDITS /////-->
<p class="text-center mt-3">
<a target="_blank" href="https://toyhou.se/FlowerlyRat/characters/folder:4673560" data-toggle="tooltip" title="Code by FlowerlyRat" style="color: #ffffef; text-shadow: 0 0 2px #684647, 0 0 2px #684647, 0 0 2px #684647">
<i class="fas fa-sharp fa-less-than" style="font-size: 11px"></i><i class="fas fa-sharp fa-eye-slash fa-flip-horizontal"></i><i class="fas fa-sharp fa-greater-than" style="font-size: 11px"></i></a>
</p>
<!--///// CREDITS /////-->
</div>
<!-- COLLAPSIBLE end -->
</div>