Forums / Maintenance / Report Problems

14,371 total conversations in 1,033 threads

+ New Thread


Sticky Sticky Featured Featured
KYM Guide To Textile

Last posted Jul 21, 2014 at 02:21AM EDT. Added Nov 07, 2011 at 03:27PM EST
186 posts from 99 users

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="http://28.media.tumblr.com/tumblr_l8wt7tpdav1qzaxefo1_500.jpg" height="300"> becomes:


  • 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.


  • 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":http://knowyourmeme.com/ becomes Super Special Awesome Link.

The Name of the Link can also be changed by an image html, making the image the link. So
<a href="http://knowyourmeme.com/"> <img src="http://28.media.tumblr.com/tumblr_l8wt7tpdav1qzaxefo1_500.jpg" height="300"> </a> becomes:


  • Other small things:
  • Start a sentence with a * followed by a space to use bullets, as seen in these examples.
  • Use < center > and *< /center >, with the spaces removed of course, to center your text or image, giving it a more professional look. Doesn’t work on the forums.
  • <br> creates an extra enter, creating some room between 2 paragraphes of text.
  • This also goes for < hr > (same reason for explaining like this), but this replaces the extra space with a line. This however doesn’t work in the forums, there you have to place 3 – ’s behind each other with an enter before and after. 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 a white line between both ends of the code and the text. Creating:

Capiche?


  • 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.

Last edited Aug 16, 2012 at 07:09PM EDT
Nov 07, 2011 at 03:27PM EST
Quote

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="http://www.youtube.com/embed/dQw4w9WgXcQ" allowfullscreen="true"></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="http://www.youtube.com/embed/dQw4w9WgXcQ" allowfullscreen="true"></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="http://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1" allowfullscreen="true"></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="http://www.youtube.com/embed/dQw4w9WgXcQ?start=30" allowfullscreen="true"></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="http://www.youtube.com/embed/dQw4w9WgXcQ?loop=1" allowfullscreen="true"></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="http://www.youtube.com/embed/dQw4w9WgXcQ?start=40&amp;autoplay=1" allowfullscreen="true"></iframe>

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



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.

Last edited Oct 06, 2013 at 04:54PM EDT
Nov 07, 2011 at 03:27PM EST
Quote

Forgot a small thing.

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

Text
Nov 07, 2011 at 04:03PM EST
Quote

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!":http://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.

Last edited Nov 07, 2011 at 05:43PM EST
Nov 07, 2011 at 05:39PM EST
Quote

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

Last edited Feb 19, 2012 at 10:04PM EST
Nov 07, 2011 at 05:59PM EST
Quote

@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:

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


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.

Last edited Nov 07, 2011 at 06:09PM EST
Nov 07, 2011 at 06:08PM EST
Quote

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?

Nov 07, 2011 at 08:51PM EST
Quote

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…

Nov 07, 2011 at 09:31PM EST
Quote

@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="http://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.

Last edited Apr 25, 2013 at 05:45PM EDT
Nov 07, 2011 at 10:34PM EST
Quote

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

Nov 07, 2011 at 11:03PM EST
Quote

Natsuru Springfield wrote:

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="http://www.youtube.com/embed/8zqSSJSQlWo?autoplay=1&amp;rel=0" allowfullscreen="true"></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.

Last edited Apr 25, 2013 at 07:49PM EDT
Nov 07, 2011 at 11:19PM EST
Quote

This will conserve a lot of room on KYM.

Nov 08, 2011 at 12:45AM EST

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="http://knowyourmeme.com/photos/171857-cthulhu"><img src="http://i0.kym-cdn.com/photos/images/newsfeed/000/171/857/Unknown-cathulhu_soul.jpg?1315522441" height="185"></a> <a href="http://knowyourmeme.com/photos/170903-cthulhu"><img src="http://i0.kym-cdn.com/photos/images/newsfeed/000/170/903/orlyeh2ra.jpg?1315215009" height="185"></a> <a href="http://knowyourmeme.com/photos/170229-cthulhu"><img src="http://i0.kym-cdn.com/photos/images/newsfeed/000/170/229/tumblr_loi12uBUID1qlgo11o1_500.jpg?1315069509" height="185"></a> <a href="http://knowyourmeme.com/photos/46451-cthulhu"><img src="http://i0.kym-cdn.com/photos/images/newsfeed/000/046/451/pinkfreud-noneuclidean.jpg?1271197917" height="188"></a> <a href="http://knowyourmeme.com/photos/31644-cthulhu"><img src="http://i0.kym-cdn.com/photos/images/newsfeed/000/031/644/autoexec-penny_to_eat.jpg?1261442469" height="188"></a> <a href="http://knowyourmeme.com/photos/31643-cthulhu"><img src="http://i0.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%20Url"><img src="Image%20Url" 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="http://www.youtube.com/embed/otu625g2xNg" allowfullscreen="true"></iframe><iframe title="YouTube video player" width="300" height="200" src="http://www.youtube.com/embed/tzhfyUKwfF8" allowfullscreen="true"></iframe>

<iframe title="YouTube video player" width="300" height="200" src="http://www.youtube.com/embed/m3tPqCJyJCk" allowfullscreen="true"></iframe><iframe title="YouTube video player" width="300" height="200" src="http://www.youtube.com/embed/aftGF6PIfBo" allowfullscreen="true"></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.

Last edited Nov 08, 2011 at 02:52PM EST
Nov 08, 2011 at 02:47PM EST
Quote

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.

Last edited Nov 09, 2011 at 06:34PM EST
Nov 09, 2011 at 06:33PM EST
Quote


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

Last edited Nov 19, 2011 at 01:06AM EST
Nov 19, 2011 at 01:05AM EST
Quote

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

Nov 30, 2011 at 02:47AM EST

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="http://www.youtube.com/embed/BzAs1vMymtg" allowfullscreen="true"></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="http://www.youtube.com/embed/BzAs1vMymtg?autoplay=0&amp;start=25" allowfullscreen="true"></iframe>

Last edited Apr 25, 2013 at 05:46PM EDT
Dec 15, 2011 at 05:44AM EST
Quote

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

Last edited Dec 15, 2011 at 01:52PM EST
Dec 15, 2011 at 01:51PM EST

AMIDOINITRITE?

Last edited Jan 02, 2012 at 12:39AM EST
Jan 02, 2012 at 12:38AM EST
Quote

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

Last edited Jan 15, 2012 at 02:56PM EST
Jan 15, 2012 at 02:55PM EST
This post has been hidden due to low karma.
Click here to show this post.

@Edrian
Swazzle Stars and Pizza Whistles Oh Boy!

Jan 16, 2012 at 09:14PM EST
Quote
This post has been hidden due to low karma.
Click here to show this post.

TIAT
Scroll over that.
ASDF
Does This WORK

Last edited Jan 17, 2012 at 07:22PM EST
Jan 17, 2012 at 07:19PM EST
Quote
This post has been hidden due to low karma.
Click here to show this post.

Test

Test bq. Test
Last edited Jan 17, 2012 at 08:24PM EST
Jan 17, 2012 at 08:23PM EST
Quote

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

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

Jan 21, 2012 at 09:18PM EST
Quote

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="http://www.youtube.com/embed/0fU75z-L32g?theme=light" allowfullscreen="true"></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="http://www.youtube.com/embed/jR-jNqpAFuw?theme=light&amp;color=white" allowfullscreen="true"></iframe>

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

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

<iframe width="420" height="315" src="http://www.youtube.com/embed/jR-jNqpAFuw?theme=light&amp;color=red" allowfullscreen="true"></iframe>

<iframe width="420" height="315" src="http://www.youtube.com/embed/jR-jNqpAFuw?theme=dark&amp;color=red" allowfullscreen="true"></iframe>

Last edited Jan 21, 2012 at 09:56PM EST
Jan 21, 2012 at 09:28PM EST
Quote

THE PAGE IT’S RUSSIAN RICKROLLING ME

Thanks for this RM. This should be very helpful

Jan 27, 2012 at 03:50PM EST
Quote

Autoplays.

Feb 05, 2012 at 12:15PM EST

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>-- First World Life (@FirstWorldLife) <a href="https://twitter.com/FirstWorldLife/status/167352059690106881">February 8, 2012</a>

Last edited Feb 08, 2012 at 05:30PM EST
Feb 08, 2012 at 05:17PM EST
Quote

Beautiful.

This is something we all really needed.

Last edited Feb 10, 2012 at 05:57AM EST
Feb 10, 2012 at 05:56AM EST

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.

Last edited Feb 12, 2012 at 10:11AM EST
Feb 12, 2012 at 10:06AM EST
Quote

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?

Feb 27, 2012 at 10:44AM EST
Quote

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

Feb 27, 2012 at 05:33PM EST
Quote

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?

Feb 28, 2012 at 10:24PM EST

William Schnell wrote:

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.

Feb 28, 2012 at 10:42PM EST
Quote

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.

Mar 09, 2012 at 11:54PM EST
Quote

Fridge wrote:

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.

Last edited Mar 10, 2012 at 12:32AM EST
Mar 10, 2012 at 12:29AM EST
Quote

Mister J wrote:

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:

@@ 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.

Last edited Mar 10, 2012 at 08:30AM EST
Mar 10, 2012 at 08:27AM EST
Quote

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.

Mar 11, 2012 at 12:58AM EST

User Name wrote:

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.

Last edited Mar 11, 2012 at 03:29PM EDT
Mar 11, 2012 at 03:29PM EDT
Quote

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!?

Mar 11, 2012 at 08:41PM EDT
Quote

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.

Mar 12, 2012 at 08:57PM EDT
Quote

Success
Let’s try a GIF:

Thanks for the help!

Last edited Mar 12, 2012 at 09:47PM EDT
Mar 12, 2012 at 09:45PM EDT
Quote

Yo Yo! You must login or signup first!