tea's profile picture

Published by

published
updated

Category: Web, HTML, Tech

Changing Interest Table Titles [TUTORIAL]

Hello! Here is a quick brief tutorial on how to customize the titles in your interest table located on your profile!


You can put whatever text you want in the sections. If you want to eliminate a category you will simply leave it blank but it will not get rid of the box completely it will still remain there. 
The coding will be listed below
replace the texts listed "name" with the desired title. 

<style>

table, th, td {

  border: 0px solid;

     }

:root {

  --topic1: "name";
  --topic2: "name";
  --topic3: "name";
  --topic4: "name";
  --topic5: "name";
  --topic6: "name";

 }

.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 black !important;
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>


--------------
simply copy and paste this into your "about me" section of your profile! 
Hope this helped, if you have any questions don't be afraid to ask in the comments I am active daily!


74 Kudos

Comments

Displaying 19 of 19 comments ( View all | Add Comment )

Des

Des's profile picture

using!


Report Comment

lay

lay's profile picture

using ^_^


Report Comment

lay

lay's profile picture

using ^_^


Report Comment

monique >:3

monique >:3's profile picture

thank uu for thiss..!! >_<


Report Comment

starrydoll♡

starrydoll♡'s profile picture

usinbgf!


Report Comment

MAGALi ⋆。˚

MAGALi ⋆。˚'s profile picture

hii! is there any way to change the "[USER]'s Interests" title? :p tysm


Report Comment

♱. . ℜ𝔒𝔐𝔄𝔑

♱. . ℜ𝔒𝔐𝔄𝔑's profile picture

this is perfect ^_^ using!


Report Comment

takato

takato's profile picture

aghhh sum1 help mee it saves for me only and looks perfect but fer everyone else it totally doesnt!!!Idk da problem ive tried this on other accs too and it doesnt werk maybe its a problem w my laptop or something?!?!?!?!?!?


Report Comment

Pub/PubCutz ⚧

Pub/PubCutz ⚧'s profile picture

Thanks for this! Using!


Report Comment

mayvie

mayvie's profile picture

YAY THANK U SM ive been trying to get this to work 4everrr and it finally worked!!!!!!!!!!!11


Report Comment

✶ Nocturne / Diggory

✶ Nocturne / Diggory's profile picture

hi!! is there any way to change the color of the text without it doubling up? i've tried replacing the "var(--links)" with just red so it fits the rest of my layout, but it just doubles the text so there's one set of red and one set of white xp if not thats totally okay!! i'm using this either way i just thought i'd ask lol :3


Report Comment

MetalHeart

MetalHeart's profile picture

how do i make the text white? :(


Report Comment



replace the var(--links) thing with any hex code, worked for me ^_^

by MAL!!; ; Report

oh okay thank you! ^^

by MetalHeart; ; Report

★em★

★em★'s profile picture

THANK YOU SO MUCH!! i'm completely hopeless and new at html code, so trying to figure this out has been killing me for hours!! would you mind showing me how to change the text colour from black? thanks so much, you're a lifesaver! :33


Report Comment



you can change it by replacing the 'var(--links)' in 'color:var(--links) !important;' to the hex code or color name of your choice ^.^

by nevada; ; Report

thank you sm!! :3

by ★em★; ; Report

smallxsanctuary

smallxsanctuary's profile picture

for some reason this wont work for me anymore


Report Comment

lupi !!! (boost)

lupi !!! (boost)'s profile picture

You actually saved my sanity omg thank you


Report Comment

nyaKona

nyaKona's profile picture

you can also use a zero width space so the titles dont say anything
https://zerowidthspace.me/


Report Comment

boyliker

boyliker's profile picture

not sure if its bc im on mobile, but im using this and it just hides the titles 3:


Report Comment



try this! make sure you delete the other one so theres no duplicates


table, th, td {

border: 0px solid;

}

:root {

--topic1: "CHANGE NAME";
--topic2: "CHANGE NAME";
--topic3: "CHANGE NAME";
--topic4: "CHANGE NAME";
--topic5: "CHANGE NAME";
--topic6: "CHANGE NAME";

}

.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 white !important;
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);
}

by Faoladh; ; Report

make sure you add the < style> and < / style> before and after (without spaces) :)

by Faoladh; ; Report

it didnt work it just made the color white. (GUYS DONT USE IT!!)

by 〔tranquility1000 ♡‧₊˚〕 ★; ; Report

Xeno

Xeno's profile picture

Thank u so much for this! I was struggling w this so much last night lol but this is a godsend, thank u!


Report Comment

🍒 𝔸𝕟𝕕𝕚 🍒

🍒 𝔸𝕟𝕕𝕚 🍒 's profile picture

Hi! Thanks for providing the code. How can I remove the old categories so its not showing double text?


Report Comment



^^ plzz its driving me insane

by SYST3M_3RR0RR; ; Report

hey! I had the same problem, i worked on it a little bit and mine works now (hope yours do too)
(make sure to add the < style> and < / style> before and after (without spaces)

table, th, td {

border: 0px solid;

}

:root {

--topic1: "Change name";
--topic2: "Change name";
--topic3: "Change name";
--topic4: "Change name";
--topic5: "Change name";
--topic6: "Change name";

}

.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 white !important;
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);
}

by Faoladh; ; Report