Davy's profile picture

Published by

published
updated

Category: Web, HTML, Tech

Customize interests titles

You can do this with CSS pretty easily. If you look at the HTML you'll see the interests table is selectable using .profile > div > :nth-last-child(2) since it's the second to last child element from the bottom (links are the last). Then you can select which row of the table you want to alter to change a specific title.

To change the text, just hide the <p> element in the first column and use the ::atfer pseudo-element to insert content. As an example, this will change "Television" (row 4) to "Shows" and "Books" (row 5) to "Games".


.profile > div > :nth-last-child(2) tr:nth-child(4) td:nth-child(1) p {
    display: none;
}

.profile > div > :nth-last-child(2) tr:nth-child(4) td:nth-child(1)::after {
    content: 'Shows';
}

.profile > div > :nth-last-child(2) tr:nth-child(5) td:nth-child(1) p {
    display: none;
}

.profile > div > :nth-last-child(2) tr:nth-child(5) td:nth-child(1)::after {
    content: 'Games';
}


And if you want to hide a row entirely, just set that row to display:none. This will hide Heroes (row 6)


.profile > div > :nth-last-child(2) tr:nth-child(6) {
    display: none;
}


7 Kudos

Comments

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