Thread Tools

Head Librarian
Reading is fundamental
NPC
3311.64
Head Librarian is offline
 
#1
Old 12-01-2013, 12:04 AM

Wondering how to insert an image into your post? Or is the image too huge and stretching the page or taking forever to load? Wanting to wrap a code into a box but it's not turning out correctly for you? Having problems with images, URLs, quote boxes and post formatting in general? Worry not, this is where this thread comes in.

If you're looking for how to make an image map, check out this great tutorial here.


Navigation

  • Images & Thumbnails
  • Linking
  • Font Sizes, Colors & Text Formatting
  • Horizontal Rule/Lines & Quote Boxes
  • Lists
  • Hidden Text and Spoilers


Last edited by Car'a'Carn; 12-13-2017 at 09:26 PM..

Head Librarian
Reading is fundamental
NPC
3311.64
Head Librarian is offline
 
#2
Old 12-01-2013, 12:06 AM

Images

Inserting an image into a post is easy as pie.
First, click on the 'insert image' icon in your reply box.



A pop-up box will appear like so. Paste the image link inside and click OK.
>

OR instead of clicking on the icon, you can just type the [IMG][/IMG] tags directly into your post and insert the image URL in the middle.

Both methods will turn out looking something like this.




And it'll show up like below. Didn't I tell you? Easy as pie.






Thumbnails

If your image is too huge and stretching the page, don't worry. There's a simple way for you to show a smaller preview of your image that links to the larger one.

By using the [THUMB][/THUMB] tags, you can do exactly that!

HTML Code:
[thumb]http://i.imgur.com/sQtobeu.png[/thumb]
Click on thumbnail for full view

As you can see, the preview is in a much more manageable size. Clicking on it will bring you to the original image.



Last edited by ~LONGCAT~; 12-04-2015 at 07:25 PM..

Head Librarian
Reading is fundamental
NPC
3311.64
Head Librarian is offline
 
#3
Old 12-01-2013, 12:09 AM

Linking

There are times you may want to link people to another place on the web. To do that, you can turn either text or an image into a link. It's really simple!

HTML Code:
[url="LINKHERE"]LINK TEXT/IMAGE/THUMB[/url]
For text links, all you have to do is insert the text you want to display in between the [URL] tags.
I'll be linking to the image of the pie used in the post above.

HTML Code:
[url="http://www.menewsha.com/img/23213/7f9fb181b678f2237ecfcb5bba445ba5.jpg"]The pie is not a lie.[/url]
The pie is not a lie.


To turn an image into a link, wrap the image codes with the [URL] tags like so:

HTML Code:
[url="http://youtu.be/z9Uz1icjwrM"][IMG]http://www.menewsha.com/img/23213/7f9fb181b678f2237ecfcb5bba445ba5.jpg[/IMG][/url]



I've linked a Youtube video using the image of the pie above. Check it out by clicking on it!




E-mail Links

You can even post a link so people can send you an e-mail. Clicking on the link will open up their default e-mail program which will automatically have your e-mail address as the receiver.

The codes will look something like this:

HTML Code:
[[email protected]]Click this link to email me![/email]

Let's use Menewsha's Support as an example.

HTML Code:
[[email protected]]Click this link to email Support![/email]
Click this link to email Support!

(Please don't actually e-mail Mene Support unless you really need help from Support.
The Assistant Administrators will be knocking on my door otherwise. )





Linking to Threads

The easiest and laziest way is to just copy and paste the whole URL of the thread and it'll automatically parse in the post as an link. Sometimes, if you're lucky (like below), the thread title will automatically appear to link to it.

http://www.menewsha.com/forum/main/i...iler-bars.html


Alternatively, instead of copying and pasting the whole URL to link to your thread, you can use this handy but mostly unknown method to do so.

Take a look at the URL of the thread below. You'll see that there's a set of numbers, 206750, right before the name of the thread.

Quote:
http://www.menewsha.com/forum/main/information-desk/resource-center/206750-coding-how-imgs-urls-post-formatting-quotes-lists-spoiler-bars.html

Using that set of numbers, wrap it with the [THREAD][/THREAD] tags.
It'll automatically link to the thread as an URL.

HTML Code:
[thread]206750[/thread]
https://www.menewsha.com/forum/showthread.php?t=206750


If you want it to be some text instead of an URL:

HTML Code:
[thread=threadnumber]text[/thread]
HTML Code:
[thread=206750]This is a link to the thread.[/thread]
This is a link to the thread.


And there we go!




Linking to Posts

Linking to a specific post is also pretty simple. On the top right corner of every post, the post number and permanent link (permalink) to the thread are displayed as links.



The post number brings you to a link with the post isolated from the thread whereas the permanent link brings you to where the post is positioned in the thread itself.

Right-click on either link, whichever you prefer, and then click on "Copy Link Location" or "Copy link address" depending on which browser you use. After that, just paste the link wherever you want it.

Alternately, we also have [POST][/POST] tags, which work the same way as the [THREAD][/THREAD] tags above.

To find your post number, click the "Post number" link in the upper right corner of your post and look at the URL, like the one below. In this example, the post number is 1772296531

Quote:
http://www.menewsha.com/forum/1772296531-post1.html
To link to the post, just wrap your post number in the [POST][/POST] tags and it will appear as a URL:
HTML Code:
[post]1772296531[/post]
https://www.menewsha.com/forum/showthread.php?p=1772296531

If you want it to be some text instead of an URL:

HTML Code:
[post=postnumber]text[/post]
HTML Code:
[post=1772296531]This is a link to the post.[/post]
This is a link to the post.

The Post and Thread tags are both handy ways to tidy up the code in your posts. Since they use way fewer characters than ordinary URLs, they are also very useful for links in your signature!


Last edited by Chexala; 02-22-2016 at 06:05 PM..

Head Librarian
Reading is fundamental
NPC
3311.64
Head Librarian is offline
 
#4
Old 12-01-2013, 12:10 AM

Font Sizes

To change the font size of your text, the [SIZE="sizenumber"][/SIZE] tags are used.

Font sizes can range from size 1 (the smallest) up to size 7 (the largest allowed). Any size larger than that will automatically cap at 7. The default font size here in Menewsha is 2.

You can go into the 'Go Advanced' page and use the handy coding icons or type the codes into the post directly.




Here are some examples below:

HTML Code:
[SIZE="1"]This is a size 1 font.[/SIZE]
This is a size 1 font.

HTML Code:
[SIZE="24"]This is a size 7 font.[/SIZE]
This is a size 7 font.




Font Colors

There are times you may want to highlight certain parts of your post without spamming the bold and italics, or perhaps you just want to make your post look a little less boring by giving it a splash of color.

For this, the [COLOR="colorname/hexcode"][/COLOR] tags are used.

Clicking on the nifty icon for font color will give you a ready selection to use.



Selecting any of them will generate a code with the color of your choice like so:

HTML Code:
[COLOR="DarkOrchid"]This is the DarkOrchid color![/COLOR]
This is the DarkOrchid color!


Notice that it shows the name of the color. Alternatively, you can also use the color's hexadecimal code, or hex code, instead of their name. They'll turn out about the same.

HTML Code:
[COLOR="#9932CC"]The hex code for DarkOrchid is #9932CC.[/COLOR]
The hex code for DarkOrchid is #9932CC.


For a list of color names and hex codes supported by HTML (and Menewsha), visit W3Schools's HTML Color Names.




Text Formatting

There are many ways to format your text to make your post look more interesting. Below are a few of the most commonly used codes for HTML formatting across the internet.

Bold - [B][/B]
Italics - [I][/I]
Underline - [U][/U]
Strike - [STRIKE][/STRIKE]


In action, they'll look something like below. I made the sample text larger so you can see the formatting better.

Quote:
It's very easy to [B]bold[/B], [I]italicize[/I], [U]underline[/U] or [STRIKE]strike[/STRIKE] some text.
It's very easy to bold, italicize, underline or strike some text.




Text formatting is not just limited to what is shown above! You can also format the position of your text.
In Menewsha, we are given the options for left (default), right, and center.

The codes for them are exactly what they look like.

Code:
[LEFT]This text is aligned left.[/LEFT]
[RIGHT]This text is aligned right.[/RIGHT]
[CENTER]This text is aligned center.[/CENTER]
This text is aligned left.
This text is aligned right.
This text is aligned center.




One other thing you can do with text formatting is the justify alignment.
To justify text is to adjust a whole line or paragraph of text so that it fills a space evenly, like forming them into a neat, even block.

Wrap the [JUSTIFY][/JUSTIFY] tags around the text you want to justify.

Without justify:
Quote:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec turpis quam, quis suscipit est. Morbi ultrices cursus lorem, vel dictum quam elementum vitae. Aliquam quis lacus sapien, eget porttitor dui. Donec elementum sagittis quam, quis suscipit orci sodales ut. Aliquam pulvinar justo at eros condimentum ultrices. Vestibulum quis imperdiet nunc. Sed vitae euismod erat. Nunc imperdiet nulla eu eros accumsan ut euismod elit faucibus. Curabitur tristique augue eget magna congue sagittis.

Duis commodo rhoncus consequat. In eu varius lectus. In volutpat lorem nec metus ultrices hendrerit vitae id sem. Aenean ullamcorper iaculis neque, quis convallis est viverra ac. Integer vitae sem in quam porttitor dapibus ultricies vitae felis.
With justify:
Quote:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec turpis quam, quis suscipit est. Morbi ultrices cursus lorem, vel dictum quam elementum vitae. Aliquam quis lacus sapien, eget porttitor dui. Donec elementum sagittis quam, quis suscipit orci sodales ut. Aliquam pulvinar justo at eros condimentum ultrices. Vestibulum quis imperdiet nunc. Sed vitae euismod erat. Nunc imperdiet nulla eu eros accumsan ut euismod elit faucibus. Curabitur tristique augue eget magna congue sagittis.

Duis commodo rhoncus consequat. In eu varius lectus. In volutpat lorem nec metus ultrices hendrerit vitae id sem. Aenean ullamcorper iaculis neque, quis convallis est viverra ac. Integer vitae sem in quam porttitor dapibus ultricies vitae felis.


Last edited by Shadami; 05-18-2017 at 06:23 PM..

Head Librarian
Reading is fundamental
NPC
3311.64
Head Librarian is offline
 
#5
Old 12-01-2013, 12:12 AM

Horizontal Rule / Lines

There are two ways to create line breaks here in Menewsha.

The first is the horizontal rule, which are the [HR][/HR] tags. It gives you a light gray line when used.


^ It's right up there. Can you see it? Squint if you can't.

The second method, which uses the [LINE][/LINE] tags, allows you to use different colors for your lines.

For example, if you want a green line, insert the name of the color in between the tags like so:

HTML Code:
[LINE]green[/LINE]
And it'll turn out like below:


Just like formatting font colors, you can also use hex codes instead of the color names.
For a list of color names and hex codes supported by HTML (and Menewsha), visit W3Schools's HTML Color Names.



Quote Boxes

There are several ways you can wrap text in a box, but I would recommend just these two: [HTML] and [QUOTE]

What's the difference?
The [HTML][/HTML] tags disables parsing, so this is what I'd use if I want to fully display codes.
The [QUOTE][/QUOTE] tags automatically parse text, so text wrapped in these codes will show up like normal.

To properly show how they differ, here's an example using the text formatting sample:

HTML Code:
It's very easy to [B]bold[/B], [I]italicize[/I], [U]underline[/U] or [STRIKE]strike[/STRIKE] some text.
Quote:
It's very easy to bold, italicize, underline or strike some text.

Head Librarian
Reading is fundamental
NPC
3311.64
Head Librarian is offline
 
#6
Old 12-01-2013, 12:12 AM

Lists

There are many ways to make lists. The basic format for a list is by using the [LIST][/LIST] tags. In between these tags, a bracketed asterisk [*] is placed at the start of each item listed.

Here is how it would look like:

HTML Code:
[LIST]
[*]Apples
[*]Oranges
[*]Pears
[*]Grapes
[*]Watermelon
[*]Pineapple
[/LIST]
  • Apples
  • Oranges
  • Pears
  • Grapes
  • Watermelon
  • Pineapple

If you want a new line but not a new bullet point, exclude the [*] from the line.

HTML Code:
[LIST]
[*]Apples
Oranges
Pears
[*]Grapes
[*]Watermelon
Pineapple
[/LIST]
  • Apples
    Oranges
    Pears
  • Grapes
  • Watermelon
    Pineapple

If you want your list to be numbered or in alphabetical order instead of bullets,
alter the LIST tag to [LIST=1] or [LIST=a] respectively.

HTML Code:
[LIST=1]
[*]Apples
[*]Oranges
[*]Pears
[*]Grapes
[*]Watermelon
[*]Pineapple
[/LIST]
  1. Apples
  2. Oranges
  3. Pears
  4. Grapes
  5. Watermelon
  6. Pineapple

HTML Code:
[LIST=a]
[*]Apples
[*]Oranges
[*]Pears
[*]Grapes
[*]Watermelon
[*]Pineapple
[/LIST]
  1. Apples
  2. Oranges
  3. Pears
  4. Grapes
  5. Watermelon
  6. Pineapple

You can also create lists inside lists. It's really fun. Try it out!

HTML Code:
[LIST]
[*]Apples
[*]Oranges
[LIST][*]Pears
[*]Grapes
[LIST][*]Watermelon
[*]Pineapple
[/LIST]
  • Apples
  • Oranges
    • Pears
    • Grapes
      • Watermelon
      • Pineapple


Head Librarian
Reading is fundamental
NPC
3311.64
Head Librarian is offline
 
#7
Old 12-01-2013, 12:13 AM

Hidden Text and Spoilers

Are there times you've just finished watching a movie or playing a new game and is so excited you just HAVE to talk about it but do not want to spoil the fun for everyone? This is where the [HIDE][/HIDE] tags come in.

Wrapping your text in the [HIDE][/HIDE] tags will hide them in a gray bar. The bar will expand when you click on it, and close when you click on it again. By default, the word "SPOILER" automatically appears in the bar.

HTML Code:
[hide]I love apple pie![/hide]

SPOILERX

I love apple pie!


To customize the words in the bar, the [HIDETITLE="titlename"][/HIDETITLE] tags are used instead.

HTML Code:
[hidetitle="Don't look in here."]I love apple pie![/hidetitle]

Don't look in here.X

I love apple pie!




Last edited by Iro; 11-21-2014 at 07:47 AM..

 


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools

 
Forum Jump

no new posts