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

Discussion in 'ROLEPLAY MECHANICS' 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!

    CONTENTS:
    - Text
    - Text Transformation
    - Formatting
    - Media
    - Symbols
    - Fancy Text
    - Spoiler Tags
    - Fancy Add-ons!

    - Extra Important Buttons!

    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
    • [​IMG] erases all the transformation you have made to plain text
    • [​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 'font family' to open the drop down menu and select your desired font.​
    [​IMG]
    This text is using the Arial Black font.
    This text is using the Book Antiqua font.
    This text is using the Courier New font.

    • Click 'font size' 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
    • [​IMG] Highlight the text you wish to change the color of and click on the button. You will be shown a menu that looks like this
    [​IMG]
    You can also choose your own colors by clicking on 'custom..'!
    [​IMG]
    Find the color you wish to use that is not part of the default palette using 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!
    Convert Hex color #603b30 to Rgb, Pantone, RAL, HSL, HSV, HSB, JSON. Get color scheme. - All around converter from RGB to Pantome to hex codes!
    RESOURCE - Colour Guide! - A guide to see all friendly colors for the themes of IwakuRoleplay!
    • [​IMG] This button is used for highlighting your text! It works the same way as changing the color text!​
    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.
    • [​IMG] Highlight your text and click to create a subscript
    • [​IMG] Highlight your text and click to creates a superscript
    • [​IMG] The equivalent of the 'tab' key, creates a space.
    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]

    You will see:
    Code:
    [media=youtube]special code here[/media]

    And end up with:


    • [​IMG] Creates a table! You can make them as big as you like as long as they are smaller 10x10. However, you are free to add more cells if you wish.

    [​IMG]
    • [​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]
    Symbols
    • [​IMG] [​IMG] Click these buttons to find and use a collection of cute pixel gifs and smilies! :jump:
    • [​IMG] Contains a list of special symbols not found on most keyboards! Ηëζζ⊗
    • [​IMG] Mess around with giant symbols! Choose from a variety of symbols and change their size, color and position!
    Special Text

    • [​IMG] Allows you to enter in raw code. Accepts general codes, HTML and PHP. It looks like this:
    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.
    • [​IMG]Displays mathematical content or graphics using lateX. Entering c=\sqrt{a^2+b^2} will give you:


    Spoiler Tags

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

    • [​IMG]Creates a spoili.
    Light Yagami likes potato chips.
    • [​IMG]Creates a spoilerbb.
    I am a spoiler.
    I don't have a life.


    Fancy Add-ons!

    • [​IMG] Allows the creation of slides and tabs to help organize your text! You can choose from an Accordion, which are drop down tabs. Tabs, which work like any table. And a slideshow! You can customize the size and the alignment of text, as well as write in what you want in your slides!
    [​IMG][​IMG][​IMG]
    • [​IMG] Creates an article (cute text box)
    • [​IMG] Functions the same way as an article. Can be customised with more code to create colors.
    Article: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus luctus nisi eget semper. Maecenas lobortis tristique lectus eu venenatis.

    • [​IMG] The button creator! Use this to create fancy looking hyperlinks to other websites or to other posts! Choose a default color, or you can choose your own colors by clicking on a button style and then the black box on the bottom left corner. It uses the same system as the text color changer and accepts RGB and hex codes!
    I am a button!

    Extra Important Buttons!
    • [​IMG] Allows you to save a draft of your Rich Editor post or restore your last post.​
    • [​IMG] Shows the raw code of your post. Rich Text Editor does all the work for you, but if you want to get into the nitty gritty of the coding to do some fancy work yourself, click on this button to show you everything.​
    • [​IMG] Enlarges your editor to full screen!​
    Don't know how to roleplay on Iwaku? Click on this!
     
    • Love x 14
    • Useful x 8
    • Thank x 7
    • Like x 3
    • Bucket of Rainbows x 2
    • 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 1
    • 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. Change the word 'Title' in the code to 'Introduction'.
     
  14. IntroductionKupo
    Like this?
     
    • Like Like x 1