How to Format Decklists in HTML
TappedOut forum
Posted on Sept. 7, 2014, 5:09 p.m. by Spootyone
Hello all. I'd like to learn how to be able to list the cards in a deck without it looking like absolute garbage, but my skills in HTML are severely lacking. I'm sure there are a number of ways to go about this, be it setting up columns or even just getting screenshots, but I wanted to get people's opinions/insight.
Can anyone out there explain to me the best way they've found to get a decklist onto a site page (forum, article, etc.), please?
PepsiAddicted says... #3
you can google basic html codes to copy+paste if you dont know them. they are fairly easy tho.
f.e.: for pics u copy+paste < img src="XXX" > with the pic URL instead of the XXX and without spaces at the beginning and the end
-> without spaces you wouldnt see it in here thats why i had to make it THAT complicated ;)
September 7, 2014 5:26 p.m.
Thanks, you two. I did know about this all already, but I appreciate the help nonetheless. Is there a better way than a pasted screen shot? I mean, that isn't horrible. But I'm curious.
September 7, 2014 6:16 p.m.
vampirelazarus says... #6
Also, the majority of any "coding" you will need or want to do for the casual user, can be found in markdown syntax.
I'll admit, when I first started using this site, I absolutely hated markdown syntax, but holy god, yeaGO has converted me.
September 7, 2014 7:52 p.m.
In an upcoming article I will be posting the contents of a deck or two and I wanted to do it in a way that it looks good for the viewer and doesn't take up a bunch of space. For example, I could do something like this:
1x Mountain
1x Forest
etc
But doing that can take up a lot of space and it isn't always very easy to visualize the deck contents. I could always use the deckbuilder on the site and then link to the decks, but I didn't really feel it was right to be sending people all over the place when they're just trying to read something quickly. I'm thinking so far that a good option would be to make a deck on here, screencap it, and then place the image in the article using normal HTML image insertion. That way I can adjust it's size and have the cards organized much more than they would be by just listing things.
September 7, 2014 7:57 p.m.
vampirelazarus says... #8
There is a way to actually make lists like that using the markdown syntax, however, I'm not sure what it is.
September 7, 2014 8 p.m.
vampirelazarus says... #9
And it would be a hell of a lot simpler (and look better) than screenshots.
September 7, 2014 8:01 p.m.
yeah Femme_Fatale has nifty bullets, maybe taht works. also check out http://tappedout.net/mtg-forum/tappedout/tappedoutjs/
September 7, 2014 8:28 p.m.
Thanks for the link vampirelazarus.
Holy--....I didn't even know that was a feature yeaGO...Yeah, alright that'll do haha. Thank you!
September 7, 2014 8:54 p.m.
vampirelazarus says... #12
The above is the list thing I was talking about.
September 7, 2014 8:57 p.m.
Hmm...So the way I use this feature is by adding "< block quote >" to the beginning of the list and "< / block quote >" (no spaces) to the end and the site takes care of the rest? Or is there another step I need to take?
September 7, 2014 9:25 p.m.
Femme_Fatale says... #14
blockquote huh. VERY useful. LOVE IT!
As for html codes, your greatest ally is called ... Right Click -> Inspect Element. From there you can figure out how the spoilers, scroll boxes, bullets and image overlays work.
Also, yeaGO, have you ever figured out how to stop overlay images on cards from being indented? Like so:
September 7, 2014 9:31 p.m.
Doing some testing here:
2x Bull Hippo3x Durkwood Boars17x Forest3x Grizzly Bears2x Lone Wolf2x Monstrous Growth2x Nature's Lore3x Norwood Archers1x Pride of Lions1x Renewing Touch1x Thorn Elemental1x Whirlwind2x Wild Ox
September 7, 2014 9:43 p.m.
vampirelazarus says... #16
Yeah, we need to include the < script src="http://tappedout.net/tappedout.js" >< /scrip t>, but its not allowed on comment posts.
September 7, 2014 9:44 p.m.
Hmm...okay that probably did what it was supposed to do but I think I'm misunderstanding how to use the correct tags.
Another test:
September 7, 2014 9:46 p.m.
Oh! Okay I tried adding that to the top of a comment at one point and it gave me an error. So if I do...
< script src="http://tappedout.net/tappedout.js" >< /scrip t>< blockquote >2x forest3xkitchen finks4x thoughtseize < / blockquote >In a forum post or article post, it will format it in the decklist form?September 7, 2014 9:50 p.m.
Femme_Fatale says... #20
Directly from my profile ...
Do you want your own cool little bullet to use your lists? Ask and you shall receive! I make my own Handmade Bullets for all to enjoy~! Just please remember to reference me for the credit, mkay?
Beyond that, it is quite a tutorial on how to do spoilers and image overlays. As for scroll boxes, that is just copy pasta.
<div style="border:(number)px (line type) (colour); width:(number)px; height:(number)px; overflow:scroll; ">
<h2> Title </h2>
TEXTITY
</span></div>
September 7, 2014 9:54 p.m.
Femme_Fatale says... #21
I am SOOO going to use that code for my budget lists. It's going to replace my ugly use of scroll boxes.
September 7, 2014 10:22 p.m.
Thanks for the help! I may end up using that since I just now realized (I'm slow sometimes) that the widget isn't for use on this site. Are there any plans for it being implemented? It seems like such a useful feature. Or am I being dumb again and it actually will work correctly on an article posting?
(also, I may end up coming to you with a bullet request, Femme_Fatale...)
September 7, 2014 10:22 p.m.
Femme_Fatale says... #23
It can be used on this site Spootyone. You just can't use scripts in forum posts. I think, however, that allowing this to be used in thread openings is very useful in the deck-help forum.
I'll demonstrate the use of this on one of my expensive decks for its budget alternative.
September 7, 2014 10:25 p.m.
Ah! I just got it to work, actually. Sweet! This is going to be SUPER helpful in creating future content. I wish I'd known about this sooner.
September 7, 2014 10:33 p.m.
yeah i didn't add it to the site, it was meant for other sites =) but if you can get it working, feel free to do so.
September 7, 2014 10:37 p.m.
Femme_Fatale says... #26
Yep. It works very simply actually yeago.
Please look at the following deck, right under the budget deck list spoiler.
The Grim Reaper is Stalking Us .... Playtest
Modern
SCORE: 61 | 18 COMMENTS | 6259 VIEWSSeptember 7, 2014 10:39 p.m.
vampirelazarus says... #27
Yep, it works when added to deck descriptions. I have a test deck where I test these sorts of things :P
Its private, or I'd be all cool like Femme and share it.
September 7, 2014 10:41 p.m.
Lol I do the same exact thing vampirelazarus. And here I thought I was being innovative.
VampireArmy says... #2
You can make bullets with a * symbol in the front of a line with a space between them
You can make a line to separate category and stuff with three minus symbols under your paragraph adding a space.
You can turn a line into huge text by doing the same as above with no space
September 7, 2014 5:13 p.m.