killthecake | [33] TCG Not-A-Table Template

yes, you read that right

Player

name • lorem ipsum
joined • 00/00/00
cards • 0000
level • lorem ipsum

Mastered ► #

none

Collecting ► #

deck • 00/00
none
none
none
none

Future ► #

none

Trading ► ##

none

Currency ► #

none

Sketchpads ► #

none

Portfolios ► #

none

Pending ► #

none

Signatures ► #

none

Log

GAIN; 00/00/00; • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum felis. Donec feugiat laoreet dui, quis pellentesque nisi porttitor tincidunt. Phasellus tempus a nulla pretium vestibulum. Cras tincidunt sem ligula, eu mollis mauris volutpat eu.

TRADE; 00/00/00; • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum felis. Donec feugiat laoreet dui, quis pellentesque nisi porttitor tincidunt. Phasellus tempus a nulla pretium vestibulum. Cras tincidunt sem ligula, eu mollis mauris volutpat eu.

LOSE; 00/00/00; • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum felis. Donec feugiat laoreet dui, quis pellentesque nisi porttitor tincidunt. Phasellus tempus a nulla pretium vestibulum. Cras tincidunt sem ligula, eu mollis mauris volutpat eu.

site

credit

another live preview!

Code:

<div style="background: #b1eef0;border-left: 20px solid #104345;text-align:left;padding: 5px;color: #104345;margin-bottom: 20px;height:110px;">
<div style="background:#104345;margin:-5px;margin-bottom: 5px;color:#b1eef0;padding-left: 5px;font-weight:bold;font-size: 25px;">Player</div>

<div style="background: url(BANNER_URL);width: 111px;height: 75px;float:right;"></div>

<b>name</b> • lorem ipsum<br />
<b>joined</b> • 00/00/00<br />
<b>cards</b> • 0000<br />
<b>level</b> • lorem ipsum<br />

</div>

<div style="background: #b1eef0;border-left: 20px solid #104345;text-align:left;padding: 5px;color: #104345;margin-bottom: 20px;">
<div style="background:#104345;margin:-5px;margin-bottom: 5px;color:#b1eef0;padding-left: 5px;font-weight:bold;font-size: 25px;">Mastered ► #</div>
<i>none</i>
</div>

<div style="background: #b1eef0;border-left: 20px solid #104345;text-align:left;padding: 5px;color: #104345;margin-bottom: 20px;">
<div style="background:#104345;margin:-5px;margin-bottom: 5px;color:#b1eef0;padding-left: 5px;font-weight:bold;font-size: 25px;">Collecting ► #</div>

<div style="width: 280px;display:inline-block;text-align:center;">
<span style="font-weight:bold;font-size:25px;">
deck • 00/00
</span>
<br />

</div>

<div style="width: 280px;display:inline-block;text-align:center;">
<span style="font-weight:bold;font-size:25px;">
deck • 00/00
</span>
<br />

</div>

<div style="width: 280px;display:inline-block;text-align:center;">
<span style="font-weight:bold;font-size:25px;">
deck • 00/00
</span>
<br />

</div>

<div style="width: 280px;display:inline-block;text-align:center;">
<span style="font-weight:bold;font-size:25px;">
deck • 00/00
</span>
<br />

</div>

<div style="background: #b1eef0;border-left: 20px solid #104345;text-align:left;padding: 5px;color: #104345;margin-bottom: 20px;">
<div style="background:#104345;margin:-5px;margin-bottom: 5px;color:#b1eef0;padding-left: 5px;font-weight:bold;font-size: 25px;">Future ► #</div>
<center>

</center>
</div>

<div style="background: #b1eef0;border-left: 20px solid #104345;text-align:left;padding: 5px;color: #104345;margin-bottom: 20px;">
<div style="background:#104345;margin:-5px;margin-bottom: 5px;color:#b1eef0;padding-left: 5px;font-weight:bold;font-size: 25px;">Trading ► ##</div>
<center>

</center>
</div>

<div style="background: #b1eef0;border-left: 20px solid #104345;text-align:left;padding: 5px;color: #104345;margin-bottom: 20px;">
<div style="background:#104345;margin:-5px;margin-bottom: 5px;color:#b1eef0;padding-left: 5px;font-weight:bold;font-size: 25px;">Currency ► #</div><center>
<i>none</i>
</center></div>

<div style="background: #b1eef0;border-left: 20px solid #104345;text-align:left;padding: 5px;color: #104345;margin-bottom: 20px;display:inline-table;width:44%;margin-right:5px;height:115px;">
<div style="background:#104345;margin:-5px;margin-bottom: 5px;color:#b1eef0;padding-left: 5px;font-weight:bold;font-size: 25px;">Sketchpads ► #</div>
<div style="height:200px;overflow-y:auto;">

</div>
</div>

<div style="background: #b1eef0;border-left: 20px solid #104345;text-align:left;padding: 5px;color: #104345;margin-bottom: 20px;display:inline-table;width:44%;height:115px;">
<div style="background:#104345;margin:-5px;margin-bottom: 5px;color:#b1eef0;padding-left: 5px;font-weight:bold;font-size: 25px;">Portfolios ► #</div>
<div style="height:200px;overflow-y:auto;">

</div>
</div>

<div style="background: #b1eef0;border-left: 20px solid #104345;text-align:left;padding: 5px;color: #104345;margin-bottom: 20px;display:inline-table;width:44%;margin-right:5px;height:115px;">
<div style="background:#104345;margin:-5px;margin-bottom: 5px;color:#b1eef0;padding-left: 5px;font-weight:bold;font-size: 25px;">Pending ► #</div>
<div style="height:200px;overflow-y:auto;">

</div>
</div>

<div style="background: #b1eef0;border-left: 20px solid #104345;text-align:left;padding: 5px;color: #104345;margin-bottom: 20px;display:inline-table;width:44%;height:115px;">
<div style="background:#104345;margin:-5px;margin-bottom: 5px;color:#b1eef0;padding-left: 5px;font-weight:bold;font-size: 25px;">Signatures ► #</div>
<div style="height:200px;overflow-y:scroll;">

</div>
</div>

<div style="background: #b1eef0;border-left: 20px solid #104345;text-align:left;padding: 5px;color: #104345;margin-bottom: 20px;">
<div style="background:#104345;margin:-5px;margin-bottom: 5px;color:#b1eef0;padding-left: 5px;font-weight:bold;font-size: 25px;">Log</div>
<div style="height:200px;overflow-y:scroll;">

<b>GAIN; 00/00/00;</b> • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum felis. Donec feugiat laoreet dui, quis pellentesque nisi porttitor tincidunt. Phasellus tempus a nulla pretium vestibulum. Cras tincidunt sem ligula, eu mollis mauris volutpat eu.

<div style="background:#104345; height: 1px; width: 80%;margin: 10px auto;"></div>

<b>TRADE; 00/00/00;</b> • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum felis. Donec feugiat laoreet dui, quis pellentesque nisi porttitor tincidunt. Phasellus tempus a nulla pretium vestibulum. Cras tincidunt sem ligula, eu mollis mauris volutpat eu.

<div style="background:#104345; height: 1px; width: 80%;margin: 10px auto;"></div>

<b>LOSE; 00/00/00;</b> • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae condimentum felis. Donec feugiat laoreet dui, quis pellentesque nisi porttitor tincidunt. Phasellus tempus a nulla pretium vestibulum. Cras tincidunt sem ligula, eu mollis mauris volutpat eu.

<div style="background:#104345; height: 1px; width: 80%;margin: 10px auto;"></div>

</div>
</div>

<div style="width: 45%;display:inline-block;text-align:left;">
<a href="SITE_URL" style="color: #104345;font-weight:bold;text-decoration:none;font-size: 20px;letter-spacing: 2px;">site</a>
</div>
<div style="width: 45%;display:inline-block;text-align:right;">
<a href="https://killthecake.dreamwidth.org/" style="color: #104345;font-weight:bold;text-decoration:none;font-size: 20px;letter-spacing: 2px;">credit</a>
</div></div>

❖ So I recently discovered the wild world that is online TCG collecting. Since it's a very old world, I couldn't find any codes and things that I liked and/or still worked. This is the code I whipped up for my Colors TCG post. I've no idea if anyone will get any use out of it but... there ya go.

❖ Make sure Disable Auto-Formatting is checked when you copy/paste the code into your post.

❖ All of the little boxes (those labeled sketchpads, portfolios, pending, signatures) and the Logs box will scroll. The rest will grow in height as you add content except the Player box. That one has a fixed height to fit the banner in there.

❖ And yes, this is definitely not a table code. I find DIVs to be easier to work with and customize. If you have any problems or questions or what-have-you, hit me up. The code itself is definitely kinda rough but it should all be clear on what goes where.

Ctrl+F & Replace:
❖ BANNER_URL - Level banner or whatever you guys use.
❖ SITE_URL - The url to the tcg website or comm.

❖ 00/00/00 - Dates.
❖ Lorem Ipsum - Text to fill in.
❖ none - Placements to add images or whatever you like.

#b1eef0 header text and backgrounds
#104345 header background, borders, and content text

Flat | Top-Level Comments Only

Awesome code. Thanks for sharing. Might use it in the future to keep track of the physical cards I collect.
Or I might sit down and take screenshots of the cards I need in the various Topps Card Collector Apps.

I ended up moving everything to my own website for tcg hosting, lol. Once you pass the ~700 mark, it gets a little complicated to do on DW. But I'm glad it'll be useful for your purposes. Hope it comes in handy!

ATM my wishlist on the apps is rather small since I'm very picky what I collect. Well, but for the physical cards I guess it will become a problem if I want to list all the cards xD (a bunch of series with 300+ cards is never easy to manage xD).

[33] TCG Not-A-Table Template

no subject

no subject

no subject