Post by Angel || Cora || Rose on Aug 8, 2020 9:24:33 GMT
I got a message about how I made Tank's bio, I decided to make a thread explaining some of the code and how you can add a little more spice to your bio.
If I remember it correctly, I was searching on how tables worked and if they could be more customisable. I instead stumbled upon a string of DIV code. I tested it out but it never worked so I had to change the coding until the code did what I wanted it to do.
If you want examples of what you can do with this kind of code, have a look at some of my bio's
Tank: packoftheintrepidus.boards.net/thread/1437/tank-rejected-leader
Rose: packoftheintrepidus.boards.net/thread/1514/rose-everard-vivas
Akita: packoftheintrepidus.boards.net/thread/1462/akita-instigator
If I remember it correctly, I was searching on how tables worked and if they could be more customisable. I instead stumbled upon a string of DIV code. I tested it out but it never worked so I had to change the coding until the code did what I wanted it to do.
If you want examples of what you can do with this kind of code, have a look at some of my bio's
Tank: packoftheintrepidus.boards.net/thread/1437/tank-rejected-leader
Rose: packoftheintrepidus.boards.net/thread/1514/rose-everard-vivas
Akita: packoftheintrepidus.boards.net/thread/1462/akita-instigator
BACKGROUND IMAGE
For images as background, you need a link to your image, you can use an image hosting website such as postimg
Example: [div style="background:url(https://i.postimg.cc/NMCWQdKB/Bio4.png), url(https://i.postimg.cc/NMCWQdKB/Bio4.png);"]
Template: [div style="background:url(linkgoeshere), url(linkgoeshere);"]You need a div at the end of your bio to close it off so that everything else remains inside the image.
[/div]The code put together
[div style="background:url(https://i.postimg.cc/NMCWQdKB/Bio4.png), url(https://i.postimg.cc/NMCWQdKB/Bio4.png);"]
Text
Goes
Here
a
a
a
[/div]How it looks like
Text
Goes
Here
a
a
a
FRAMES
As for the framework in the image, you can use code like this for a single frame
Example: [div style="width:580px;background-color:rgb(0, 0, 0, 0.6);padding:8px;"]
Explained Template: [div style="width:WidthOfTheFrame;background-color:rgb(ColorCode, Transparancy);padding:8px;"]I'll put different vatiations of this type of framework here
- Transparancy and Width (1= visible, 0= invisible)
[div style="width:570px;background-color:rgb(0, 0, 0, 0.3);padding:8px;"]More text[/div]
[div style="width:480px;background-color:rgb(0, 0, 0, 0.6);padding:8px;"]More text[/div]
[div style="width:240px;background-color:rgb(0, 0, 0, 1);padding:8px;"]More text[/div]How it looks:
More text
More text
More text
- Different Colors (you can use something like this to pick the color you want)
[div style="width:500px;background-color:rgb(135, 62, 199, 1);padding:8px;"]More text[/div]
[div style="width:500px;background-color:rgb(140, 218, 223, 1);padding:8px;"]More text[/div]
[div style="width:500px;background-color:rgb(90, 125, 88, 1);padding:8px;"]More text[/div]How it looks:
More text
More text
More text
- Padding Padding generates space around an element's content(like text), inside of any defined borders(inside the div frame)
[div style="width:500px;background-color:rgb(0, 0, 0, 1);padding:1px;"]More text[/div]
[div style="width:500px;background-color:rgb(0, 0, 0, 1);padding:5px;"]More text[/div]
[div style="width:500px;background-color:rgb(0, 0, 0, 1);padding:15px;"]More text[/div]How it looks:
More text
More text
More text
- Round the corners (border-radius:amountpx;)
[div style="width:530px;background-color:rgb(0, 0, 0, 1);padding:8px;border-radius:2px;"]Text[/div]
[div style="width:530px;background-color:rgb(0, 0, 0, 1);padding:8px;border-radius:8px;"]Text[/div]
[div style="width:530px;background-color:rgb(0, 0, 0, 1);padding:8px;border-radius:24px;"]Text[/div]How it looks:
Text
Text
Text
- Frames in frames
[div style="width:530px;background-color:rgb(0, 0, 0, 0.2);padding:8px;"]Text
Words
[div style="width:490px;background-color:rgb(0, 0, 0, 0.4);padding:8px;"]More text
even more words
[div style="width:460px;background-color:rgb(0, 0, 0, 0.6);padding:8px;"]Too much text
too many words
[/div][/div][/div]How it looks:
Text
Words
Words
More text
even more words
even more words
Too much text
too many words
too many words
COMBINED
Alright, now lets put some of the code together
How it looks:
So that works, now we'll put even more in there. While we're at it, let's center the frames.
How it looks:
[div style="background:url(https://i.postimg.cc/NMCWQdKB/Bio4.png), url(https://i.postimg.cc/NMCWQdKB/Bio4.png);"]
[div style="width:540px;background-color:rgb(0, 0, 0, 0.6);padding:8px;"]Title[/div][div style="width:540px;background-color:rgb(0, 0, 0, 0.3);padding:8px;"]Text[/div][/div]How it looks:
Title
Text
So that works, now we'll put even more in there. While we're at it, let's center the frames.
[div style="background:url(https://i.postimg.cc/NMCWQdKB/Bio4.png), url(https://i.postimg.cc/NMCWQdKB/Bio4.png);"]
[div align="center"][div style="width:540px;background-color:rgb(0, 0, 0, 0.6);padding:8px;"]Title[/div][div style="width:540px;background-color:rgb(0, 0, 0, 0.3);padding:8px;"]Text[/div]
[div style="width:550px;background-color:rgb(0, 0, 0, 0.6);padding:8px;"]Title[/div][div style="width:550px;background-color:rgb(0, 0, 0, 0.3);padding:8px;"]Text or other
[div style="width:520px;background-color:rgb(0, 0, 0, 0.5);padding:8px;border-radius:8px;"]Title
[div style="width:480px;background-color:rgb(0, 0, 0, 0.3);padding:8px;border-radius:8px;"]Text
Words[/div]
[div style="width:480px;background-color:rgb(0, 0, 0, 0.3);padding:8px;border-radius:8px;"]Text
Words[/div]
[div style="width:480px;background-color:rgb(0, 0, 0, 0.3);padding:8px;border-radius:8px;"]Text
Words[/div][/div][/div][/div]
[/div]How it looks:
Title
Text
Title
Text or other
Title
Text
Words
Words
Text
Words
Words
Text
Words
Words
FINAL PRODUCT
The only thing left is to add text, possibly gifs or images to make things more interesting. Font size, font face, font color and things such as that can also be added to give your bio a more complete feeling.
How it looks:
[div style="background:url(https://i.postimg.cc/NMCWQdKB/Bio4.png), url(https://i.postimg.cc/NMCWQdKB/Bio4.png);"]
[div align="center"][div style="width:580px;background-color:rgb(0, 0, 0, 0.6);padding:8px;"][font face="impact" size="6"]"I feel as if something is missing"[/font][/div][/div][div align="center"][div style="width:580px;background-color:rgb(0, 0, 0, 0.3);padding:8px;"][img alt=" " src="https://media.discordapp.net/attachments/539381493932228608/612737212613918730/TankGif.gif" style="max-width:100%;"][/div][/div]
[div align="center"][div style="width:580px;background-color:rgb(0, 0, 0, 0.6);padding:8px;"][font size="6" face="impact"]Interactions[/font][/div][/div][div align="center"][div style="width:580px;background-color:rgb(0, 0, 0, 0.3);padding:8px;"]
[div style="width:530px;background-color:rgb(0, 0, 0, 0.5);padding:8px;border-radius:8px;"][font size="4" face="impact"]Nomang[/font]
[font size="2"][font face="courier new"]:[font color="00408a"]Respects[/font] : [font color="00c40f"]Accepts[/font] : [font color="976d00"]Annoyed[/font] : [font color="ffe000"]Befriended[/font] : [font color="000000"]Confused about[/font]:
[div style="width:490px;background-color:rgb(0, 0, 0, 0.3);padding:8px;border-radius:8px;"][font size="3"]- Interactions -[/font]
[spoiler][font color="bbbbbb"]Tank won't forget the poppy seed drugging. He feels disturbed and will try to stay away from physical touch.
He respects you to some degree since you helped him.
Tank felt somewhat guilty by telling others about the drugging.
He felt uncomfortable with you going to him for warmth
The male wonders where you are.
Tank is relieved to have found you alive but he does not trust the canines around you, he also noticed a change in your behavior.
He is worried about you[/font][/spoiler]---
The male didn't protest when you laid on top of him.[/div]
[div style="width:490px;background-color:rgb(0, 0, 0, 0.3);padding:8px;border-radius:8px;"][font size="3"]- Thoughts -[/font]
[spoiler][font color="bbbbbb"]Why would you help a wolf who is capable of killing you?
I don't trust your medical experience at all, especially after that drugging.
KARMA!
Don't get so close to me
You have a lot to learn.
Where did you head off to?
Cmon, where did you go?
Jezus, you're not dead after all. Although you seem to struggle with something.[/font][/spoiler]---
Your last whisper... did I hear that right or was it my imagination?[/div]
[div style="width:490px;background-color:rgb(0, 0, 0, 0.3);padding:8px;border-radius:8px;"][font size="3"]- Quotes -[/font]
[spoiler][font color="bbbbbb"]"Doesn't your pack know to not let lone members out?"
"Careful with those types of movements."
"You having some trouble?"
"I'm not one for games"
"Where were you?"
"What caused you to leave?"
"Arguments happen, no matter how kind someone acts, everyone has their own issues. Even with all that, a pack should stay together to remain strong and work through those issues."
"You're obviously not okay-"[/font][/spoiler]---
"...Understood."[/div][/font][/font][/div]
[/div][/div]
[/div]How it looks:
"I feel as if something is missing"
Interactions
Nomang
:Respects : Accepts : Annoyed : Befriended : Confused about:
:Respects : Accepts : Annoyed : Befriended : Confused about:
- Interactions -
The male didn't protest when you laid on top of him.
Tank won't forget the poppy seed drugging. He feels disturbed and will try to stay away from physical touch.
He respects you to some degree since you helped him.
Tank felt somewhat guilty by telling others about the drugging.
He felt uncomfortable with you going to him for warmth
The male wonders where you are.
Tank is relieved to have found you alive but he does not trust the canines around you, he also noticed a change in your behavior.
He is worried about you
---He respects you to some degree since you helped him.
Tank felt somewhat guilty by telling others about the drugging.
He felt uncomfortable with you going to him for warmth
The male wonders where you are.
Tank is relieved to have found you alive but he does not trust the canines around you, he also noticed a change in your behavior.
He is worried about you
The male didn't protest when you laid on top of him.
- Thoughts -
Your last whisper... did I hear that right or was it my imagination?
Why would you help a wolf who is capable of killing you?
I don't trust your medical experience at all, especially after that drugging.
KARMA!
Don't get so close to me
You have a lot to learn.
Where did you head off to?
Cmon, where did you go?
Jezus, you're not dead after all. Although you seem to struggle with something.
---I don't trust your medical experience at all, especially after that drugging.
KARMA!
Don't get so close to me
You have a lot to learn.
Where did you head off to?
Cmon, where did you go?
Jezus, you're not dead after all. Although you seem to struggle with something.
Your last whisper... did I hear that right or was it my imagination?
- Quotes -
"...Understood."
"Doesn't your pack know to not let lone members out?"
"Careful with those types of movements."
"You having some trouble?"
"I'm not one for games"
"Where were you?"
"What caused you to leave?"
"Arguments happen, no matter how kind someone acts, everyone has their own issues. Even with all that, a pack should stay together to remain strong and work through those issues."
"You're obviously not okay-"
---"Careful with those types of movements."
"You having some trouble?"
"I'm not one for games"
"Where were you?"
"What caused you to leave?"
"Arguments happen, no matter how kind someone acts, everyone has their own issues. Even with all that, a pack should stay together to remain strong and work through those issues."
"You're obviously not okay-"
"...Understood."
The last frames are a bit too wide but I'm too lazy to fix it right now, if you have any questions, ask away
