Goatlings Wiki
Advertisement

For editing text, adding images, and everything in between Goatlings uses basic HTML (Hyper Text Markup Language), instead of using BBCode like a fair number of websites. As far as customizing goes, CSS (Cascading Style Sheets) are not translatable into any pages on site.

There is an official HTML guide for the forum on the site for you to view at any time.

Before You Start[]

Here are a few things you should know before continuing on.

  • As a security measure on site, anything written after certain special characters (such as %), or either of the angle brackets ( < or > ) will erase the content that follows it if they are written out alone. So if you write <3 on a forum post, for example, it will delete everything after the <.
  • Every HTML element uses a starting tag, content between the tags, and an end tag.
  • A starting tag is what tells the website what you want it to do to your content.
 Starting tag example: <CODE>
  • An ending tag is what tells the website what you want it to stop doing. Ending tags always have a slash (/) at the start.
 Ending tag example: </CODE>
  • Write the content you want modified by the code after the starting tag, and before the end tag.
  • So when it's written all together:
 <CODE>Content you want modified.</CODE>
  • While there are a couple of exceptions, it is important to always close your tags. Failing to do so can result in breaking your code, other members' posts, and pages.
  • It is not recommended to simply copy, and paste the codes shown. You can if you're learning what is needed to write out these codes, but it is better if you write out the code yourself to better understand them.
  • HTML can be used and works in mostly everywhere on the site, except in Goatmail messages.

General HTML[]

Paragraphs[]

For writing a long amount of text, you can use a Paragraph tag. The tag will separate and break up your text into a paragraph format.

<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae magna ultricies, pharetra dui id, consectetur leo. Vestibulum fringilla justo eu nunc ullamcorper malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit."</p>
<p>"Donec mi purus, vehicula sit amet sagittis at, accumsan ac quam. Etiam interdum tortor vitae urna scelerisque condimentum. Ut auctor nunc elit, ut pharetra orci volutpat a. In euismod eget elit vel varius. Sed porttitor elementum libero porta mattis."</p>

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae magna ultricies, pharetra dui id, consectetur leo. Vestibulum fringilla justo eu nunc ullamcorper malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit."

"Donec mi purus, vehicula sit amet sagittis at, accumsan ac quam. Etiam interdum tortor vitae urna scelerisque condimentum. Ut auctor nunc elit, ut pharetra orci volutpat a. In euismod eget elit vel varius. Sed porttitor elementum libero porta mattis."

Line Break[]

Line break tags start a new line space on a page. This tag does not need an end tag to use.

"An example first line sentence."
<br>"A second line that uses the break tag."
<br><br><br>"A third line that has three break tags before it."

"An example first line sentence."
"A second line that uses the break tag."


"A third line that has three break tags before it."

Bulleted List[]

Bulleted Lists help organize information in a listed format, featuring a circle bullet point.

<li>First item: Milk</li>
<li>Second item: Eggs</li>
<li>Third item: Flour</li>
  • First item: Milk
  • Second item: Eggs
  • Third item: Flour
  • Center Alignment[]

    A center tag aligns all the content within the tag to the middle of the page.

    <center>"Remember to close your tags!"</center>
    
    "Remember to close your tags!"

    Horizontal Line[]

    Horizontal lines are exactly that, horizontal lines that separate content. The horizontal line uses 100% of space within the available area width.

    <hr>
    "I'm between two horizontal lines!"
    <hr>
    "I'm below a horizontal line!"
    

    "I'm between two horizontal lines!"


    "I'm below a horizontal line!"

    Text Formatting[]

    Bolding, italicizing, strikethrough, and underlining are available text formatting you can do on Goatlings. Changing text color and sizing is currently not supported.

    Bold[]

    Bolding is useful when one needs to make something important. Text is unbolded automatically, but to bold you simply add the tags around the selected text:

    "<b>I am a bold goatling!</b> And I'm not!"
    

    "I am a bold goatling! And I'm not!"

    Italics[]

    Italics are normally used for another voice, thoughts, or mood, but use it to your hearts content.

    <i>"I really want another cheesy quesadilla..."</i>
    

    "I really want another cheesy quesadilla..."

    Strikethrough[]

    A strikethrough displays your text with a line going through it, indicating that the text shown is not accurate, true, or relevant.

     "<s>Cheesy quesadillas are rare and retired.</s> They are actually found in the General Foods shop."
    

    "Cheesy quesadillas are rare and retired. They are actually found in the General Foods shop."

    Underline[]

    Underlining is useful for emphasizing text.

    "It is important to <u>close your HTML tags.</u>"
    

    "It is important to close your HTML tags."

    Combining[]

    You can always combine text formats with other HTML tags. Remember, with each new tag you add to your layouts you must always close them when applicable.

    <center>"This text is <s>left-aligned</s> <b>centered</b>.<br> I can combine <u>all</u> the formats I've learned so far, because <b>I'm a <i>very</i> smart</b> goatling."</center>
    
    "This text is left-aligned centered.
    I can combine all the formats I've learned so far, because I'm a very smart goatling."

    Notice how you must close the tags in order of newest to oldest. So if you write a bold tag then add in italics, you would need to close the italics tag first, followed by closing the bold tag.

    Links[]

    To redirect your visitor to another page, you will need to use a link to direct them to it. Every page or file you open on the internet has a URL, or web address that you can find in the browser's address bar.

    For example, this page's URL is https://goatlings.fandom.com/wiki/HTML_Guide

    Once you locate that, sharing and creating links is easy! To use customized text for the link, you will need to use an <a> tag. The <a> tells your browser it is a link, but to tell the link where it's going you need to add href within the starting tag. So when it's fully written out it looks like this:

    <a href="URL">Customized Text</a>
    

    It is important to note that you must use quotation marks before and after the URL, or else your link will break. Don't forget to close your tag, or the rest of the text will continue being highlighted as a link. Now let's use our wiki link as a working example:

    <a href="https://goatlings.fandom.com/wiki/HTML_Guide">Goatlings Fandom HTML Guide</a>
    

    Goatlings Fandom HTML Guide

    Opening links usually sends you directly to the page on the tab you're using, but if you would like the link to open up a new tab instead, you will need to write in target="new" within the tag to guarantee it.

    <a href="https://www.goatlings.com/pet/u/1/" target="new">Look at this cute goatling!</a>
    

    Look at this cute goatling!

    And if you're using and want to use a Goatlings URL, you can shorten the URL to save limited character space. To shorten it, you can simply remove https://www.goatlings.com out of any local Goatlings URL.

    <a href="/pet/u/1/">Look at this cute goatling!</a>
    

    And remember: Posting harmful, malicious links on site will result in a ban. Please be cautious when clicking links anywhere, and everywhere.

    Images[]

    To display an image on a page, you will need to upload the image to a website that can host your image, and provide a URL/address to the image file itself. This article will provide a list for you to browse, and get you started with image hosting sites, but it is also recommended you do research on what works best for you.

    Once you upload an image you can get the URL/address by right clicking on the uploaded image. If you're on mobile or tablet, press and hold the image, and then press copy. The end of the URL must end with a .gif, .jpg, or .png to get the code to properly work. Let's use the Yellow Star Mellow item's URL on Goatlings as an example, which was grabbed by right clicking on the image.

    https://www.goatlings.com/images/items/YellowStarMallow.gif


    After getting the image URL we can now start using the <img> tag. The <img> tag tells the browser it's going to display an image, but you need to add src to tell the browser which image it will be displaying. Image tags do not need nor have an end tag, so the code written out fully should look like this:

    <img src="imageURL.jpg">
    

    Just like links, it is important to write quotation marks before and after the image URL, or else your image code will break. Now let's use the Yellow Star Mallow URL above as an example:

    <img src="https://www.goatlings.com/images/items/YellowStarMallow.gif">
    
    YellowStarMallow
    Ta-da! Now you can post images!

    Sizing[]

    You can change the size of an image using HTML by simply adding width="number" and/or height="number" within the tag. Replace the wording for number with actual numbers. Your standard code should look like one of the following:

     <img src="imageURL.png" width="number">
    <img src="imageURL.png" height="number">
    <img src="imageURL.png" width="number" height="number">

    Now let's use and resize the Jestling image found on site using only the width.

    <img src="https://www.goatlings.com/images/pets/Jestling.gif" width="100">
    
    Jestling-2
    And it should look like this!

    It's important to resize images if they're too big, and cause the page to stretch out! For reference the average forum width is 520px, club forums are 320px, and shops, galleries, and profiles are all at a width of 760px.

    Linking[]

    You can use images as links, instead of customized text. Use your standard link tag, but replace the customized text with an image instead. Don't forget to close the link tag. Here is what the standard code looks like for example:

    <a href="SiteURL"><img src="ImageURL.gif"></a>
    

    Now let's use the Sticky Goat Toy, and link it to the Arcade.

    <a href="https://www.goatlings.com/arcade"><img src="https://www.goatlings.com/images/items/StickyGoatToy.gif"></a>
    
    StickyGoatToy
    Nice! Now you should be able to go to the Arcade by clicking the image!

    Tables[]

    Tables can be intimidating because of how complicated they can look, but can be beneficial once you take the time to learn. Despite being customizable, tables on Goatlings are still limited. A table is normally used to help arrange, and organize information into rows and columns.

    When working with tables, it is important to think of building it like a journal. The <table> tag tells the browser you are starting a new table, think of it as a cover that holds it all together. This tag needs to be closed at the very end with </table>.

     <table></table>
    

    In between the table tags you will need to start a new table row, or <tr>, which needs to be closed with </tr>. A table row sits horizontally, and you can add as many rows as you like. Think of it as a page of the book, where you can add as many pages as you'd like.

     <table><tr></tr></table>
    

    The table data cell tag <td>, or cell for short, sits in between the row tags. This can be thought of as lines on the paper that you can write on. You can add as many cells as you'd like, which will align with each other within a row, but they need to be equally distributed among all your rows. Each new cell needs to be closed with </td> before starting a new one, and right before the end row tag.

    If you've followed along, it should look similar to this:

     <table><tr><td>This is where you will write!</td></tr></table>
    
    This is where you will write!

    Which gives you a very basic one column table. Goatlings will not show a nice little border like above, but you can add one yourself by writing in border="number" in the table tag, and replace the number wording with an actual number.

    <table border="1"><tr><td>This is where you will write!</td></tr></table>
    
    And it should look similar to the first table example.


    Like mentioned above, you can add as many cells and rows as you'd like. When adding cells to a row, make sure to add the same number of cells to the rest of your rows. Let's add another row, along with 2 more cells as an example.

    <table><tr><td>First Cell</td>
    <td>Second Cell</td>
    <td>Third Cell</td></tr><tr><td>Fourth Cell</td>
    <td>Fifth Cell</td>
    <td>Sixth Cell</td></tr></table>
    First Cell Second Cell Third Cell
    Fourth Cell Fifth Cell Sixth Cell

    With the knowledge so far, you should be able to make very basic tables.

    Sizing[]

    If you've noticed, tables and cells will automatically stretch out with the content inside. You can adjust the width and height of tables, rows, or cells by adding a width="number" and/or height="number" within any of the starting tags.

    So your starting tags should look similar to any of these:

    <table width="500"><tr width="400"><td width="250">

    <table height="500"><tr height="400"><td height="250">

    <table width="500" height="500"><tr width="400" height="400"><td width="250" height="400">

    You do not have to place size adjustments in all of your tags. If you write it in the table tag only, the rows and cells will automatically adjust themselves equally. Table cells will always be the same size within the same column. For instance if one cell is 200 pixels wide, the cells below it will also be 200 pixels wide. The same rules are applied to the height of cells within the same row.

    Let's put this into practice and adjust the table width, the height of 2 rows, and the width of the cells.

    <table width="500"><tr height="40">
    <td width="200">First Cell</td>
    <td width="300">Second Cell</td></tr>
    <tr height="100"><td>Third Cell</td>
    <td>Fourth Cell</td></tr></table>
    First Cell Second Cell
    Third Cell Fourth Cell

    Despite writing in sizes, content within can still stretch out your tables if they are too big.

    Padding And Spacing[]

    Content within cells, and cells themselves, have no spacing in between automatically. If you want the cells themselves to have spacing between each other, you would add cellspacing="number". If you want to add spacing within the cells, you would add cellpadding="number". Either or both of these properties will need to be added to the starting table tag itself.

    <table cellspacing="number">

    <table cellpadding="number">

    Let's see how cell spacing looks on a basic table:

    <table width="400" cellspacing="15"><tr><td>First Cell</td>
    <td>Second Cell</td></tr></table>
    First CellSecond Cell

    Just like that we can see space was added between the cells, with none of them touching borders.

    Now let's see how cell padding looks on a basic table:

    <table width="400" cellpadding="15"><tr><td>First Cell</td>
    <td>Second Cell</td></tr></table>
    First CellSecond Cell

    Padding adds spacing within the cells, which makes the content inside never touch the edges of the cell.

    And together for scientific purposes:

    <table width="400" cellspacing="15" cellpadding="15"><tr><td>First Cell</td>
    <td>Second Cell</td></tr></table>
    First CellSecond Cell

    Padding and spacing allows the content you have inside to "breathe", and gives your table a more organized look.

    Alignment[]

    Cells have a property that allows you to horizontally align all the content inside by adding the align="alignment" within the starting data cell tag. While the left alignment is automatically used as a default, you can also use the right, center, or justify alignments for your cells. Your code should look like this:

    <td align="alignment">Write here</td>
    

    Now let's see how all the alignments look within one table:

    <table width="400" cellpadding="10"><tr><td align="right">Right Alignment</td>
    <td align="center">Center Align</td></tr>
    <tr><td align="justify">Third Cell Justify Alignment</td>
    <td>Default Left Alignment</td></tr></table>
    Right AlignmentCenter Align
    Third Cell Justify AlignmentDefault Left Alignment

    Background Color[]

    You can customize your tables even further by adding color to it! Colorize your tables, rows, and cells with bgcolor="color", and replace the quoted wording with an actual color or by using a HEX color. It is recommended using a HEX color instead of simply writing in a color that will just give you a default hue. So your code should be similar to one of the following:

    <table bgcolor="red">

    <table bgcolor="dddddd">

    If you only add color to your table tag, the whole table will be the color of your choosing. Let's create a simple table with a pink background.

    <table width="300" bgcolor="pink" cellpadding="10" cellspacing="5"><tr><td align="center">Pink Table Background</td></tr></table>
    
    Pink Table Background

    You can do the same with your table rows, making all the cells within the row the same color. Now let's create a table with a blue background while giving it two rows with two different colors.

    <table width="300" bgcolor="blue" cellpadding="10" cellspacing="5"><tr bgcolor="orange"><td>First Row</td>
    <td>Default Orange Background</td></tr>
    <tr bgcolor="d8ffa1"><td>Second Row</td>
    <td>Green Hex Background</td></tr></table>
    First RowDefault Orange Background
    Second RowGreen Hex Background

    Giving the table a background color creates an illusion of a border around your cells.

    If you prefer having your data cells having their own individual colors, you can add a background color to each of your data cell tags. If you do not add a background color to your data cell, it will use the default color of your row or table.

    <table width="400" bgcolor="blue" cellpadding="10" cellspacing="5"><tr>
    <td bgcolor="ffb2a1">First Cell</td>
    <td bgcolor="a1ffba">Second Cell</td>
    <td bgcolor="edccff">Third Cell</td></tr></table>
    First CellSecond CellThird Cell


    When picking colors for your backgrounds it's important to pick colors that allow your text to be legible, since text currently cannot be colorized with codes.

    Advertisement