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!


96 Kudos

Comments

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

adrian

adrian's profile picture

using, thanks!


Report Comment

~Soul~

~Soul~'s profile picture

I already have a layout set up and Im struggling. I cant figure out where in my layout coding to put it so it works. I tried putting it at the top then at the bottom and it either erases the words or leaves it as the default words.

I can show the code Im using for my layout if it'll help 0.0


Report Comment



After some fiddling around I figured it out! :D

by ~Soul~; ; Report

HOWWWW????

by 🍦 ;; ANNE .; ; Report

maxie

maxie's profile picture

using ty


Report Comment

gelly

gelly's profile picture

thank you. This was so helpful for my sanity (I'm a control freak).


Report Comment

Nightshade

Nightshade's profile picture

Thanks! Wanted to change "Heros" to "Games" :3


Report Comment

🩸KARKAT🩸

🩸KARKAT🩸's profile picture

THANK YOU FOR YOUR SERVICE o7


Report Comment

Міша/misha

Міша/misha's profile picture

THANK U OMGGGG


Report Comment

Emmmm

Emmmm's profile picture

USING TYSM


Report 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

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



yes, i also want to know this

by benny; ; Report

♱. . ℜ𝔒𝔐𝔄𝔑

♱. . ℜ𝔒𝔐𝔄𝔑'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