jennardson's profile picture

Published by

published
updated

Category: Web, HTML, Tech

CODE: CUSTOMIZE INTEREST LABELS

<!--CUSTOMIZE INTEREST LABELS - PLACE IN GENERAL INTERESTS-->
<style>
:root {
    --topic1: "General";  /* EDIT INTEREST LABELS HERE */
    --topic2: "Music";
    --topic3: "Movies & TV";
    --topic4: "Pets";
    --topic5: "Food";
    --topic6: "Hobbies";

 }

.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.details-table tr td:first-child p::after{
   color:var(--links) !important;
   letter-spacing:normal !important;
   text-shadow: 2px 2px darkviolet !important; /* CHANGE COLOR OF INTEREST LABELS HERE */
   filter: brightness(95%) !important;
}

.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{
    content: var(--topic1);
}
.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
    content: var(--topic2);
}
.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
    content: var(--topic3);
}
.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
    content: var(--topic4);
}
.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
    content: var(--topic5);
}
.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
    content: var(--topic6);
}
</style>


216 Kudos

Comments

Displaying 20 of 41 comments ( View all | Add Comment )

Jscorn

Jscorn's profile picture

only the person that owns the page can veiw the changes, its just normal for other people.


Report Comment

cherritea

cherritea's profile picture

using!!


Report Comment

jackson

jackson's profile picture

using !!


Report Comment

sara:3

sara:3's profile picture

using


Report Comment

Zelchixox

Zelchixox's profile picture

using


Report Comment

𝗦tarscream's 𝗚F (WIP)

𝗦tarscream's 𝗚F (WIP)'s profile picture

just what i needed, thanks!!


Report Comment

Rowan

Rowan 's profile picture

Using!!


Report Comment

KANIK!!

KANIK!!'s profile picture

using


Report Comment

cordyceps . canines

cordyceps . canines's profile picture

USING !!


Report Comment

Mevdik

Mevdik's profile picture

Thanks a bunch for this guide! Doubt I would have figured it out on my own.

And for anyone who is bothered by the spaced and reversed original labels appearing to the left of the table when you select the text, I tinkered a for bit and found you can add "user-select: none;" to the end of this line, like so:

.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px; user-select: none;}

That should solve the issue.


Report Comment

xlncadore

xlncadore's profile picture

thank you soooo much for this!!!! xoxo


Report Comment

Sophie

Sophie's profile picture

if anyone knows how to change the color thingy for the labels plz lmk thatd be awesum..


Report Comment



So, on the third code



(which is this)

.details-table tr td:first-child p::after{
color:var(--links) !important;
letter-spacing:normal !important;
text-shadow: 2px 2px darkviolet !important; /* CHANGE COLOR OF INTEREST LABELS HERE */
filter: brightness(95%) !important;
}



TEXT-SHADOW IT SAYS "darkviolet" REPLACE IT WITH WHITE
(Or ofc anycolor you want!)

by AxelSector; ; Report

THANK YOUUU

by Sophie; ; Report

YWW HOPE UR HAVING A GOOD DAY!

by AxelSector; ; Report

sam

sam's profile picture

usinggg


Report Comment

sleepysweetart

sleepysweetart's profile picture

using!!<33


Report Comment

cyberooski

cyberooski's profile picture

using ^-^


Report Comment

phanroques

phanroques's profile picture

youre a life saver!! will be using this :DD


Report Comment

bohdieeee

bohdieeee's profile picture

using! insanely useful tysm


Report Comment

pyrope

pyrope's profile picture

using !!!!!! XD thank u soooooooooo much !!!!!!!!


Report Comment

momo/marie

momo/marie's profile picture

using :D


Report Comment

Casper

Casper's profile picture

using


Report Comment