Tracker Template & Tutorial

Admin Morgan
Admin Morgan Avatar
staff
8,041 posts
26 years old
Administrator
played by Morgan
"Life ain't all blueberries and paper airplanes, you know what I mean."
options

Post by Admin Morgan on Apr 5, 2019 0:29:01 GMT -5

[attr="class","box1"]
first
middle
last


☐ in progress: 0
☑ finished: 0
☒ dead: 0





[newclass=.box1]width:125px;height:275px;text-align:justify;border:2px solid #424242;padding:3px;font-family:Roboto Condensed;[/newclass]
[newclass=.box2]margin:0px auto; width:300px; height:275px; border:2px solid #424242; overflow:auto;padding:3px;font-family:Roboto Condensed;[/newclass]
[newclass=.box2::-webkit-scrollbar]width:5px;[/newclass]
[newclass=.box2::-webkit-scrollbar-thumb]background:#732E3E;[/newclass]
Admin Morgan
Admin Morgan Avatar
staff
8,041 posts
26 years old
Administrator
played by Morgan
"Life ain't all blueberries and paper airplanes, you know what I mean."
options

Post by Admin Morgan on Apr 5, 2019 0:35:20 GMT -5

TRACKER TUTORIAL

  1. I hope that these trackers are relatively straigthforward, but I'm still going to post a quick little tutorial on how to use them. So you just copy the code this whole code into your new thread to get your tracker:

    [div align="center"][table][tbody]
    [tr]
    [td style="border: 5px solid #424242; padding: 3px;"][div][attr="class","box1"][div style="text-align:left;line-height:17px;font-family:Courgette;height:50px;border-left-width:5px;border-left-style:solid;border-left-color:#732E3E;padding:5px;"]first
    middle
    last[/div]
    [div align="center"][img alt=" " style="max-width:100%;border:5px double #424242;" src="http://placehold.it/100x100"][/div]
    [div style="text-align:center;font-family:Roboto Condensed;font-size:10;padding:2px;"]☐ in progress: 0
    ☑ finished: 0
    ☒ dead: 0
    [a href="http://adoxographyv2.boards.net/user/6"]✿[/a][/td][td style="border: 5px solid #424242; padding: 3px;"][div][attr="class","box2"]☐ [a href=""]This is an active thread[/a][ul]xx/xx/xxxx, time of day
    @person and @person
    Place a description here if you want to. I would suggest putting threads in chronological order for your character, to make it like a timeline. Make sure you put the correct icon next to your thread to note if it is an active, finished, or incomplete thread.[/ul]
    ☑ [a href=""]This is a finished thread[/a][ul] xx/xx/xxxx, time of day
    @person and @person
    Place a description here if you want to. I would suggest putting threads in chronological order for your character, to make it like a timeline. Make sure you put the correct icon next to your thread to note if it is an active, finished, or incomplete thread.[/ul]
    ☒ [a href=""]This is an incomplete/archived thread[/a][ul] xx/xx/xxxx, time of day
    @person and @person
    Place a description here if you want to. I would suggest putting threads in chronological order for your character, to make it like a timeline. Make sure you put the correct icon next to your thread to note if it is an active, finished, or incomplete thread.[/ul][/div][/td][/tr][/tbody][/table][/div]




    [newclass=.box1]width:125px;height:275px;text-align:justify;border:2px solid #424242;padding:3px;font-family:Roboto Condensed;[/newclass]
    [newclass=.box2]margin:0px auto; width:300px; height:275px; border:2px solid #424242; overflow:auto;padding:3px;font-family:Roboto Condensed;[/newclass]
    [newclass=.box2::-webkit-scrollbar]width:5px;[/newclass]
    [newclass=.box2::-webkit-scrollbar-thumb]background:#732E3E;[/newclass]
  2. That is the entire code. If you are giving each character their own post, you will need that full code above! If you are putting every character onto the same post, then read ahead! Now you see the part at the bottom of the code that has the 'newclass' section? You only need this one time, at the bottom of your thread. When you are adding characters to your tracker, you only need this part of the code:

    [div align="center"][table][tbody]
    [tr]
    [td style="border: 5px solid #424242; padding: 3px;"][div][attr="class","box1"][div style="text-align:left;line-height:17px;font-family:Courgette;height:50px;border-left-width:5px;border-left-style:solid;border-left-color:#732E3E;padding:5px;"]first
    middle
    last[/div]
    [div align="center"][img alt=" " style="max-width:100%;border:5px double #424242;" src="http://placehold.it/100x100"][/div]
    [div style="text-align:center;font-family:Roboto Condensed;font-size:10;padding:2px;"]☐ in progress: 0
    ☑ finished: 0
    ☒ dead: 0
    [a href="http://adoxographyv2.boards.net/user/6"]✿[/a][/td][td style="border: 5px solid #424242; padding: 3px;"][div][attr="class","box2"]☐ [a href=""]This is an active thread[/a][ul]xx/xx/xxxx, time of day
    @person and @person
    Place a description here if you want to. I would suggest putting threads in chronological order for your character, to make it like a timeline. Make sure you put the correct icon next to your thread to note if it is an active, finished, or incomplete thread.[/ul]
    ☑ [a href=""]This is a finished thread[/a][ul] xx/xx/xxxx, time of day
    @person and @person
    Place a description here if you want to. I would suggest putting threads in chronological order for your character, to make it like a timeline. Make sure you put the correct icon next to your thread to note if it is an active, finished, or incomplete thread.[/ul]
    ☒ [a href=""]This is an incomplete/archived thread[/a][ul] xx/xx/xxxx, time of day
    @person and @person
    Place a description here if you want to. I would suggest putting threads in chronological order for your character, to make it like a timeline. Make sure you put the correct icon next to your thread to note if it is an active, finished, or incomplete thread.[/ul][/div][/td][/tr][/tbody][/table][/div]


Good? Good.

Other bits and bobs of note:
  • I believe you all know that to change out the image, you replace the 'http://placehold.it/100x100' with your own image url! Feel free to use gifs or still images!
  • For the sake of ease, I have kept names simple. However, feel free to color your character's name with their group color if you want! Hex codes are still available on the information code if you would like to change the color of their names!
  • To add a thread, make sure you are copying the whole part for threads. That will just be:

    ☐ [a href=""]This is an active thread[/a][ul]xx/xx/xxxx, time of day
    @person and @person
    Place a description here if you want to. I would suggest putting threads in chronological order for your character, to make it like a timeline. Make sure you put the correct icon next to your thread to note if it is an active, finished, or incomplete thread.[/ul]


    Of course making sure that you are using the right little image! The empty square is an active thread, a square with a check mark is a completed thread, and a square with an X in it is a thread that was archived uncompleted.

You are making one tracker per member and putting all of your characters onto it! You can choose if you want to do it all in one post, or if you want to give them all their own separate tracker post within the same thread! Aesthetically, I think giving them all their own post will look better, but the choice is yours!

And finally -- if you have open threads that never got replied to, or maybe an open or a thread with a deleted character/member that never made it past the first couple of posts, it's totally fine to not put them or to act like they didn't happen. Definitely don't feel like you have to put archived threads that never got replied to / never went anywhere!

I believe that's it, really! If there is anything else about the code you find confusing, please just let me know!