what lines of code do i change to add multiple of these? i know its something related to the "#palette" parts but im not too good with html
Hihi I was wondering if u could help me out! I used this on my character Flerry! He has HTML already, and because of the palettes expanding it's trapped the other code in there too. I was going to put it at the bottom (under the pre-existing HTML) but it wouldn't show up!
Is there a way to close it off so it doesn't trap the pre-existing HTML in there too? :]!
hi!! :D i'm without my computer today so i unfortunately can't check with inspect element to locate where exactly the issue is, but you are definitely missing one or multiple closing </div>s, which is causing the problem. try comparing your code to the original palette code here to see where you might be missing any. if you haven't modified any of the spacing, opening <div>s should be aligned horizontally the same as their respective closing </div>s. if they aren't, that means they're matching with the wrong counterpart due to a missing closing </div>. with the code editor enabled, you can put your cursor in either and a little border will appear around the other.
if you can't find the problem, link/post a screenshot of the code near the end of the palette and i'll take a look :] or i can check it out myself more thoroughly tomorrow after work.
I got rid of the header part of the palette, but that was about it! I'm just gonna throw a ss here cuz I'm a lil dumb with code sometimes and it's late waa
no worries!! you've deleted the two closing </div>s on the line immediately above the "credit - don't delete" comment:
(sorry if this image is obscenely large or anything i have no way to check rn lmao)
edit: i fucked up the formatting in a different, more horrible way, sorry if you saw that 😔
I'm having trouble figuring out how to add color to the bar part, I'm not exactly sure which hex code I replace with the characters color palette
both hex codes in the same line/section should be the same! this applies to both the bar at the top and the extended details; for both of them, one of the hex codes actually controls the color and the other is the text that displays the hex code.
for the top bar:
for the extended details:
how it looks (when it's filled in lol)
the blue and yellow circled hex codes control the colors of the bars, while the green and magenta circled hex codes display the hex code text (the green one is a tooltip that appears when the color bar is hovered over). the pink controls what color the text is, so if you have a light color it should be black and if you have a dark color it should be white (you could also put a hex code there instead if you wanted the text to be a particular color).
the intent is for the colors in the top bar to correspond with the colors in the extended details, but they don't have to if you don't want to! otherwise, the topmost line of the code for the top bar is its leftmost section, so the first color in the top bar should be the first color in the extended details, etc.
This is a really good palette. I especially like the expanding table menu to say what each color is for, i was trying to make my own palette with labeled colors and i couldn't get it to work. It's perfect. Thanks so much for making this
This user is not visible to guests.
hey, i'm glad you like it!! :] i made a couple alternate versions for you, i hope these are along the lines of what you were looking for. if not, check out this guide! it's for css, but it also applies to the use of "border" in html styles. search for "border" in the code and replace what follows it with whatever you'd like.
i made these kind of quickly, so if anything breaks, let me know and i can try to fix it for you. ^^
No Borders
<!--------------------------------
"EXPANDING PALETTE" - F2U HTML by @StormyStarlight
https://toyhou.se/7975467.-f2u-html-expanding-palette
-Do not remove the credit at the bottom! You may change how the credit is displayed/move it elsewhere, but it may not be removed altogether. Do not claim you made this layout.
-Feel free to modify/"frankenstein" this layout as much as you want as long as I am still credited, along with any other involved creators.
-Keep WYSIWYG off when using this layout!
-Do not redistribute this layout. Instead, provide a link back to the original if asked!
--------------------------------->
<!------ PALETTE -------------->
<!------------------------------
Add or remove extra lines where needed:
<span style="background-color: #000000;" class="col h-100 tooltipster" title="#000000"></span>
------------------------------->
<a href="#palette" data-toggle="collapse" style="text-decoration: none;">
<span class="row no-gutters modal-open mb-2" style="height: 25px; border-radius: .25em;">
<span style="background-color: #000000;" class="col tooltipster" title="#000000"></span>
<span style="background-color: #000000;" class="col tooltipster" title="#000000"></span>
<span style="background-color: #000000;" class="col tooltipster" title="#000000"></span>
<span style="background-color: #000000;" class="col tooltipster" title="#000000"></span>
<span style="background-color: #000000;" class="col tooltipster" title="#000000"></span>
<span style="background-color: #000000;" class="col tooltipster" title="#000000"></span>
<span style="background-color: #000000;" class="col tooltipster" title="#000000"></span>
<span class="col tooltipster d-inline-flex bg-secondary text-light" style="font-size: 1.1rem;" title="More Colors & Details"><i class="fas fa-palette m-auto"></i></span>
</span>
</a>
<!------ DETAILS -------------->
<div id="palette" class="collapse"><p>
<!------------------------------
Add or remove extra sections where needed:
<div class="col-3 col-sm-2 d-flex" style="background-color: #000000;">
<p class="m-auto" style="font-family: monospace; color: white;">#000000</p>
</div><div class="card bg-faded col-9 col-sm-10 p-2" style="border-radius: 0; border-top: 0; border-left: 0; border-right: 0;">
<p>PLACEMENT</p>
</div>
Alternate code for added note on far right:
<div class="col-3 col-sm-2 d-flex" style="background-color: #000000;">
<p class="m-auto" style="font-family: monospace; color: white;">#000000</p>
</div><div class="card bg-faded col-6 col-sm-8 p-2" style="border-radius: 0; border-top: 0; border-left: 0; border-right: 0;">
<p>PLACEMENT</p>
</div><div class="card bg-faded col-3 col-sm-2 p-2" style="border-radius: 0; border-top: 0; border-left: 0; border-right: 0;">
<p class="text-right"><i>NOTE</i></p>
</div>
The "color: white/black;" in the second line should be changed depending on how dark/light your color is! If you can't see the text, try swapping it for the other color. You can also input custom font colors using hex codes if you want.
------------------------------->
<!---- MAIN SECTION ----------->
<div class="card bg-faded modal-open mb-2" style="border: 0;"><div class="row no-gutters">
<div class="col-3 col-sm-2 d-flex" style="background-color: #000000;">
<p class="m-auto" style="font-family: monospace; color: white;">#000000</p>
</div><div class="card bg-faded col-9 col-sm-10 p-2" style="border: 0;">
<p>PLACEMENT</p>
</div>
<div class="col-3 col-sm-2 d-flex" style="background-color: #000000;">
<p class="m-auto" style="font-family: monospace; color: white;">#000000</p>
</div><div class="card bg-faded col-9 col-sm-10 p-2" style="border: 0;">
<p>PLACEMENT</p>
</div>
<div class="col-3 col-sm-2 d-flex" style="background-color: #000000;">
<p class="m-auto" style="font-family: monospace; color: white;">#000000</p>
</div><div class="card bg-faded col-9 col-sm-10 p-2" style="border: 0;">
<p>PLACEMENT</p>
</div>
<div class="col-3 col-sm-2 d-flex" style="background-color: #000000;">
<p class="m-auto" style="font-family: monospace; color: white;">#000000</p>
</div><div class="card bg-faded col-9 col-sm-10 p-2" style="border: 0;">
<p>PLACEMENT</p>
</div>
<div class="col-3 col-sm-2 d-flex" style="background-color: #000000;">
<p class="m-auto" style="font-family: monospace; color: white;">#000000</p>
</div><div class="card bg-faded col-9 col-sm-10 p-2" style="border: 0;">
<p>PLACEMENT</p>
</div>
<div class="col-3 col-sm-2 d-flex" style="background-color: #000000;">
<p class="m-auto" style="font-family: monospace; color: white;">#000000</p>
</div><div class="card bg-faded col-9 col-sm-10 p-2" style="border: 0;">
<p>PLACEMENT</p>
</div>
<!-- ADD MORE ABOVE ^^ ------>
<div class="col-3 col-sm-2 d-flex" style="background-color: #000000;">
<p class="m-auto" style="font-family: monospace; color: white;">#000000</p>
</div><div class="card bg-faded col-9 col-sm-10 p-2" style="border: 0;">
<p>PLACEMENT</p>
</div>
</div></div>
<!---- EXTRA SECTION ---------->
<div class="card bg-faded modal-open mb-2" style="border: 0;"><div class="row no-gutters">
<div class="card text-center bg-secondary text-light col-12 p-2" style="border-radius: 0; border: 0;">
<p><b>HEADER</b></p>
</div>
<div class="col-3 col-sm-2 d-flex" style="background-color: #000000;">
<p class="m-auto" style="font-family: monospace; color: white;">#000000</p>
</div><div class="card bg-faded col-6 col-sm-8 p-2" style="border: 0;">
<p>PLACEMENT</p>
</div><div class="card bg-faded col-3 col-sm-2 p-2" style="border: 0;">
<p class="text-right"><i>NOTE</i></p>
</div>
<div class="col-3 col-sm-2 d-flex" style="background-color: #000000;">
<p class="m-auto" style="font-family: monospace; color: white;">#000000</p>
</div><div class="card bg-faded col-6 col-sm-8 p-2" style="border: 0;">
<p>PLACEMENT</p>
</div><div class="card bg-faded col-3 col-sm-2 p-2" style="border: 0;">
<p class="text-right"><i>NOTE</i></p>
</div>
<div class="col-3 col-sm-2 d-flex" style="background-color: #000000;">
<p class="m-auto" style="font-family: monospace; color: white;">#000000</p>
</div><div class="card bg-faded col-9 col-sm-10 p-2" style="border: 0;">
<p>PLACEMENT</p>
</div>
<div class="col-3 col-sm-2 d-flex" style="background-color: #000000;">
<p class="m-auto" style="font-family: monospace; color: white;">#000000</p>
</div><div class="card bg-faded col-9 col-sm-10 p-2" style="border: 0;">
<p>PLACEMENT</p>
</div>
<!-- ADD MORE ABOVE ^^ ------>
<div class="col-3 col-sm-2 d-flex" style="background-color: #000000;">
<p class="m-auto" style="font-family: monospace; color: white;">#000000</p>
</div><div class="card bg-faded col-9 col-sm-10 p-2" style="border: 0;">
<p>PLACEMENT</p>
</div>
</div></div>
<!------ CREDIT - DON'T DELETE -->
<div class="row"><div class="col-12 d-flex">
<div class="card bg-faded w-100 my-auto border-top-0" style="height:1px;"></div>
<a href="/7975467.-f2u-html-expanding-palette" class="text-muted px-2 tooltipster" title="F2U HTML by StormyStarlight" data-placement="bottom" style="font-size: small;"><i class="fal fa-code"></i></a>
<div class="card bg-faded w-100 my-auto border-top-0" style="height:1px;"></div>
</div></div>
<!----------------------------->
</p></div>Sharp Corners
<!--------------------------------
"EXPANDING PALETTE" - F2U HTML by @StormyStarlight
https://toyhou.se/7975467.-f2u-html-expanding-palette
-Do not remove the credit at the bottom! You may change how the credit is displayed/move it elsewhere, but it may not be removed altogether. Do not claim you made this layout.
-Feel free to modify/"frankenstein" this layout as much as you want as long as I am still credited, along with any other involved creators.
-Keep WYSIWYG off when using this layout!
-Do not redistribute this layout. Instead, provide a link back to the original if asked!
--------------------------------->
<!------ PALETTE -------------->
<!------------------------------
Add or remove extra lines where needed:
<span style="background-color: #000000;" class="col h-100 tooltipster" title="#000000"></span>
------------------------------->
<a href="#palette" data-toggle="collapse" style="text-decoration: none;">
<span class="row no-gutters modal-open mb-2" style="height: 25px; border-radius: 0;">
<span style="background-color: #000000;" class="col tooltipster" title="#000000"></span>
<span style="background-color: #000000;" class="col tooltipster" title="#000000"></span>
<span style="background-color: #000000;" class="col tooltipster" title="#000000"></span>
<span style="background-color: #000000;" class="col tooltipster" title="#000000"></span>
<span style="background-color: #000000;" class="col tooltipster" title="#000000"></span>
<span style="background-color: #000000;" class="col tooltipster" title="#000000"></span>
<span style="background-color: #000000;" class="col tooltipster" title="#000000"></span>
<span class="col tooltipster d-inline-flex bg-secondary text-light" style="font-size: 1.1rem;" title="More Colors & Details"><i class="fas fa-palette m-auto"></i></span>
</span>
</a>
<!------ DETAILS -------------->
<div id="palette" class="collapse"><p>
<!------------------------------
Add or remove extra sections where needed:
<div class="col-3 col-sm-2 d-flex" style="background-color: #000000;">
<p class="m-auto" style="font-family: monospace; color: white;">#000000</p>
</div><div class="card bg-faded col-9 col-sm-10 p-2" style="border-radius: 0; border-top: 0; border-left: 0; border-right: 0;">
<p>PLACEMENT</p>
</div>
Alternate code for added note on far right:
<div class="col-3 col-sm-2 d-flex" style="background-color: #000000;">
<p class="m-auto" style="font-family: monospace; color: white;">#000000</p>
</div><div class="card bg-faded col-6 col-sm-8 p-2" style="border-radius: 0; border-top: 0; border-left: 0; border-right: 0;">
<p>PLACEMENT</p>
</div><div class="card bg-faded col-3 col-sm-2 p-2" style="border-radius: 0; border-top: 0; border-left: 0; border-right: 0;">
<p class="text-right"><i>NOTE</i></p>
</div>
The "color: white/black;" in the second line should be changed depending on how dark/light your color is! If you can't see the text, try swapping it for the other color. You can also input custom font colors using hex codes if you want.
------------------------------->
<!---- MAIN SECTION ----------->
<div class="card bg-faded modal-open mb-2" style="border-radius: 0;"><div class="row no-gutters">
<div class="col-3 col-sm-2 d-flex" style="background-color: #000000;">
<p class="m-auto" style="font-family: monospace; color: white;">#000000</p>
</div><div class="card bg-faded col-9 col-sm-10 p-2" style="border-radius: 0; border-top: 0; border-left: 0; border-right: 0;">
<p>PLACEMENT</p>
</div>
<div class="col-3 col-sm-2 d-flex" style="background-color: #000000;">
<p class="m-auto" style="font-family: monospace; color: white;">#000000</p>
</div><div class="card bg-faded col-9 col-sm-10 p-2" style="border-radius: 0; border-top: 0; border-left: 0; border-right: 0;">
<p>PLACEMENT</p>
</div>
<div class="col-3 col-sm-2 d-flex" style="background-color: #000000;">
<p class="m-auto" style="font-family: monospace; color: white;">#000000</p>
</div><div class="card bg-faded col-9 col-sm-10 p-2" style="border-radius: 0; border-top: 0; border-left: 0; border-right: 0;">
<p>PLACEMENT</p>
</div>
<div class="col-3 col-sm-2 d-flex" style="background-color: #000000;">
<p class="m-auto" style="font-family: monospace; color: white;">#000000</p>
</div><div class="card bg-faded col-9 col-sm-10 p-2" style="border-radius: 0; border-top: 0; border-left: 0; border-right: 0;">
<p>PLACEMENT</p>
</div>
<div class="col-3 col-sm-2 d-flex" style="background-color: #000000;">
<p class="m-auto" style="font-family: monospace; color: white;">#000000</p>
</div><div class="card bg-faded col-9 col-sm-10 p-2" style="border-radius: 0; border-top: 0; border-left: 0; border-right: 0;">
<p>PLACEMENT</p>
</div>
<div class="col-3 col-sm-2 d-flex" style="background-color: #000000;">
<p class="m-auto" style="font-family: monospace; color: white;">#000000</p>
</div><div class="card bg-faded col-9 col-sm-10 p-2" style="border-radius: 0; border-top: 0; border-left: 0; border-right: 0;">
<p>PLACEMENT</p>
</div>
<!-- ADD MORE ABOVE ^^ ------>
<div class="col-3 col-sm-2 d-flex" style="background-color: #000000;">
<p class="m-auto" style="font-family: monospace; color: white;">#000000</p>
</div><div class="card bg-faded col-9 col-sm-10 p-2" style="border: 0;">
<p>PLACEMENT</p>
</div>
</div></div>
<!---- EXTRA SECTION ---------->
<div class="card bg-faded modal-open mb-2" style="border-radius: 0;"><div class="row no-gutters">
<div class="card text-center bg-secondary text-light col-12 p-2" style="border-radius: 0; border: 0;">
<p><b>HEADER</b></p>
</div>
<div class="col-3 col-sm-2 d-flex" style="background-color: #000000;">
<p class="m-auto" style="font-family: monospace; color: white;">#000000</p>
</div><div class="card bg-faded col-6 col-sm-8 p-2" style="border-radius: 0; border-top: 0; border-left: 0; border-right: 0;">
<p>PLACEMENT</p>
</div><div class="card bg-faded col-3 col-sm-2 p-2" style="border-radius: 0; border-top: 0; border-left: 0; border-right: 0;">
<p class="text-right"><i>NOTE</i></p>
</div>
<div class="col-3 col-sm-2 d-flex" style="background-color: #000000;">
<p class="m-auto" style="font-family: monospace; color: white;">#000000</p>
</div><div class="card bg-faded col-6 col-sm-8 p-2" style="border-radius: 0; border-top: 0; border-left: 0; border-right: 0;">
<p>PLACEMENT</p>
</div><div class="card bg-faded col-3 col-sm-2 p-2" style="border-radius: 0; border-top: 0; border-left: 0; border-right: 0;">
<p class="text-right"><i>NOTE</i></p>
</div>
<div class="col-3 col-sm-2 d-flex" style="background-color: #000000;">
<p class="m-auto" style="font-family: monospace; color: white;">#000000</p>
</div><div class="card bg-faded col-9 col-sm-10 p-2" style="border-radius: 0; border-top: 0; border-left: 0; border-right: 0;">
<p>PLACEMENT</p>
</div>
<div class="col-3 col-sm-2 d-flex" style="background-color: #000000;">
<p class="m-auto" style="font-family: monospace; color: white;">#000000</p>
</div><div class="card bg-faded col-9 col-sm-10 p-2" style="border-radius: 0; border-top: 0; border-left: 0; border-right: 0;">
<p>PLACEMENT</p>
</div>
<!-- ADD MORE ABOVE ^^ ------>
<div class="col-3 col-sm-2 d-flex" style="background-color: #000000;">
<p class="m-auto" style="font-family: monospace; color: white;">#000000</p>
</div><div class="card bg-faded col-9 col-sm-10 p-2" style="border: 0;">
<p>PLACEMENT</p>
</div>
</div></div>
<!------ CREDIT - DON'T DELETE -->
<div class="row"><div class="col-12 d-flex">
<div class="card bg-faded w-100 my-auto border-top-0" style="height:1px;"></div>
<a href="/7975467.-f2u-html-expanding-palette" class="text-muted px-2 tooltipster" title="F2U HTML by StormyStarlight" data-placement="bottom" style="font-size: small;"><i class="fal fa-code"></i></a>
<div class="card bg-faded w-100 my-auto border-top-0" style="height:1px;"></div>
</div></div>
<!----------------------------->
</p></div>No Borders + Sharp Corners
<!--------------------------------
"EXPANDING PALETTE" - F2U HTML by @StormyStarlight
https://toyhou.se/7975467.-f2u-html-expanding-palette
-Do not remove the credit at the bottom! You may change how the credit is displayed/move it elsewhere, but it may not be removed altogether. Do not claim you made this layout.
-Feel free to modify/"frankenstein" this layout as much as you want as long as I am still credited, along with any other involved creators.
-Keep WYSIWYG off when using this layout!
-Do not redistribute this layout. Instead, provide a link back to the original if asked!
--------------------------------->
<!------ PALETTE -------------->
<!------------------------------
Add or remove extra lines where needed:
<span style="background-color: #000000;" class="col h-100 tooltipster" title="#000000"></span>
------------------------------->
<a href="#palette" data-toggle="collapse" style="text-decoration: none;">
<span class="row no-gutters modal-open mb-2" style="height: 25px; border-radius: 0;">
<span style="background-color: #000000;" class="col tooltipster" title="#000000"></span>
<span style="background-color: #000000;" class="col tooltipster" title="#000000"></span>
<span style="background-color: #000000;" class="col tooltipster" title="#000000"></span>
<span style="background-color: #000000;" class="col tooltipster" title="#000000"></span>
<span style="background-color: #000000;" class="col tooltipster" title="#000000"></span>
<span style="background-color: #000000;" class="col tooltipster" title="#000000"></span>
<span style="background-color: #000000;" class="col tooltipster" title="#000000"></span>
<span class="col tooltipster d-inline-flex bg-secondary text-light" style="font-size: 1.1rem;" title="More Colors & Details"><i class="fas fa-palette m-auto"></i></span>
</span>
</a>
<!------ DETAILS -------------->
<div id="palette" class="collapse"><p>
<!------------------------------
Add or remove extra sections where needed:
<div class="col-3 col-sm-2 d-flex" style="background-color: #000000;">
<p class="m-auto" style="font-family: monospace; color: white;">#000000</p>
</div><div class="card bg-faded col-9 col-sm-10 p-2" style="border-radius: 0; border-top: 0; border-left: 0; border-right: 0;">
<p>PLACEMENT</p>
</div>
Alternate code for added note on far right:
<div class="col-3 col-sm-2 d-flex" style="background-color: #000000;">
<p class="m-auto" style="font-family: monospace; color: white;">#000000</p>
</div><div class="card bg-faded col-6 col-sm-8 p-2" style="border-radius: 0; border-top: 0; border-left: 0; border-right: 0;">
<p>PLACEMENT</p>
</div><div class="card bg-faded col-3 col-sm-2 p-2" style="border-radius: 0; border-top: 0; border-left: 0; border-right: 0;">
<p class="text-right"><i>NOTE</i></p>
</div>
The "color: white/black;" in the second line should be changed depending on how dark/light your color is! If you can't see the text, try swapping it for the other color. You can also input custom font colors using hex codes if you want.
------------------------------->
<!---- MAIN SECTION ----------->
<div class="card bg-faded modal-open mb-2" style="border-radius: 0; border: 0;"><div class="row no-gutters">
<div class="col-3 col-sm-2 d-flex" style="background-color: #000000;">
<p class="m-auto" style="font-family: monospace; color: white;">#000000</p>
</div><div class="card bg-faded col-9 col-sm-10 p-2" style="border: 0;">
<p>PLACEMENT</p>
</div>
<div class="col-3 col-sm-2 d-flex" style="background-color: #000000;">
<p class="m-auto" style="font-family: monospace; color: white;">#000000</p>
</div><div class="card bg-faded col-9 col-sm-10 p-2" style="border: 0;">
<p>PLACEMENT</p>
</div>
<div class="col-3 col-sm-2 d-flex" style="background-color: #000000;">
<p class="m-auto" style="font-family: monospace; color: white;">#000000</p>
</div><div class="card bg-faded col-9 col-sm-10 p-2" style="border: 0;">
<p>PLACEMENT</p>
</div>
<div class="col-3 col-sm-2 d-flex" style="background-color: #000000;">
<p class="m-auto" style="font-family: monospace; color: white;">#000000</p>
</div><div class="card bg-faded col-9 col-sm-10 p-2" style="border: 0;">
<p>PLACEMENT</p>
</div>
<div class="col-3 col-sm-2 d-flex" style="background-color: #000000;">
<p class="m-auto" style="font-family: monospace; color: white;">#000000</p>
</div><div class="card bg-faded col-9 col-sm-10 p-2" style="border: 0;">
<p>PLACEMENT</p>
</div>
<div class="col-3 col-sm-2 d-flex" style="background-color: #000000;">
<p class="m-auto" style="font-family: monospace; color: white;">#000000</p>
</div><div class="card bg-faded col-9 col-sm-10 p-2" style="border: 0;">
<p>PLACEMENT</p>
</div>
<!-- ADD MORE ABOVE ^^ ------>
<div class="col-3 col-sm-2 d-flex" style="background-color: #000000;">
<p class="m-auto" style="font-family: monospace; color: white;">#000000</p>
</div><div class="card bg-faded col-9 col-sm-10 p-2" style="border: 0;">
<p>PLACEMENT</p>
</div>
</div></div>
<!---- EXTRA SECTION ---------->
<div class="card bg-faded modal-open mb-2" style="border-radius: 0; border: 0;"><div class="row no-gutters">
<div class="card text-center bg-secondary text-light col-12 p-2" style="border-radius: 0; border: 0;">
<p><b>HEADER</b></p>
</div>
<div class="col-3 col-sm-2 d-flex" style="background-color: #000000;">
<p class="m-auto" style="font-family: monospace; color: white;">#000000</p>
</div><div class="card bg-faded col-6 col-sm-8 p-2" style="border: 0;">
<p>PLACEMENT</p>
</div><div class="card bg-faded col-3 col-sm-2 p-2" style="border: 0;">
<p class="text-right"><i>NOTE</i></p>
</div>
<div class="col-3 col-sm-2 d-flex" style="background-color: #000000;">
<p class="m-auto" style="font-family: monospace; color: white;">#000000</p>
</div><div class="card bg-faded col-6 col-sm-8 p-2" style="border: 0;">
<p>PLACEMENT</p>
</div><div class="card bg-faded col-3 col-sm-2 p-2" style="border: 0;">
<p class="text-right"><i>NOTE</i></p>
</div>
<div class="col-3 col-sm-2 d-flex" style="background-color: #000000;">
<p class="m-auto" style="font-family: monospace; color: white;">#000000</p>
</div><div class="card bg-faded col-9 col-sm-10 p-2" style="border: 0;">
<p>PLACEMENT</p>
</div>
<div class="col-3 col-sm-2 d-flex" style="background-color: #000000;">
<p class="m-auto" style="font-family: monospace; color: white;">#000000</p>
</div><div class="card bg-faded col-9 col-sm-10 p-2" style="border: 0;">
<p>PLACEMENT</p>
</div>
<!-- ADD MORE ABOVE ^^ ------>
<div class="col-3 col-sm-2 d-flex" style="background-color: #000000;">
<p class="m-auto" style="font-family: monospace; color: white;">#000000</p>
</div><div class="card bg-faded col-9 col-sm-10 p-2" style="border: 0;">
<p>PLACEMENT</p>
</div>
</div></div>
<!------ CREDIT - DON'T DELETE -->
<div class="row"><div class="col-12 d-flex">
<div class="card bg-faded w-100 my-auto border-top-0" style="height:1px;"></div>
<a href="/7975467.-f2u-html-expanding-palette" class="text-muted px-2 tooltipster" title="F2U HTML by StormyStarlight" data-placement="bottom" style="font-size: small;"><i class="fal fa-code"></i></a>
<div class="card bg-faded w-100 my-auto border-top-0" style="height:1px;"></div>
</div></div>
<!----------------------------->
</p></div>
This user is not visible to guests.
do you mean the "header" and "" sections? the parts of the code that control the colors of those are "bg-secondary" and "text-light", you can change the "secondary" and "light" parts to primary, secondary, success, danger, warning, info, light, dark, white, or muted (this one only works with the text). though i suggest testing them on the different themes, since some of them look good in some and not-so-great in others. ^^
[F2U HTML] Expanding Palette's Comments