Post by Tyler on Sept 10, 2018 20:32:08 GMT -5
Tables | Tables can be created using the "insert table" button at the top of the "create thread" and "reply" screens. The button looks like a small 3x3 grid. Tables can also be inserted by using the following code: [table][tbody][tr] This code will create a simple table with 2 rows and 4 cells. Each time a "tr" is used, a new row is created. Any "td" used before this tag is closed will be on the same row. "td" is used to create a new cell and content must be put inside of the "td" tag. If done correctly, you should end up with a table that looks like this:
To make the borders appear on the table add the following code to each of the td tags in the table: style="border:2px solid #ffffff;" The color can be changed by substituting the hex value for a color name or another hex value. The thickness of the border can be changed by editing the 2px. Tags for these tables must be closed in the same order they were opened - table, tr, td. Doing this in the wrong order will result in the forum trying to fix it and will add extra tags in an attempt to remedy the error. | ||||
Horizontal Rule / hr | The hr tag remains the same as it was on the previous forum. Simply place it where you want the horizontal rule to appear and continue writing your post/code. | ||||
Spoiler | Spoilers work a little differently on this forum. The following code can be used to create a basic spoiler:[spoiler]{[div style="padding:10px;border:solid 1px #fff; This creates a very simple spoiler with a white background. The background color can be edited by changing the hex value selected by "background-color:#fff;" A background image can also be applied to these spoilers by replacing "background-color:#fff" with "background-image:url(url) with the url in the parentheses being the image url you wish to use. For example: background-image:url(https://i.imgur.com/rTvk2md.png); This same image will need to be applied to the table that contains the spoiler's content if you intend on making it the background of the entire spoiler. This can be done by adding it to the end of the styling inside of the td tag (after the width:1000px;). | ||||
Line Break / br | The br tag is exactly the same as hitting the enter key and will convert to this once the post is made. It's your choice which you use. | ||||
Font Face/Size | Changing the font face is done by usng the font tag. Example:[font face="trebuchet ms"]Text[/font] To change the size of the text, simply add 'size' to that code. [font face="trebuchet ms" size="30px"]Text[/font] | ||||
Font Color | Adding a color to the font is done in the same way as the font face and size. Simply add 'color' to the previous code:[font face="trebuchet ms" size="30px" color="#fff"] | ||||
Bold | Creating bold text can be done by using the b tag:[b]Text[/b] | ||||
Italic | Creating italic text can be done by using the i tag:[i]Text[/i] | ||||
Strikethrough | Adding strikethrough to text can be done by using the s tag:[s]Text[/s] | ||||
Underline | Underlining text can be done by using the u tag:[u]Text[/u] | ||||
Superscript | Adding superscript to text can be done by using the sup tag:[sup]Text[/sup] | ||||
Subscript | Adding subscript to text can be done by using the sub tab:[sub]Text[/sub] | ||||
Justify Left/Center/Right | Justifying text is done by adding 'align' to the tag. Example:[div align="right"]Text[/div] | ||||
List | Creating lists is done by using the ul or ol tags. Each item in the list must be contained in an li tag. For example:[ul][li]Item 1[/li][li]Item 2[/li][/ul] This will create a simple unordered list of regular bullet points. An ordered list (ol) will create a numbered list: [ol][li]Item 1[/li][li]Item 2[/li][/ol] The li tag must be closed before opening another one to create another list item, and the li tag of the final item in the list MUST be closed before closing the list with /ul. Doing this in the wrong order will result in the forum attempting to remedy the problem and may cause issues with your code. The following styles can be applied to unordered lists:
The following styles can be applied to ordered lists:
To apply these styles use the code: [ul type="type"][li]item 1[/li][li]item 2[/li][/ul] Or [ol ty[e="type"][li]item 1[/li][li]item 2[/li][/ol] | ||||
Hyperlink | Adding a hyperlink to an image or text is simply done using the a tag. For example:[a href="http://www.google.com"]Google[/a] Will create a hyperlink that takes you to google. [a href="http://www.google.com"] Will display an image that when clicked takes you to google. | ||||
Image | Displaying an image can be done in two ways: using the img and /img tags with the url between the tags:[img src="https://i.imgur.com/rTvk2md.png"] This code will display an image, but will convert to the second way once the post is created: [img src="https://i.imgur.com/rTvk2md.png"] The second way is what you should look out for in your code when editing. Editing the height and width of an image can be done by adding the 'height' and 'width' properties to the img tag: [img src="https://i.imgur.com/rTvk2md.png" | ||||
Video | Adding a video can be done by using the video tag:[video src="https://www.youtube.com/watch?v=tCXGJQYZ9JA" | ||||
Text Shadow / Glow | Adding a text shadow is a nice way to add some creativity and color to posts. To do this all you need is the following code:style="text-shadow:#ffffff 0 0 10px;" This code can be added to divs (useful for when you need an image and text on the same row, or when you're adding this to a lot of text.) or the font tag when changing the color, size etc of your text. [div style="text-shadow:#ffffff 0 0 10px;"]Content[/div] |