🥓's profile picture

Published by

published
updated

Category: Web, HTML, Tech

View Blog

View Profile

Report Blog Entry

How to change sections text (About me/TV/Movies/Heros etc)

A massive thanks to Celestarella for the help. If your new/unsure I'll explain some parts as I'm noob when it comes to HTML and CSS. This will be pasted in the "about me" section. Grab the code from here


What I personally did was I had a version of my old layout/profile loaded in one tab and then another tab open and would refresh to see what changes if your editing/experimenting. 

I'd change things and I had no idea where the change was happening, so feel free to work like this. If you need to copy and paste code and save it somewhere I highly recommend using Notepad++ and not normal notepad as it can sometimes break things such as if you have any little emoji codes. 

Where it says "Topic" You place any word you would like to have, I'm sorry I can't explain everything as I don't know enough to fully explain the code, just the easier stuff.
<style>


    :root {
    --topic1: "TOPIC2"; (about me)
    --topic2: "TOPIC2"; (music)
    --topic3: "TOPIC3"; (movies)
    --topic4: "TOPIC4"; (tv)
    --topic5: "TOPIC5"; (books)
    --topic6: "TOPIC6"; (heros)

    --myactions: "CONTACT TITLE"; (In my case, mine use to just have a "start button" bottom left, so it may be different depending what layout you are using)
    --mytopics: "INTERESTS TITLE"; (What is written above the 
    --mylinks: "LINKS TITLE"; (where your social links appear, the text above it)

}

.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:#000000 !important; (this is where you change the colour of the text) you can use either hex code to get the colour you want or as I have done, used the simple word.
  letter-spacing:normal !important;
   text-shadow: 0px px black !important; (this code disables any shadow but change the 0 values to turn it back on)
   filter: brightness(95%) !important; (can might it brighter or duller)
}
.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);
}
.table-section:not(:last-child) .details-table tr:nth-child(7) td:first-child p::after{
  content: var(--topic7);
}

.w-40 .table-section:last-child .heading::after{
  content: var(--mylinks);}


.w-40 .table-section:nth-last-child(2) .heading::after{
  content: var(--mytopics);
}

.w-40 .contact .heading::after{
  content: var(--myactions);
}

    .w-40 .table-section:last-child .heading h4{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.w-40 .table-section:nth-last-child(2) .heading h4{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}


.w-40 .contact .heading h4{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

</style>

EDIT:

If you only want to edit the about me section and not change m links/interests and contact section use this code.


:root {
  --topic1: "😎 About Me";
  --topic2: "🎵 Tunes ";
  --topic3: "🎬 Movies";
  --topic4: "📺 TV";
  --topic5: "📚 Books/Comics";
  --topic6: "🎮 Video Games";
}
 
.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:blue !important; (this is where you change the colour of the text) you can use either hex code to get the colour you want or as I have done, used the simple word.
  letter-spacing:normal !important;
   text-shadow: 0px px 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);
}
.table-section:not(:last-child) .details-table tr:nth-child(7) td:first-child p::after{
  content: var(--topic7);
}
</style></div>


22 Kudos

Comments

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

Xenon Chameleon

Xenon Chameleon's profile picture

Thanks, I was wondering if we could change those or not.


Report Comment



No problem at all :)

by 🥓; ; Report

Yates5

Yates5's profile picture

This is a great post. I like this topic. I found many interesting things from this site. Thanks for posting this again
.


Report Comment



No worries, I didn't come up with the code myself, but thought some people might find it handy so posted about it :)

by 🥓; ; Report

This is a great post. I like this topic. I found many interesting things from this site. Thanks for posting this again.


https://www.dgcustomerfirst.ltd/

by Yates5; ; Report