Forums / Discussion / Q & A

Also refer to KYMdb Style Guide and Wikipedia: Textile.

I won't explain everything here, but I'll give you the textile you'll find most commonly on this site.

Bold: Place a * on both sides of the text you want bold. Result: Bold Text
Italic: Place a _ on both sides of the text you want italic. Result: Italic Text
Strikethrough: Place a – on both sides of the text you want strikethrough. Result: Strikethrough Text

Underlined text is done differently: Start your text with < u > and end your text with < /u >, remove the spaces of course when using it. This doesn't work on the forums however, therefore I can't correctly show it.

These can all be combined with each other as well, creating the combined results: Ultra Combo!

%{font-size:12pt}font size% will change the size of the text by changing the number. Like this.

%{color:red}text in red% will change the color of the text by changing the color name. Like this.

• Image posting:

Place exclamation marks (!) on both sides of the Url or use <img src="Url">, the second code allows to change the size of the text by adding width="X" or height="X" behind it, with X being a number.

So <img src="https://i.kym-cdn.com/photos/images/newsfeed/000/428/023/6d9.jpg" height="300"> becomes:

!https://i.kym-cdn.com/photos/images/newsfeed/000/428/023/6d9.jpg! would also post the image, but wouldn't change the height or width. To change the size with this method, the size has to be applied differently: !{height: 300px}https://i.kym-cdn.com/photos/images/newsfeed/000/428/023/6d9.jpg!

• Headers:

Start the sentence with h2. (dot included) followed by a space. The number can vary between 1 and 6, with 1 being the biggest header. Entries most commonly use h2. and h4. in their headers.

• Blockquotes:

<blockquote> Text to be quoted. </blockquote> will create quoted text. Starting a line with bq. (followed by a space) creates the same effect but will only function on the paragraph it's applied to and stops working for the next paragraph.

Text

• Linking:

This can be used to name your links and make them a hyperlink. This is done by using either "Name of the Link":Url or <a href="Url">Name of the Link</a>

So "Super Special Awesome Link":https://knowyourmeme.com/ becomes Super Special Awesome Link.

The Name of the Link can also be changed by an image html or textile, making the image the link. So
<a href="https://knowyourmeme.com/"> <img src="https://i.kym-cdn.com/photos/images/newsfeed/000/428/023/6d9.jpg" height="300"> </a>
and
"!{300 px}https://i.kym-cdn.com/photos/images/newsfeed/000/428/023/6d9.jpg!":https://knowyourmeme.com/
become:

• Other small things:

• Start a sentence with a * followed by a space to use bullets, as seen in these examples.

• Use <center> and end with </center> to center your text or image, giving it a more professional look in entries with media. This creates small text on the forum, so there you have to place an enter between the start and end of the code, and your text.

• <br> creates an extra enter, creating some room between 2 paragraphes of text or media and text.

• This also goes for <hr>, but this one adds a line. Placing 3 – 's behind each other with an enter before and after also works. This creates:

• Spoiler buttons:

Use either <div class="spoiler">Hidden Text</div> or <div class="spoiler" title="Title">Hidden Text</div>. Difference with the second one is that you can change the title of the button. If you don't want your text to be small within the spoiler, just place an enter between both ends of the code and the text. Creating:

• Avoiding textile:

Either place an @ on both sides of the textile, or use <code> Textile </code>. Enough examples of this can be found in this post. Some don't allow this however, in which case I use ( and ) for the examples.

However, using @ or the <code> methods can generate odd small text in certain areas of the site, which can be annoying if you want to avoid textile without this effect. To bypass this, place two equation signs on both sides of the text. So in the case of avoiding bold text: *text* will be fixed to *text*. This only works on textile and not html.

• Youtube videos:

First I'll post this image:

The text surrounded by the red is what you need to copy+paste to post a video. You don't need to check "Include Related Videos". The Youtube code has updated over time, so you'll get a different code now. For example this one:

<iframe width="420" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>

• Changing Size:
  The "width" and "height" you see can be used to change the size of the video. Youtube also does this for you by changing the numbers in the custom section. For entries, KYM uses a width of 425 for stand-alone vids, and 300 for vids placed next to each other or in tables. So the following code:

<iframe width="300" height="233" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>

Will change into:

• Editing certain features:

You can give you video certain features like autoplay or replay. To do this, place a questionmark (?) behind the Url in the embed code and follow that by one of the following codes.

• Autoplay: To make your video have autoplay, add autoplay=1 behind the questionmark. Autoplay is only allowed on your profile wall! Nowhere else!
  <iframe width="420" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1" frameborder="0" allowfullscreen></iframe>
• Start at certain point: To let the videos start from a certain point, add start=X behind the questionmark. With X being the start of the video in seconds. So to start the video at 30 seconds, use:
  <iframe width="420" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ?start=30" frameborder="0" allowfullscreen></iframe>
• Loop: Some videos already loop themselves, but in case they don't you have to add loop=1 behind the questionmark. This creates:
  <iframe width="420" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ?loop=1" frameborder="0" allowfullscreen></iframe>

These features can also be combined. To do this, you have to put a "&" between each code feature. So for example:

<iframe width="500" height="500" src="https://www.youtube.com/embed/dQw4w9WgXcQ?start=40&autoplay=1" frameborder="0" allowfullscreen></iframe>

Will create a 500 by 500 video in autoplay starting at 40 seconds.

• WEBMs and SWFs:

The code for embedding WEBMs and SWFs is as follows:
<embed src="URL" height="300" width="300">
Height and width can be adjusted the same way as Youtube videos.
Note that WEBMs and SWFs autoplay automatically, so please cover them with a spoiler of some sort if they contain sound.

Not everything you'd like to know might be added here. If you want to know more about textile, feel free to ask. You'll be answered as fast as possible.

Also be aware that some codes may not work on the forums, but do work on entries, and visa versa.

Forgot a small thing.

<blockquote> Text to be quoted. </blockquote> will create quoted text.

Text

%{font-size:18pt}Big text%
Big text

Awesome guide so far, RandomMan.

I wanted to add on a couple of things as briefly as possible.

Linking from Images
You also can use "!ImageThatIsToBeEmbedded.url!":YourLinkHere.url to get the same effect as linking from an image using HTML's "a href" and "img src".

So "!http://28.media.tumblr.com/tumblr_l8wt7tpdav1qzaxefo1_500.jpg!":https://knowyourmeme.com/:

Becomes

• You can no longer alter the size of the image using this, but it comes more intuitively for me.

More List Textile

• You can number a list by using a # instead of a *.
  • You can also make different levels of bullets and numbered lists by repeating a # or an *.

For example:

1. This line is number 1 using #, and then a space between the # and "This line is number 1…" (or whatever text you decide to use.)
2. This line is number 2 using #, and then a space between the # and "This is line number 2…"
   1. This line is number 2.1 using ##, and then a space between ## and "This is line number 2.1…"
3. This is line number 3 using #, and then a space between # and "This is line number 3…"
    
    
   It is the same process and effect in using *'s to make a non-numbered list.

• This is one bullet.
• This is another bullet.
  • This is a sub-point of the second bullet.
• This will continue the original bulleting level.

I hope that wasn't too much.

I also want to add something.
There are sometimes buttons available, and the code is <a href="url" class="button">text on button</a>
There are 6 kinds of buttons I know:
*Plain: <a href="url" class="button">text on button</a>
Push button receive bacon
*Red: <a href="url" class="button red">text on button</a>
Push button receive bacon
*Blue: <a href="url" class="button blue">text on button</a>
Push button receive bacon
*Green: <a href="url" class="button green">text on button</a>
It's a trap
*Orange: <a href="url" class="button orange">text on button</a>
nope.avi
*Purple: <a href="url" class="button purple">text on button</a>
Push button receive bacon

@Verbose

No problem, you’re free to add anything that I missed.

Up next: Tables.

|_. Header |_. Banana |_. Cookies |_. Etc Etc Etc |_. Cake |
| Cell 1 | Orange | Text and Stuff | Derp | Things |
| Cell 2 | Rave | Party | With | Pie |

Gives:

The other way doesn't work on the forums, so I'll link you here. Look for Stuart Whitman's post and see his second example. This way does work on entries. I prever this way, but it's free choice.

As you can see, the lines in this table are very close to each other. In order to create more space, let the table have more headers/cells and make the extra cells inbetween some free space.

You can create free space in a line using %{color:white}_____%. Change the number of lines inbetween for more space. Use this in entries when you believe your table or 2 images need some more space inbetween.

Result [The Game] is that the next part starts here.

Question:

So if I put @ around a code, it'll show up like this: *Blah blah blah*

How do I make it so that it is normal-sized text?

I tried to make an autoplaying video hidden inside a Spoiler Tab (that wouled start once the spoiler became unhidden), but it didn't work on the forums or on the comments…

@Philip

I don't know about that. The @ make the text like that, so I don't think it's possible.

@Natsuru

Like I said before, not everything works everywhere. I tested it out on my profile wall and it worked fine.

<div class="spoiler" title="Autoplaying Video">

<object width="1" height="1"><param name="movie" /><param name="allowFullScreen" /><param name="allowscriptaccess" /><embed src="https://www.youtube.com/v/dQw4w9WgXcQ?amp;autoplay=1&amp;version=3&amp;hl=nl_NL" width="1" height="1"></embed></object>

</div>

Maybe you didn't add some enters between the beginning and the end of the spoiler code and the video, because it works fine here.

Hm, I guess you are right. Even though the video is extreamly small when I watch it.

That's because I made the size very small. If you mess around with the surface a bit, it'll turn out right.

<div class="spoiler" title="Autoplaying Video">

<iframe width="480" height="360" src="https://www.youtube.com/embed/8zqSSJSQlWo?autoplay=1&rel=0" frameborder="0" allowfullscreen></iframe>

</div>

Just discovered you can also use the regular embed code for adding autoplay. Same way as with the old embed code, just add autoplay=1 and start=X with maybe an & behind the Url.

This will conserve a lot of room on KYM.

I'd like to add something to the table explanation, as I've only explained regular tables.

First I'll explain image tables. Example:

The textile used for this was:

<a href="https://knowyourmeme.com/photos/171857-cthulhu"><img src="https://i.kym-cdn.com/photos/images/newsfeed/000/171/857/Unknown-cathulhu_soul.jpg?1315522441" height="185" /></a> <a href="https://knowyourmeme.com/photos/170903-cthulhu"><img src="https://i.kym-cdn.com/photos/images/newsfeed/000/170/903/orlyeh2ra.jpg?1315215009" height="185" /></a> <a href="https://knowyourmeme.com/photos/170229-cthulhu"><img src="https://i.kym-cdn.com/photos/images/newsfeed/000/170/229/tumblr_loi12uBUID1qlgo11o1_500.jpg?1315069509" height="185" /></a> <a href="https://knowyourmeme.com/photos/46451-cthulhu"><img src="https://i.kym-cdn.com/photos/images/newsfeed/000/046/451/pinkfreud-noneuclidean.jpg?1271197917" height="188" /></a> <a href="https://knowyourmeme.com/photos/31644-cthulhu"><img src="https://i.kym-cdn.com/photos/images/newsfeed/000/031/644/autoexec-penny_to_eat.jpg?1261442469" height="188" /></a> <a href="https://knowyourmeme.com/photos/31643-cthulhu"><img src="https://i.kym-cdn.com/photos/images/newsfeed/000/031/643/roger-been_sleepin-scaled.jpg?1261442363" height="188" /></a>

As you can see, this is just a combination of <a href="Site Url"><img src="Image Url" height="X" /></a>. Special is that the height of every image is the same, creating a table look. Also notice that the top 3 images have a different height than the bottom images, this is to prevent the top or bottom from being wider overall. Changing the height automatically changes the width, so just mess around with it a bit until it matches.

Do add a space after every code, this to create that white line between the images. This can only be done by making the images a link. Regular images won't allow space inbetween.

Also don't let yourself get confused by an image table in an advice animal entry. Advice animal image macros usually have the same surface, automatically creating a better looking table.

Videos:

The code used for the videos are:

<iframe title="YouTube video player" width="300" height="200" src="https://www.youtube.com/embed/otu625g2xNg" frameborder="0" allowfullscreen></iframe><iframe title="YouTube video player" width="300" height="200" src="https://www.youtube.com/embed/tzhfyUKwfF8" frameborder="0" allowfullscreen></iframe>

<iframe title="YouTube video player" width="300" height="200" src="https://www.youtube.com/embed/m3tPqCJyJCk" frameborder="0" allowfullscreen></iframe><iframe title="YouTube video player" width="300" height="200" src="https://www.youtube.com/embed/aftGF6PIfBo" frameborder="0" allowfullscreen></iframe>

In case of videos, it's better to make the width the same. Reason for this is the difference between SD and HD videos. HD videos have different proportions than SD videos. If you make the height the same, the table might turn out bad. A width of 300 usually creates a nice video table, but you can change this if you want.

Nice, RMan!

Just a teeny bitty comment: In the last post, the code used for the image "tables" is not textile. It is HTML code. If it uses < and >, then it is HTML.

Also, there are some seldom instances where textiles will not work properly. Namely, if using text with parenthesis, exclamation marks, special characters, and such, one is encouraged to use HTML instead. Textile is just to make it more "intuitive", but HTML code is always more robust.

Is there a textile that doesnt work on profile pages and entry comment section?

This is perfect for KYM n00bs like me. Thanks guys. I appreciate it.

Small update on autplaying vids for your profile with the smaller codes.

The new template of Youtube doesn't add the question mark anymore when embing vids. You now have to add this yourself.

<iframe width="420" height="315" src="https://www.youtube.com/embed/BzAs1vMymtg" frameborder="0" allowfullscreen></iframe>

So now you have to add ?autoplay=1 or ?start=X behind the Url in the embed code.

So starting at 25 seconds on autoplay gives.

<iframe width="420" height="315" src="https://www.youtube.com/embed/BzAs1vMymtg?autoplay=0&start=25" frameborder="0" allowfullscreen></iframe>

% {color:purple}text in purple %
OMG IT WORKS THANX

OH BOY

AMIDOINITRITE?

What about colors?No one posted colors here
Well,we have the following
Red
Green!
Pink
Blue!

How do you make em you ask?
Well you just type in

% {color: your color here} Text %
No spaces

Please stop using this thread to test if your html works.

If you really have to test it, just delete your post afterwards.

Embeding a light-colored YouTube player:

How to do it: Add "?theme=light" after the YouTube URL in the embed code.

<iframe width="420" height="315" src="https://www.youtube.com/embed/0fU75z-L32g?theme=light" frameborder="0" allowfullscreen></iframe>

You can change the bar of the player to white or the default red. by adding "&color=red" or "&color=white" after the "?theme=light" or "?theme=dark."

First video:
<iframe width="420" height="315" src="https://www.youtube.com/embed/jR-jNqpAFuw?theme=light&color=white" frameborder="0" allowfullscreen></iframe>

Second video:
<iframe width="420" height="315" src="https://www.youtube.com/embed/jR-jNqpAFuw?theme=dark&color=white" frameborder="0" allowfullscreen></iframe>

To add a red bar (even though it's already default so it's pretty useless):

<iframe width="420" height="315" src="https://www.youtube.com/embed/jR-jNqpAFuw?theme=light&color=red" frameborder="0" allowfullscreen></iframe>

<iframe width="420" height="315" src="https://www.youtube.com/embed/jR-jNqpAFuw?theme=dark&color=red" frameborder="0" allowfullscreen></iframe>

THE PAGE IT'S RUSSIAN RICKROLLING ME

Thanks for this RM. This should be very helpful

This Helped me ALOT! Thanks!

Autoplays.

I noticed a person had trouble trying to embed a Tweet into a entry so I'm going to add this.

PLEASE NOTE:

• You MUST have the newest Twitter layout and interface (Old Twitter | New Twitter).
• Tweet embeds DO NOT work properly in the forums (they do work in the entries).

Example of the code for a Tweet embed:
<blockquote class="twitter-tweet"><p>My coffee mug is too tall for my Keurig. <a href="https://twitter.com/search/%2523FirstWorldProblems">#FirstWorldProblems</a></p>&mdash; First World Life (@FirstWorldLife) <a href="https://twitter.com/FirstWorldLife/status/167352059690106881" data-datetime="2012-02-08T21:00:14+00:00">February 8, 2012</a></blockquote> <script src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

Beautiful.

This is something we all really needed.

Some stuff about Google Insights.

When using Google Insights, you can select different time periods. These vary from a week, to some months, to a year, to 2004. But in various occasions 2004 is too far back and won't give enough results, whereas 12 months ago is too soon and doesn't show everything.

In cases like this you can add more monts yourself.

< script type="text/javascript" src="http://www.gmodules.com/ig/ifr?url=http%3A%2F%2Fwww.google.com%2Fig%2Fmodules%2Fgoogle_insightsforsearch_interestovertime_searchterms.xml&up__property=empty&up__search_terms=Know+Your+Meme&up__location=empty&up__category=0&up__time_range=12-m&up__compare_to_category=false&synd=open&w=320&h=350&lang=en-US&title=Google+Insights+for+Search&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js" >< /script >

So if you want it to go back 2 years instead of 12 months, look for "time_range=12-m" when you selected it to go back 12 months. You can change the 12 by any number of months. So if you make it 24, it goes back 2 years.

"w=320" and "h=350" determine the proportions of the Google Insights. The height works fine with 350, but a width of 320 isn't always accurate. So you can change that to 600 or more if you want (entries automatically narrow it down).

Changing the width can already be done on Google Insights when receiving the embed code. You can change the width below the "Set advanced options:" section. Don't forget to update the code afterwards.

I can't seem to be able to stack text size and color changes. Is there a way to do this, or does it just not apply?

Alright everybody, Acronyms.
An acronym in textile is THIS
Scroll over that text with your mouse and hold it there for a bit.
"Luis, teach me how to do that!"
I will do the word THIS and make the scrollover text This Cheeto is now a meme.
First, make a word in all caps.
Then, put a ( after it, type in what you want, and then put a ). It's that simple! Wow!
So, THIS(This Cheeto is now a meme.) becomes THIS

There's one think I'd like to ask…is it possible to put a picture in your post without necessarily uploading it, i.e. taking it directly from your files to your post?

No, you have to upload it. The post needs a "source" where it takes the image from. In this case, the place where you uploaded it.

If it for some reason was possible, the link would be broken as soon as you turn off your computer.

text on button

Just one question.

I've been here for almost a year, and still haven't found a way to create large spaces between paragraphs on forum posts, entries, and my profile. I've seen other users, usually mods, do such things, so there's got to be a way.

There are a few ways…..
You can use <p> or <br> to break a page. Using a few in a row will create large spaces.
A < p > looks like this:

And a < br > looks like this:

It's the same length, but I think in entries it will add a </p> to the end of the entry if you use < p >.

BTW, the <p> stands for paragraph, while the <br> stands for break.

As a follow up to this:

</br> does nothing, it doesn't work.

I often see people adding this at the end of an image (table) or video, because they commonly start with a break, followed by a center. So it makes sense to end the break at the end just as you end the center. But this does nothing. The <br> is what adds the extra space, it doesn't need to be ended.

About the picture tables, what if a picture doesn't come from KYM?

Also, how do you make those lines? By those, I mean the ones similar to those used by editor's notes on entries.

On entries: < hr > (without spaces)

On threads: place 3 -'s behind each other.

So - - - (without spaces and an enter before and after) becomes.

As for images from other sites. That doesn't matter, same thing.

You can also upload them to the image gallery first and then add it to the entry.

I'll post a picture just to get the hang of posting images:

So, instead of the Freddie Mercury Rage pose, there's this small image of a piece of paper with some shapes on it… What is that!?

It seems like you have linked a Google images preview. Links like that, and also direct links from 4chan and FunnyJunk wouldn't work as they are not pernament links.

All right, I'll try to post the picture from the original site:

Success
Let's try a GIF:

Thanks for the help!