Tutorial - Forum Post Coding

edited January 2016 in Tutorials
Alright, you want to do this?, or how about making a link look something like this?

Here's how, html coding, I figured this out a bit ago, and have been using it for making my links look nicer, and I know a few of you use it to make italics. If you're one of the people who use italics you're one step closer to doing everything else than everybody else, and for those who have yet to figure it out yet, it's the same way you do italics on the cards.
Of course I can't use the proper characters for demonstration purposes so instead I'll be replacing the > with ] and < with [.
With the coding you'll always need to have the opening code, and the closing one. If you forget the closing part then your text will do whatever that coding says until the next closing of the proper type or the end. It should look like this (except with proper symbols) [abc="gettingtoit"]text stuff[/abc]

so first off bold and underline are just [b]bold[/b] and [u]underline[/u]
also handy the line not made out of a thousand dashes the [hr]


With that aside, the four things I'll put up here are url linking, font color, font face (text style), and font size.

URL Linking
for making links - [a href="entertheurlrighthere"]the text that's going to show up as link[/a]

Text Color
for coloring your text - [font color="entercolornamehere]the colorful text[/font color]
you can also use "#RRGGBB" instead if you feel more technical (and can actually make sense of that), and there are online resources for getting more than just basic colors if you want more details in your approach to coloring.

Font Face
font face is basically the same as color but instead it's ["font face="nameoffontface"](don't forget the closing part) you can find font face names by using Word, Google docs etc to look them up, though some won't work.
Font Size
finally size, this is just [font size=1-7] (and the coding closing of course) 2 is reg size, 1 is small, and the rest are just bigger and bigger.

If you want to do more there's plenty of online html coding stuff that will be helpful.
have a nice day!

FYI: there's plenty of html coding which doesn't work on here, and also always double check your previews for any hiccups.

Comments

  • Since the site uses Vanilla Forums, is there a place where we can see officially all of the tags supported in discussions/comments? I can't find one.
  • @strongbelieves not as far as I'm aware, basically it's trial and error on finding what works and what doesn't.
  • edited December 2015
    Thanks pyrak for the tips
  • edited January 2016
    Thanks @pyrak!

    AWESOME!

    (Awesome is clickable btw:)
  • edited March 2016
    You can now also display and link images for cards. For example:
    image

    The code for this is:
    <a href="LINK_HERE"><img src="IMAGE_LINK_HERE"></a>
    I suggest using the thumbs image for your card (as it shows in in your profile list of cards) as it will be the best size and readability for the forums. If you are unsure how to do that, just find the card in your profile, right-click it and select 'copy image address' or something similar. You will then be able to paste the image link.
    image
  • Also, you can get text to stand out and be fancy and ignore most < > tags by using the code tag:
    <.code>Remove the . characters from the tags<./code>

    And you can make it stretch the whole post by using pre.
    <.pre>Remove the . characters from the tags<./pre>
  • For the record, this thread is not supposed to be a test thread for using tags. If you want to test a tag, start a new discussion or reply and then preview the post so you can see what it will look like without actually posting.

    That being say, HTML unordered lists and tables (without borders) both also work in this forum. The only issue with unordered lists is that the list elements don't ignore new lines so if you put each list element on a separate line, it will have an extra blank line between the elements.
  • @strongbelieves

    Do you know of a way to stack the card images next to each other, instead of below each other, to save space when posting in threads?
  • FYI, you can have "special characters" display if you encode them using "html entity codes"
    < - &lt;
    > - &gt;
    & - &amp;
  • @Grimshac, instead of doing

    (A href= BlahBlahBlah)(Img src= BlahBlahBlah)(/a)
    (A href= BlahBlahBlah)(Img src= BlahBlahBlah)(/a)

    do

    (A href= BlahBlahBlah)(Img src= BlahBlahBlah)(/a)(A href= BlahBlahBlah)(Img src= BlahBlahBlah)(/a)(A href= BlahBlahBlah)(Img src= BlahBlahBlah)(/a)

    If you do no spaces, it will put images next to each other.
  • @ZendikarIncarnate

    Thanks - I was really bothered by the huge chunks of space I was eating up when submitting multiple cards :x
  • Bold <B>Bold</B>
    Underlined Text <U>Underlined Text</U>
    Link <a href="Your URL goes here">Whatever you want others to see.</a>
    Code box <CODE>Your code here (Remove the space between the backslash and the word CODE.)</ CODE>

    I can't get the italics to work, could someone help me there?
  • Italics don't work!?
  • edited September 2017
    You have to use a lower case "i"

    Italics <i>Italics</i>
  • edited October 2016
    Is New Phyrexia better (Φ), or is Shadows over Innistrad (Ω) better.

    How to do this: I just found out, but you can go to here for help with HTML coding. As for this, I just put down &[Insert Symbol Name];

    Note: The "&" and the ";" are necessary.
  • edited October 2016
    White:

    <p>&#10050;</p>

    Old Colorless mana:

    <p>&#10112;</p>

    New colorless mana:

    <p>&#10023;</p>

    Phyrexian mana:

    Φ

    <p>&Phi;</p>
  • Any old colorless mana from one to ten.
    <p>&#10112 through 10121;</p>
  • Some HTML coding works but you can't embed videos and you can't write scripts.
  • edited November 2016
    I've found a really cool trick. Lo lets say you want to post an image on the site (to do that you do <img src="RightClickOnTheImageAndSelectCopyImageAdressAndPasteThatHere">), but want the image to be small for some reason. Maybe because you want to fit more next to each other, etc. Or maybe you want it to be big. All you do is you take the image address
    http://mtgcardsmith.com/view/complete/thumbs/2016/10/17/1476742515047310.png
    ......................................................................./\
    and take that word right there. If it's "thumbs", it's small. If it's "full" then it's big. You don't have to change anything else. That way, you don't have to go searching for the right image if you want it small or big!
  • edited February 2017
    For everybody, who needs to add some cancer to his or her texts:

    image —> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Face-smile.svg/30px-Face-smile.svg.png">

    image —> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Face-sad.svg/30px-Face-sad.svg.png">

    image —> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/57/Face-wink.svg/30px-Face-wink.svg.png">

    image —> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Face-tongue.svg/30px-Face-tongue.svg.png">

    image —> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Face-grin.svg/30px-Face-grin.svg.png">

    image —> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Face-surprise.svg/30px-Face-surprise.svg.png">
  • edited March 2019
    For reference:

    <a href="LINK_HERE"><img src="IMAGE_LINK_HERE"></a>
  • @feralitator Here's how:

    1.Click this button. 



    2.Then click spoiler.



    3. Type the text you want in that spoiler. 










Sign In or Register to comment.