A Beginner's Guide to the Rich Text Editor!

Mu

it’s better then they’re a little bit of a loser.
Original poster
LURKER MEMBER
MYTHICAL MEMBER
Invitation Status
  1. Not accepting invites at this time
Posting Speed
  1. Slow As Molasses
Writing Levels
  1. Adept
  2. Adaptable
Preferred Character Gender
  1. Primarily Prefer Male
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

  • E46QbwA.png
    bold text -
    highlight the text you want to bold and press the button
  • N8vo75I.png[
    italic text
    - highlight the text you want to italic and press the button
  • mYQuIdC.png
    underlined text
    - highlight the text you want to underline and press the button
  • ktfcBhy.png
    strikethrough text
    - highlight the text you want to strikethrough and press the button. [NOW UNDER THE + ICON]
  • nzvFIWA.png
    left align text -
    highlight the text you want to align to the left and press the button, this is the default format of text
  • hzdNkdR.png
    right align text - highlight the text you want to align to the right and press the button
  • OUXu33p.png
    center align text - highlight the text you want to align in the center and press the button
  • 8MxgcQt.png
    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.

rh8xaJf.png

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.

6Nb8ugb.png


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
    • QnQfLmy.png
      This button is for creating dot point lists, very useful for summarizing huge paragraphs! This whole guide uses dot point lists!
    • wbIkwSo.png
      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?
    • 4SRHklu.png
      Creates an indent from where you highlighted the text. Can be used multiple times.
    • wC0UTzH.png
      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

  • 4nRPJZv.png
    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.
nrW3wKP.png



    • QrR7b62.png
      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:


    • JWUfq8Q.png
      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'.
    • 2mnCN5c.png
      Deletes the hyperlink.​

SYScxo5.png

Special Text


    • qKRJMjE.png
      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]
  • oD0kmSh.png
    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]
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.

Spoiler Tags

  • JBxz6xR.png
    Creates a bar spoiler. Click on the button and enter in the title to your spoiler. [NOW UNDER THE + ICON]
Goku is actually a Saiyan.
  • iBe7Vxq.png
    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.
 
Last edited:
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
 
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
Because Park Bo Gum is the answer to everything and I must spread the word. <3
 
Thank you for this!! I've been wondering how to do some of this stuff!
 
  • Like
Reactions: Mu
@Sen you are awesome for making this. Thank you so much.
 
  • Like
Reactions: Mu
Hello. I am having trouble with the article text box and was wondering if I could have some help on that please?
 
Hello. I am having trouble with the article text box and was wondering if I could have some help on that please?
Ah, shoot. Didn't see this. What do you need help with? c:
 
Ah, shoot. Didn't see this. What do you need help with? c:

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.
 
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.
[fieldbox="Title, red, solid"]Hello![/fieldbox]
Like this?

Code:
[fieldbox="Title, red, solid"]Hello![/fieldbox]
 
Yeah. I was having trouble with that. How do you change from "Title" to another word such as "introduction"?
 
Yeah. I was having trouble with that. How do you change from "Title" to another word such as "introduction"?
Change the word 'Title' in the code to 'Introduction'.
 
[fieldbox="Introduction, blue, solid"]Kupo[/fieldbox] Like this?
 
  • Like
Reactions: Mu
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
 
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:

BB Codes | Metabunk

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

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.
 
Fancy Add-ons!
  • 064ScI7.png
    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!
r7MfgQp.png
Eh2OVbe.png
KkhMdIX.png
  • npib4QA.png
    Creates an article (cute text box)
  • VdRGFTy.png
    Functions the same way as an article. Can be customised with more code to create colors.

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