RESOURCE A Beginner's Guide to the Rich Text Editor!

Discussion in 'ROLEPLAY SKILLBUILDING' started by Sen, Jul 28, 2016.

  1. Don't know how to use the fancy buttons in your Rich Text Editor? Well, you've come to the right place! This is a friendly beginner's guide to the Rich Text Editor! You might want to use these in your future posts!

    Text

    • [​IMG] bold text - highlight the text you want to bold and press the button
    • [​IMG] italic text - highlight the text you want to italic and press the button
    • [​IMG] underlined text - highlight the text you want to underline and press the button
    • [​IMG]strikethrough text - highlight the text you want to strikethrough and press the button. [NOW UNDER THE + ICON]
    • [​IMG] left align text - highlight the text you want to align to the left and press the button, this is the default format of text
    • [​IMG] right align text - highlight the text you want to align to the right and press the button
    • [​IMG] center align text - highlight the text you want to align in the center and press the button
    • [​IMG] justified text - highlight the text you want to justified and press the button, justified text is spaced so that the left and right side of text both have straight edges.
    Text Transformations


    • Click on the 'A' to open the drop down menu and select your desired font.

    [​IMG]
    This text is using the Arial font.
    This text is using the Book Antiqua font.
    This text is using the Courier New font.

    • Click on the 'T' to open the drop down menu and select the desired size for your font.

    [​IMG]

    This is size 1 text
    This is size 2 text
    This is size 3 text
    This is size 4 text
    This is size 5 text
    This is size 6 text
    This is size 7 text

      • Click on the waterdrop and highlight the text you wish to change the color of and choose the color you want your text to be. If you wish to use a color that is not part of the default palette you will need RGB values or color hex codes. These sites are available for you to use to find hex codes easily!
    - Image Color Picker - Find the hex code of a pixel in a picture!
    - RGB.to. - All around converter from RGB to Pantome to hex codes!

    Formatting
      • [​IMG]This button is for creating dot point lists, very useful for summarizing huge paragraphs! This whole guide uses dot point lists!
      • [​IMG]Creates numbered lists! Use this to tidy up rules, or create tutorials or rankings?

    1. How to make your posts pretty?
    2. Use this guide
    3. Press buttons
    4. Profit?

      • [​IMG] Creates an indent from where you highlighted the text. Can be used multiple times.
      • [​IMG] Removes the indent!
    Normal:
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus luctus nisi eget semper. Maecenas lobortis tristique lectus eu venenatis. Praesent id vulputate ante, nec tempus dui. Integer molestie velit erat, quis tincidunt lacus maximus eget. Integer mollis purus nec mauris dictum gravida. In tellus ante, sollicitudin in tristique et, pretium eu nisl. Integer molestie sit amet tortor in viverra. Fusce turpis arcu, rhoncus quis est eu, tincidunt ornare lacus. Sed tristique mauris ut ultrices porttitor.

    Indented:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus luctus nisi eget semper. Maecenas lobortis tristique lectus eu venenatis. Praesent id vulputate ante, nec tempus dui. Integer molestie velit erat, quis tincidunt lacus maximus eget. Integer mollis purus nec mauris dictum gravida. In tellus ante, sollicitudin in tristique et, pretium eu nisl. Integer molestie sit amet tortor in viverra. Fusce turpis arcu, rhoncus quis est eu, tincidunt ornare lacus. Sed tristique mauris ut ultrices porttitor.
    Media

    • [​IMG] Inserts a picture. After clicking this button, you will be directed to a box that asks you to enter the link to your picture. Any link works, but try to use links that end with .jpg or .png and similar variants.
    [​IMG]



      • [​IMG] Inserts a video. Enter the link to the video into the box. Keep in mind that only media from Dailymotion, Facebook, Liveleak, Metacafe, Vimeo, YouTube works.
    You will see:
    Code:
    [media=youtube]special code here[/media]
    And end up with:



      • [​IMG] Creates a hyperlink. You can highlight the text you wish to hyperlink or insert one. The 'text of your link' is what text will be hyperlinked, it should already be filled in if you decide to highlight to create a hyperlink to pre-existing text. You can also create a hyperlink using your email by clicking the tap 'Email options'.
      • [​IMG] Deletes the hyperlink.​

    [​IMG]
    Special Text


      • [​IMG] Allows you to enter in raw code. Accepts general codes, HTML and PHP. It looks like this: [NOW UNDER THE + ICON]
    Code:
    [LIST]
    [*][img]http://i.imgur.com/qKRJMjE.png[/img] Allows you to enter in raw code. Accepts general codes, HTML and PHP.
    [/LIST]

    • [​IMG] Allows you to manually quote text! Highlight the text you wish to quote and click the button or press the button to turn your current paragraph into a quote. [NOW UNDER THE + ICON]
    Spoiler Tags

    • [​IMG] Creates a bar spoiler. Click on the button and enter in the title to your spoiler. [NOW UNDER THE + ICON]
    I am a spoiler. (open)
    Goku is actually a Saiyan.

    • [​IMG] Click these buttons to find and use a collection of cute pixel gifs and smilies! :jump:
    This only explains the editor's icons. For a more extensive and detailed way to decorate your text, please refer to the BB Code guide. Click on this!


    Edit (9/2017): Fixed the YouTube video.
    Edit (11/2017): Fixed to match the new editor.
     
    #1 Sen, Jul 28, 2016
    Last edited: Nov 7, 2017
    • Useful x 16
    • Love x 15
    • Thank x 9
    • Like x 5
    • Bucket of Rainbows x 3
    • Nice execution! x 2
  2. Babe, why did you have to put Park Bo Gum in it? xD

    Great guide for those who are still puzzling out the rich text editor. <3
     
  3. Because Park Bo Gum is the answer to everything and I must spread the word. <3
     
    • Love Love x 3
    • Bucket of Rainbows Bucket of Rainbows x 1
  4. Thank you for this!! I've been wondering how to do some of this stuff!
     
    • Like Like x 1
  5. @Sen you are awesome for making this. Thank you so much.
     
    • Like Like x 1
  6. :easterhorror:I have learned a lot
     
    • Like Like x 1
  7. Hello. I am having trouble with the article text box and was wondering if I could have some help on that please?
     
  8. Ah, shoot. Didn't see this. What do you need help with? c:
     
  9. I'm trying to make it to where the border around it is in color and that the title in the article is whatever you want it to be. I think I'm confusing it with something else. I think it was fieldbox or something.
     
  10. TitleHello!

    Like this?

    Code:
    [fieldbox="Title, red, solid"]Hello![/fieldbox]
     
  11. Yeah. I was having trouble with that. How do you change from "Title" to another word such as "introduction"?
     
  12. Change the word 'Title' in the code to 'Introduction'.
     
  13. IntroductionKupo
    Like this?
     
    • Like Like x 1
  14. I uh-*bows*thank you for this
    [​IMG]
     
    • Love Love x 1
  15. @EvanTheIceDragonSlayer do you know the name of that anime? I wanna watch it! Mostly cause she had huge fun pillows but also cause it looks like it would be a great comedy romance x3
     
  16. What code languages are available on the forum? BB, HTML, CSS, Javascript? Any, all? Are there custom ones that act different from official coding that is found on places like w3schools.com


    does all of this apply to this site:

    https://www.metabunk.org/help/bb-codes
     
  17. The only code language available is bbcode (but fantastic codes can be made regardless) and you can find a list of available codes here: BB Codes | IwakuRoleplay.com
     
  18. I have actually realized now that I am MUCH better with coding on this site (lots of practice hours) That anything CSS will work so long as you move it over into BBCode Syntax. I've gotten MUCH better.
     
  19. I'm still having a bit of a hard time with this, I appears in as just the no slide text. I'm not sure how to actually add the content that I want to.
     
  20. Since the Rich Text Editor has been disabled for now, you'll have to use bbcode now. What do you need help with, specifically? :o