Animal Groups Roleplay Wiki
Advertisement
Site-background-light
A book.png20180301-18-3yhw65 (1)Wikitext Guide For Beginners
Templeofziosbannerbywildworks

Welcome to the Wikitext Guide For Beginners, an in-depth guide explaining the kinks and curves of Wikitext coding. Have you ever struggled trying to figure out how to code, or you simply can't remember that one code for a DIV class? Well, this guide is for you. While there are already a multitude of helpful guides on the wiki already, this guide was created for the purpose of not only teaching you the code but helping you to understand what you're putting down. If you have any suggestions, feel free to voice them to the editor/coder of the guide. Good luck coding!

Switching to Source Mode and Turning Off WYSIWYG[]

If you've just now jumped into wikitext coding, I welcome you! But, if you've already delved into coding before and simply looking for a small code, feel free to skip this part.

Starting with wikitext isn't always easy. First of all, while it is a version of HTML, it's also very different. Wikitext uses tables that start with {|, unlike most HTML versions, but we'll get into tables later. Secondly, coding isn't going to be a breeze from the very beginning. It's always going to be frustrating, but here I'll teach you ways to get rid of frustrating coding, or finding your way around it! Let's start with opening up into Source Mode. On Articles, you'll want to open up your coding like this:


  1. Once you've opened/created your article, you'll want to bring your cursor over to the "Edit" icon in the top-right corner.
  2. After you've selected "Edit", you'll notice the page (Image 2) will look odd and dysfunctional comparatively to your before, beautifully crafted page. This is because you're in visual editor. Visual editor is purposed for strict, text-only pages or for minor edits. To exit visual editor, you'll want to select "Visual Editor" in the top-right corner to toggle down a menu beneath the icon.
  3. After toggling down the menu, you'll want to click on "Source Editing".
  4. All done! You should now be able to type in our wikitext-based format and edit your page however you please.

Next, let's deal with those frustrating spaces that randomly appear during coding. What we consider Visual Mode, is more commonly called WYSIWYG. WYSIWYG is formatting meant to edit text on a screen, like you'd see in Word and Google Docs, so it's no surprise to find it here on FANDOM. WYSIWYG is the cause of your random spaces in coding. When you open up your page's edit, it immediately opens up Visual Mode first instead of Source Mode. Visual Mode isn't meant for coding. When you switch from Visual Mode to Source Mode, the Visual Mode tries to "fix your coding" or rather "help you." It's your confused friend. It'll add unnecessary tags and clog up your coding with extra spaces, too. I suggest my personal best friend, __NOWYSIWYG__. All you have to do is add that little guy to the top or bottom of your page's coding, and he'll become your best friend forever! He's an embedded code, so you won't have to worry about seeing him on your page. The only con I find is: sometimes he can get a little upset if you misuse him in a comment or thread. Otherwise, I think you'd become very attached to him.

While there is a way to disable Visual Mode through your preferences, I find using __NOWYSIWYG__ is just a whole lot easier. There are certain times when I do like to use visual mode. In those moments, I'd prefer not to change my preference settings.

Using Tags (And How to Use Them Correctly)[]

There is a multitude of tags out in the HTML world, but here are the tags that you are (really) only going to use in Wikitext. Every tag comes with its attributes and body code. The attributes start the tag's body code, while the body code tells the tag what to do. If you want more info on how they work in the HTML world, feel free to check out Fubsy's Coding Guide Neo on Wikitext Basics

<center> </center>
Lorem ipsum dolor sit amet, consectetur adipi- scing elit.

<center> is pretty self explanatory. It, of course, centers everything in your page. If you ever forget to close the tag, the comments beneath it will all center and look pretty weird. There have been some who have purposely left the tag unclosed for the purpose of centering the comments, but it does tend to get a little weird. It's suggested to just make sure to close them accordingly.

<span style="insert"> </span>
Lorem ipsum dolor sit amet, consectetur adipi- scing elit. Fusce vel laoreet orci.

(example above has color:DarkOliveGreen;font-family:lucida grande)
<span> is a formatting tag meant to last for one line of coding or text. It can be used for titles positioning a segment of text/code. It's a pretty simple code, the only complications is when <span> meets WYSIWYG. WYSIWYG likes to use <span> to clog up coding. You'll see more later down the line on how to use <span> without crowding coding. If a <div> is already overriding text, <span> has trouble formatting it.

<p style="insert"> </p>

Lorem ipsum dolor sit amet, consectetur adipi- scing elit. Fusce vel laoreet orci. In eget auctor mi. Maecenas ipsum purus, imperdiet ullamcor- per quam sit amet, malesuada semper sem. Duis elit quam, sagittis sed justo at, condimentum porttitor velit. Vivamus rutrum a enim eget molestie. Sed pharetra diam metus, id ornare dolor lobortis quis. Integer gravida, ipsum non venenatis pretium, elit mauris ultrices neque, quis tincidunt arcu velit sed dolor. Suspendisse non lacus at orci hendrerit tincidunt. Quisque consequat faucibus luctus. Ut sollicitudin arcu mauris, non dictum est viverra vitae.

(example above has color:goldenrod;font-family:Comical)
<p> really serves very little purpose besides formatting paragraphs. It works similarly to the <span>, but it's very troubling especially if you use WYSIWYG. If you ever end up using too many <span>s, you can always use <p>, but you absolutely have to make sure to close it. If you ever forget to close it, it can end up clogging your page trying to fix itself. They aren't as sturdy as the <span>, but it can always come in handy if you absolutely need it. (Very unsuggested)

<div style="insert"> </div>

Lorem ipsum dolor sit amet, consectetur adipi- scing elit. Fusce vel laoreet orci. In eget auctor mi. Maecenas ipsum purus, imperdiet ullamcor- per quam sit amet, malesuada semper sem. Duis elit quam, sagittis sed justo at, condimentum porttitor velit. Vivamus rutrum a enim eget molestie. Sed pharetra diam metus, id ornare dolor lobortis quis. Integer gravida, ipsum non venenatis pretium, elit mauris ultrices neque, quis tincidunt arcu velit sed dolor. Suspendisse non lacus at orci hendrerit tincidunt. Quisque consequat faucibus luctus. Ut sollicitudin arcu mauris, non dictum est viverra vitae.

(example above has color:brown;font-family:Futura)
<div> will be your absolute best friend in coding. <div>s are used to large sections of coding, and it can overlap almost any code (unless a certain tag was applied to certain text). These tags always take up one line of space, so you cannot combine/put together a <div> with another tag because there won't be any space (You'd have to use a table) In sense of formatting tags, <div> tags almost always come first. Here's a suggestion to what order you'd use tags: div > p > span. (Although <p> is not suggested).
I commonly use <div>s to alter the text for an entire page if I want a consistent font and color. For example, this current guide uses: <div style="font-family:arial narrow;color:#4e2e1a"> at the very top of the page with a </div> at the very bottom of the page.

Don't:

<div style="border:1px solid #000;border-radius:56px;width:680px;height:200px;overflow:hidden"> </div>[[File:Placeholder.png|center|700px]]
<span style="font-family:elephant;font-size:15pt;color:DarkOliveGreen"> </span> text

Do:

 <div style="border:1px solid #000;border-radius:56px;width:680px;height:200px;overflow:hidden">[[File:Placeholder.png|center|700px]]</div>
<span style="font-family:elephant;font-size:15pt;color:DarkOliveGreen"> text</span>

Tricks To Using Images & Files[]

Uploading an Image Through Selectable Icons
  1. Click upload photo icon in the selectable table underneath your article's name
  2. You may either select a pre-existing file which you or another contributor has uploaded to the wiki, or you may click "Upload" to select your own file.
  3. Click "Select A File" and select the media file or drag the media file from your device that you wish to upload.
  4. Select the checkbox next to "I agree to image policy and terms of use" and then click "Upload" in the top-right corner.
  5. Name your file accordingly and add a description to your media file if needed. Keep in mind, if you choose a name for your file which has already been selected for a pre-existing file on the AGRW wiki, you will not be allowed to continue the process. Make sure your file has 1. not already been uploaded and 2. hasn't been given an already existing name. After you've selected the proper name and filled the description to your needs, select "Save" in the top-right corner.
  6. You may now add a caption which will promptly appear underneath your file when viewing your article. You may also add a description of the file under "Alternative text", however this isn't really necessary for the AGRW wiki. After you've completed (or have left blank) your description, you may select "Advanced" to configure your file's size and appearance.
  7. This is where you may configure the orientation of your image, the thumbnail, the border, and the size. After you feel you've properly configured your image or are satisfied with its pre-determined settings, you may select "Insert" in the top-right corner.
  8. All done! You're allowed to upload as many images/files as you like as long as 1. They follow AGRW's and FANDOM's policy 2. Aren't considered spam 3. Hasn't already been uploaded (leniency granted if it isn't to your knowledge) and 4. Have proper credit and permission to upload if it is a piece of art.
Altering a Photo Through Code
You can add center, thumb, right, left, and middle. The positions are pretty self-explanatory except for Middle. When you add Middle it aligns itself to text and acts as text.
[[File:Placeholder.png]]
Here's what it would look like with center:
[[File:Placeholder.png|center]]
You can add a width to the image, too. You can't alter the height, and when you adjust the width, it'll automatically adjust the height accordingly.
[[File:Placeholder.png|700px]]
You can also add a link to the page to where when you click the image it'll take you to a url. Some add link= for the sake of making the image unclickable.
[[File:Placeholder.png|link=https://animal-groups-roleplay.fandom.com]]
Lastly, you can add a small caption for the image. A lot of the time, the description won't pop up (especially if you have coding surrounding it)
[[File:Placeholder.png|Here's a caption!]]
Putting It All Together
Art by Fubsy! Current Owner: WonderousDreams
[[File:Miehavbdlikjb.gif|left|200px|Art by Fubsy! Current Owner: WonderousDreams|link=https://toyhou.se/3791356.harefoot]]
Wiki G F B GalleriesPhotos Galleries, Slideshows, Sliders, and Videos

Adding a gallery:

MediaTricks9 Wikitext Guide For Beginners
You can either use the button displayed in Source Editor (as shown on the left), or you can code it in yourself!
  • Configuring through buttons
Adding a gallery GuideWikitextW
After clicking the gallery button displayed before, a panel similar to this should pop up onto your view!
In order to add photos to the gallery, you'll already had to have uploaded photos onto the wiki beforehand. Once you've uploaded the photos you want, you'll want to make sure you have all the file names.
Once you click the gallery button, you'll want to look up your desired files into the search bar and upload them into the list of files. You can add captions if you'd like, and then click "insert"!
Since the recent FANDOM updates over the past ~5 years or so, galleries aren't so configurable through source editor, and I recommend using code if you want more detailed galliers!
  • Configuring through code
Below shows different alterations for the galleries in code form and what they do! You can stack these codes in the same tag.

Generic Gallery (No Alterations)

<gallery>
Filename.png
</gallery>
Widths Alteration
<gallery widths="#">
Filename.png
</gallery>
Position Alteration
<gallery position="left, center, right">
Filename.png
</gallery>

Note: do not add px (pixels) onto your width!

Column Alteration
<gallery columns="#">
Filename.png
</gallery>
Orientation Alteration
<gallery orienation="square, portrait, landscape">
Filename.png
</gallery>

Note: If you want your images to fit to the page (no columns), then don't add the column attribute. Additionally, if you want your gallery to be in the default orientation, don't add the orientation attribute!
Photo Spacing Alteration

<gallery spacing="small, medium, large">
</gallery>

Additional Alterations to Borders & Captions

<gallery bordercolor="#000000, transparent" captionalign="center, left, right" bordersize="none, small, medium, large" captionsize="small, medium, large" captiontextcolor="#000" captionposition="within">
</gallery>
  • Put Together:
<gallery widths="150" position="left" columns="4" orienation="square" spacing="small">
Filename.png
Filename.png
Filename.png
Filename.png
Filename.png
Filename.png
Filename.png
Filename.png
</gallery>

Adding a Slideshow & Slider

Screenshot (564)
Slideshows and Sliders are very similar to galleries during creation except for the less alterations. (I can't count how many times I've said alterations!)
Unlike galleries, there's not any buttons on the top of your editor to add slideshows & sliders, but you can use the buttons on the right!
  • Configuring through buttons
This option has since been removed. If you'd like your gallery to be a slideshow, you'll have to configure through code!
  • Configuring through code
These are pretty easy and self explanatory, so here's all of your options!:

Slideshows

<gallery type="slideshow" crop="true" position="left, center, right" widths="#">
Filename.png
</gallery>

if you dont want the crop, just remove the crop attribute!
Sliders

<gallery type="slider" orientation="bottom, right">
Filename.png
</gallery>
  • Put Together:

Slideshows

<gallery type="slideshow" crop="true" widths="200" position="left">
Filename.png
Filename.png
</gallery>

Sliders

<gallery type="slider" orientation="bottom">
Filename.png
Filename.png
</gallery>

Adding a Video

Screenshot (569)
Videos are very simple and easy to add. You may search for an already existing video on the wiki, or you make make your own! Just please remember to be appropriate and follow the policies when making/adding them to the wiki!
  • Configuring through buttons
This option has since been removed. You'll have to configure through the media button and upload a video yourself.
Screenshot (567)

Example:

[[File:Forest Sounds Woodland Ambience, Bird Song, Nearby Village 3 Hours|left|200px]]

Altering and Formatting Text (Font Families, Colors, Sizes, etc.)[]

Everything below can be used in a tag (besides <center>, of course). For example:

<span style="font-family:Trebuchet MS;color:#0A2012;font-size:12px">Altering text with a font family, color, and selected size.</span>
Altering text with a font family, color, and selected size.

In this course, you'll learn about each piece of code in that tag.

Font Families:

There are many fonts out there, but there are just a few applicable to AGRW, and other wikis have different text applicable to their wikitext. Here's a list of AGRW's current fonts:

(Credit to Duskaa)

this is an updated list of all the fonts available on the wiki..in alphabetical order. if they just appear as times new roman that means that it's not available to view on ur computer.

Amatic SC
American Typewriter
Andale Mono
Another Scream
Apple Chancery
Arial
Arial Black
Arial Narrow
Arial Rounded MT Bold
Baskerville
Bearpaw
Big Caslon
Bigelow Rules
Bradley Hand
Brush Script MT
Burning Wrath
Cabin Sketch
Chelsea Market
Comic Sans MS
Comical
Copperplate
Courier New
Digital Delivery
Digital Delivery Bold
Digital Delivery Display
EinsteinRomanOpti
Firefly

Fjalla One
Flavors
Friday13
Futura
Garamond
Georgia
Gill Sans
Gill Sans MT
Give You Glory
GrantRusticOpti
Great Vibes
Helvetica
Helvetica Neue
Herculanum
Hoefler Text
Hylia Serif
Impact
KHII MenuSp
Lucida Grande
MarioSSS
Marker Felt
Monaco
Monospace
Munber
Northmount
Optima

Osaka
Palatino
Papyrus
Passion One
Pixel Or Go
PKMN-Mystery-Dungeon
PRstart
Princess Sofia
Requiem
Roboto
Rock Salt
Sans-Serif
Skia
Smythe
Tahoma
Tiki Island
Times
Times New Roman
Titillium Web
Trebuchet MS
Triforce
Undertale
Undertale Condensed
Verdana
Varela Round
Vergilius
Zapfino

Additional Unlisted Fonts:

Elephant Gabriola Bookman
Century Gothic Centaur Candara
Lucida Handwriting
Color Names & Hex Codes:

Similarily to fonts, there are many color names. Each color name could be applicable to a different shade, but here are (some of) the colors that the wiki recognizes:
(Credit to Fubsy's Coding Guide Neo)

AGRW Related Colors
What is It HEX CODE RGB
Default Text Color #3A3A3A RGB(58, 58, 58)
Background Module Color #F0E5DE RGB(214, 226, 204)
Background Module Color 2 #D6E2CC RGB(210, 208, 182)
Link + Button Color #1f5d04 RGB(31, 93, 4)
Header #5ea052 RGB(94, 160, 82)
Black-White
Color Name HEX CODE RGB
Black #000 RGB(0, 0, 0)
DarkSlateGrey #2F4F4F RGB(47, 79, 79)
DimGrey/DimGray #696969 RGB(105, 105, 105)
Grey/Gray #808080 RGB(128, 128, 128)
SlateGrey/SlateGray #708090 RGB(112, 128, 144)
LightSlateGrey/LightSlateGray #778899 RGB(119, 136, 153)
DarkGrey/DarkGray #A9A9A9 RGB(169, 169, 169)
Silver #C0C0C0 RGB(192, 192, 192)
LightGrey/LightGray #D3D3D3 RGB(211, 211, 211)
Gainsboro #DCDCDC RGB(220, 220, 220)
WhiteSmoke #f5f5f5 RGB(245, 245, 245)
White #fff RGB(255, 255, 255)
Browns
Color Name HEX CODE RGB
Seashell #FFF5EE RGB(255, 245, 238)
PapayaWhip #FFEFD5 RGB(255, 239, 213)
BlanchedAlmond #FFEBCD RGB(255, 235, 205)
Bisque #FFE4C4 RGB(255, 228, 196)
Wheat #F5DEB3 RGB(245, 222, 179)
Burlywood #DEB887 RGB(222, 184, 135)
Tan #D2B48C RGB(210, 180, 140)
Peru #CD853F RGB(205, 133, 63)
Sienna #A0522D RGB(160, 82, 45)
SaddleBrown #8B4513 RGB(139, 69, 19)
Pinks and Reds
Color Name HEX CODE RGB
Snow #FFFAFA RGB(255, 250, 250)
LavenderBlush #FFF0F5 RGB(255, 240, 245)
MistyRose #FFE4E1 RGB(255, 228, 225)
Pink #FFC0CB RGB(255, 192, 203)
LightPink #FFB6C1 RGB(255, 182, 193)
PaleVioletRed #DB7093 RGB(219, 112, 147)
HotPink #FF69B4 RGB(255, 105, 180)
DeepPink #FF1493 RGB(255, 20, 147)
MediumVioletRed #C71585 RGB(199, 21, 133)
LightSalmon #FFA07A RGB(255, 160, 122)
DarkSalmon #E9967A RGB(233, 150, 122)
Salmon #FA8072 RGB(250, 128, 114)
LightCoral #F08080 RGB(240, 128, 128)
IndianRed #CD5C5C RGB(205, 92, 92)
Tomato #FF6347 RGB(255, 99, 71)
OrangeRed #FF4500 RGB(255, 69, 0)
Red #FF0000 RGB(255, 0, 0)
Crimson #DC143C RGB(220, 20, 60)
FireBrick #B22222 RGB(178, 34, 34)
Brown #A52A2A RGB(165, 42, 42)
DarkRed #8B0000 RGB(139, 0, 0)
Maroon #800000 RGB(128, 0, 0)
Oranges
Color Name HEX CODE RGB
FloralWhite #FFFAF0 RGB(255, 250, 240)
Linen #FAF0E6 RGB(250, 240, 230)
AntiqueWhite #FAEBD7 RGB(250, 235, 215)
Moccasin #FFE4B5 RGB(255, 228, 181)
PeachPuff #FFDAB9 RGB(255, 218, 185)
SandyBrown #F4A460 RGB(244, 164, 96)
Coral #FF7F50 RGB(255, 127, 80)
Orange #FFA500 RGB(255, 165, 0)
DarkOrange #FF8C00 RGB(255, 140, 0)
Chocolate #D2691E RGB(210, 105, 30)
Yellows
Color Name HEX CODE RGB
Ivory #FFFFF0 RGB(255, 255, 240)
OldLace #FDF5E6 RGB(253, 245, 230)
Cornsilk #FFF8DC RGB(255, 248, 220)
LightYellow #FFFFE0 RGB(255, 255, 224)
LemonChiffon #FFF8DC RGB(255, 248, 220)
LightGoldenrodYellow #FAFAD2 RGB(250, 250, 210)
PaleGoldenrod #EEE8AA RGB(238, 232, 170)
Khaki #F0E68C RGB(240, 230, 140)
DarkKhaki #BDB76B RGB(189, 183, 107)
Yellow #FFFF00 RGB(255, 255, 0)
Gold #FFD700 RGB(255, 215, 0)
Goldenrod #DAA520 RGB(218, 165, 32)
DarkGoldenrod #B8860B RGB(184, 134, 11)
Greens
Color Name HEX CODE RGB
Honeydew #F0FFF0 RGB(240, 255, 240)
Beige #F5F5DC RGB(245, 245, 220)
GreenYellow #ADFF2F RGB(173, 255, 47)
Chartreuse #7FFF00 RGB(127, 255, 0)
LawnGreen #7CFC00 RGB(124, 252, 0)
Lime #00FF00 RGB(0, 255, 0)
LimeGreen #32CD32 RGB(0, 255, 0)
PaleGreen #98FB98 RGB(152, 251, 152)
LightGreen #90EE90 RGB(144, 238, 144)
MediumSpringGreen #00FA9A RGB(0, 250, 154)
SpringGreen #00FF7F RGB(0, 255, 127)
MediumSeaGreen #3CB371 RGB(60, 179, 113)
SeaGreen #2E8B57 RGB(46, 139, 87)
ForestGreen #228B22 RGB(34, 139, 34)
Green #008000 RGB(0, 128, 0)
DarkGreen #006400 RGB(0, 100, 0)
DarkOliveGreen #556B2F RGB(85, 107, 47)
Olive #808000 RGB(85, 107, 47)
OliveDrab #6B8E23 RGB(85, 107, 47)
YellowGreen #9ACD32 RGB(107, 142, 35)
DarkSeaGreen #8FBC8B RGB(143, 188, 139)
MediumAquamarine #66CDAA RGB(102, 205, 170)
Blues
Color Name HEX CODE RGB
MintCream #F5FFFA RGB(245, 255, 250)
AliceBlue #F0F8FF RGB(240, 248, 255)
Azure #F0FFFF RGB(240, 255, 255)
LightCyan #E0FFFF RGB(224, 255, 255)
PaleTurquoise #AFEEEE RGB(175, 238, 238)
Aqua/Cyan #00FFFF RGB(0, 255, 255)
Aquamarine #7FFFD4 RGB(127, 255, 212)
Turquoise #40E0D0 RGB(64, 224, 208)
MediumTurquoise #48D1CC RGB(72, 209, 204)
DarkTurquoise #00CED1 RGB(0, 206, 209)
LightSeaGreen #20b2aa RGB(32, 178, 170)
CadetBlue #5F9EA0 RGB(95, 158, 160)
DarkCyan #008B8B RGB(0, 139, 139)
Teal #008080 RGB(0, 128, 128)
SteelBlue #4682B4 RGB(70, 130, 180)
LightSteelBlue #B0C4DE RGB(176, 196, 222)
LightBlue #ADD8E6 RGB(173, 216, 230)
PowderBlue #B0E0E6 RGB(176, 224, 230)
SkyBlue #87CEEB RGB(135, 206, 235)
LightSkyBlue #87CEFA RGB(135, 206, 250)
DeepSkyBlue #00BFFF RGB(0, 191, 255)
DodgerBlue #1E90FF RGB(30, 144, 255)
CornflowerBlue #6495ED RGB(100, 149, 237)
MediumSlateBlue #7B68EE RGB(123, 104, 238)
RoyalBlue #4169E1 RGB(65, 105, 225)
Blue #0000FF RGB(0, 0, 255)
MediumBlue #0000CD RGB(0, 0, 205)
DarkBlue #00008B RGB(0, 0, 139)
Navy #000080 RGB(0, 0, 128)
MidnightBlue #191970 RGB(25, 25, 112)
Purples
Color Name HEX CODE RGB
GhostWhite #F8F8FF RGB(248, 248, 255)
Lavender #E6E6FA RGB(230, 230, 250)
Thistle #D8BFD8 RGB(216, 191, 216)
Plum #DDA0DD RGB(221, 160, 221)
Violet #EE82EE RGB(238, 130, 238)
Orchid #DA70D6 RGB(218, 112, 214)
Fuchsia/Magenta #FF00FF RGB(255, 0, 255)
MediumOrchid #BA55D3 RGB(186, 85, 211)
RosyBrown #BC8F8F RGB(188, 143, 143)
MediumPurple #9370DB RGB(147, 112, 219)
MediumSlateBlue #7B68EE RGB(123, 104, 238)
SlateBlue #6A5ACD RGB(106, 90, 205)
BlueViolet #8A2BE2 RGB(138, 43, 226)
DarkViolet #9400D3 RGB(148, 0, 211)
DarkOrchid #9932CC RGB(153, 50, 204)
DarkMagenta #8B008B RGB(139, 0, 139)
Purple #800080 RGB(128, 0, 128)
RebeccaPurple #663399 RGB(102, 51, 153)
DarkSlateBlue #483D8B RGB(72, 61, 139)
Indigo #4B0082 RGB(75, 0, 130)

They aren't case sensitive, so both "DarkOliveGreen", "darkolivegreen", "DARKOLIVEGREEN", etc. would work!

If you simply want to use your own Hex Code, here's the basics on how to do it:

Screenshot (433)
  1. Go to a Color Wheel or a Color Calculator website. I suggest this color wheel (You can always use Paint 3D too if you're on Windows 10)
  2. Select the color of your preference using the color slider/wheel.
  3. Copy and paste the 6-digit code next to the #
  4. Copy and paste it next to "color:" inside your tag.
  • You can also use the hex code as backgrounds, text-shadows, box-shadows, borders, etc. (Anything that needs color)
5. For example: <span style="color:#4c6340">Look! I'm green now!</span>
  • If you ever want to copy the colors of an image, you can either edit your desired image in Paint 3D (Windows 10) and color pick from there, or you can use this website where it will automatically choose colors for you from the image.
Changing your font size:

This part is pretty easy. There are two forms of measurement for font-size. There is pixels (px), and then there's point values (pt). Point values is kind of a weird one. A point is a unit of measurement used for real-life ink-on-paper typography. 72pts = one inch. Point values are really only there if you want to type a paper and print it out, so there isn't much of a reason to use it. You'll want to use the common form of measurement across the wiki, pixels (px).
I sometimes use point values just because it tends to be bigger, just because I don't want to sift through the size of a font pixel by pixel. Basically, I like to take the lazy route and make my text bigger immediately, instead of using the tiny pixels. It really just depends on what you feel like using. In the beginning of learning how to code, I suggest using pixels just so you can get the hang of using them since they're in everything.

Here's an example of changing your font-size:

<span style="font-size:15px">15 pixels (px)</span> ; <span style="font-size:15pt">15 point value (pt)</span>
15 pixels (px) ; 15 point value (pt)
Text-Shadows, An Additional Tag, Colored Links, Text Forms, and Other Additions

Let's start with text-shadows, shall we?

Text-Shadows:

<span style="text-shadow:1px 1px #986f44">'''Using Text-Shadows'''</span>
Using Text-Shadows
Let's break it down a little bit so you can understand what the 1px means. When you place down the text-shadow, it creates a copy of the text. For example, changing the 1px to 0px would make it look like this:
<span style="text-shadow:0px 0px #986f44">'''Using Text-Shadows'''</span>
Using Text-Shadows
The 1px is moving the shadow in a direction. The first 1px moves the shadow to the right. If you wanted it to be to the left, you'd turn the 1px into a -1px. The second px affects whether it goes up or down. Positive goes down, negative goes up. You can mix and match or use one direction. Do whatever pleases you.
<span style="text-shadow:1px 0px #986f44">'''Using Text-Shadows'''</span> ; <span style="text-shadow:-1px 0px #986f44">'''Using Text-Shadows'''</span> ; <span style="text-shadow:0px 1px #986f44">'''Using Text-Shadows'''</span> ; <span style="text-shadow:0px -1px #986f44">'''Using Text-Shadows'''</span> ; <span style="text-shadow:1px 1px #986f44">'''Using Text-Shadows'''</span> ; <span style="text-shadow:-1px -1px #986f44">'''Using Text-Shadows'''</span>
Using Text-Shadows ; Using Text-Shadows ; Using Text-Shadows ; Using Text-Shadows ; Using Text-Shadows ; Using Text-Shadows
Adding a third px makes the text-shadow less solid and more into a fade. Increasing it and decreasing it lengthens how far the fade goes.
<span style="text-shadow:1px 1px 1px #986f44">'''Using Text-Shadows'''</span>
Using Text-Shadows
You can also stack multiple text shadows to create lined text. Here's an example:
<span style="text-shadow:-1px 0 white, 0 1px white, 1px 0 white, 0 -1px white">'''Using Text-Shadows'''</span>
Using Text-Shadows
After going through the basics of what the px does, you can get a better understanding of how the text is lined. The -1px in the first layer moves the first shadow to the left 1px, the 1px in the second layer moves the second shadow to the right 1px, the third 1px moves the third shadow down 1px, and the last -1px moves the fourth shadow up 1px.

Gradient Text:

<span style="background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fffffff), color-stop(100%,#B9B158)); background: -webkit-linear-gradient(top, #090909 0%, #A6A6A6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent">'''Gradient Text'''</span>
Gradient Text


The Additional Tag:

<font style="insert"> </font>

The <font> works similarly to <span>, but it's only meant to alter text, and it can't do any of the "crazy" things like <span> and <div>. It's very uncommon, and I only really use it to color links since <span> and <div> can't.


Coloring Your Links:
I'm going to also quickly delve into the two types of links. There's the external link, and then there's the internal link.

  • [http://www.example.com link title]
  • [[Link title]]

Pretty easy and self-explanatory regarding the external link. The internal link is for pages within AGRW. For example, if I wanted to link to GooseClan, I'd type in [[GooseClan]]. Blogs would be: [[User blog:your username here/blog name]], and userpages would be: [[User:your username here/userpage name]]. Now that I've explained the links, let's quickly get into coloring them.

You know that additional tag? This is where she comes into play:

[https://animal-groups-roleplay.fandom.com/wiki/Animal_Groups_Roleplay_Wiki <font color="goldenrod">External Link</font>] ; [[Animal Groups Roleplay Wiki|<font color="goldenrod">Internal Link</font>]]
And yes, you can change the "style=" to something else. There's many different ways you can change the attribute, but yet again, I almost never do. Sometimes I can find it confusing, and I prefer using the regular "style=", but in this instance I prefer to use color just to keep it clean.


Text Forms & Misc

Here's a small amount of text forms you can use in your coding. There are many more out there in the HTML universe, but these are the few that you may or may not find helpful. A few more can be found in Fubsy's Coding Guide Neo on Basic Text Formatting
Italicized Bold Striked Underlined
''text here''
'''text here'''
<s>text here</s>
<i>text here</i>
<b>text here</b>
<del>text here</del>
<em>text here</em>
<strong>text here</strong>
<strike>text here</strike>
<u>text here</u>

small, big, & sub

<small>small</small>, <big>big</big>, & <sub>sub</sub>

letter spacing

change the width between the letters with pixels
<span style="letter-spacing:2px">letter spacing</span>


text-align left
text-align right
text-align center
<div style="text-align:left">text-align left</div><div style="text-align:right">text-align right</div><div style="text-align:center">text-align center</div>


Putting It All Together

Now that you have learned about altering text, you can now layer and put them all together.

<span style="font-family:northmount;font-size:40pt;color:#986f44;text-shadow:2px 2px #4e2e1a">'''Putting it all together.'''</span>
Putting it all together.

Jumping Into Borders, Backgrounds, and Tables[]

I'm going to very quickly explain height, width, and overflow:hidden because they are very important when using borders, backgrounds, and tables.

<div style="height:100px"> </div>
<div style="width:100px"> </div>
When using a <div> tag, you'll almost always use height: and width:. It's pretty self-explanatory. Adjusting the pixels on both will alter the width and height of the tag you apply it to. These two only work on the <div> and <p> tags.
<div style="overflow:hidden"> </div>
You can't see what it's doing above, but the overflow:hidden command hides any additions that go beyond the height and width. For example, if you have a border around an image that is 700px in width, but the image is 1000px, the image will still exceed the border as seen below. With the overflow:hidden body code, the border will overlap the image and hide any exceeding content.
Without overflow:hidden With overflow:hidden
Borders

Let's start with your simple border. the examples below have an additional height:20px to make them visible

<div style="border:1px solid #000"> </div>
A solid border with a 1px thick line. (Adjust the pixels accordingly to make the line thicker)
<div style="border:1px dashed #000"> </div>
A dashed border, the same rules are applicable as the solid border.
<div style="border:1px dotted #000"> </div>
A dotted border, the same rules are applicable as the solid border.
<div style="border:3px double #000"> </div>
A dotted border, the same rules are applicable as the solid border. The doubled lines aren't as visible in 1px and 2px bold, so I increased it to 3px.
<div style="border:5px outset #4e2e1a"> </div>
An outset border with a nice shadow visual to it. The same rules are applicable as the solid border. This version I increased it to 5px so you could see the effect better. The effect isn't visible in #000, either.
<div style="border:5px inset #4e2e1a"> </div>
An inset border with another nice shadow visual to it. The same rules are applicable as the solid border. This version I increased it to 5px so you could see the effect better. The effect isn't visible in #000, either.
<div style="border:5px groove #4e2e1a"> </div>
A groove border with an interesting shadow visual to it. The same rules are applicable as the solid border. This version I increased it to 5px so you could see the effect better. The effect isn't visible in #000, either.
<div style="border:5px ridge #4e2e1a"> </div>
A ridge border with an interesting shadow visual to it. The same rules are applicable as the solid border. This version I increased it to 5px so you could see the effect better. The effect isn't visible in #000, either.

Left-border, Right-border, Top-border, & Bottom-border

You can also alternate which side of your border you want to be solid or dashed, or if you just want a border on the top only. You can also apply the border-radius to these borders to add rounded tips.
<div style="height:20px;border-left:1px solid #000;border-right:1px solid #000"> </div>
<div style="height:20px;border-bottom:1px solid #000;border-top:1px solid #000"> </div>
<div style="border-top:2px solid #4e2e1a;border-bottom:2px solid #4e2e1a;border-left:2px dashed #4e2e1a;border-right:2px dashed #4e2e1a;height:40px"> </div>

Adding Border-Radius

When you add a border-radius to your code, you can alternate the round-ness of your border to any degree. Wether it be the corners slightly rounded, or the whole border turn into a circle.
<div style="border:1px solid #000;border-radius:10px"> </div>
<div style="border:1px solid #000;border-radius:50px;width:50px"> </div>
You can also change which corners of the border you want to be rounded.
<div style="border:1px solid #000;border-radius:0px 0px 50px 50px"> </div>
<div style="border:1px solid #000;border-radius:50px 50px 0px 0px"> </div>
<div style="border:1px solid #000;border-radius:50px 0px 50px 0px"> </div>

Putting Borders Around Images

<div style="border:1.5px solid #4e2e1a;width:680px;height:200px;overflow:hidden">[[File:Placeholder.png|center|680px]]</div>
Tumblr ocvd502CcP1qbg3s6o1 400

Box-Shadows

<div style="border:1.5px solid #4e2e1a;box-shadow:2px 2px #986f44;width:690px"> </div>
Like text-shadows, but around the border.
<div style="border:1.5px solid #4e2e1a;box-shadow:1px 0px #986f44, -1px 0px #986f44, 0px 1px #986f44, 0px -1px #986f44;width:690px"> </div>
Backgrounds
Backgrounds are simple and easy to use as long as you know how to use them. They are applicable to all tags, but on <span>s, they only cover the background behind the text, not a whole line. If you ever want the background to be further away from the text, add a margin:5px. Margin: spaces the text between borders and the edges of the page.
<div style="background:#4e2e1a;height:20px"> </div>
<span style="background:#4e2e1a;height:20px;color:#fff"><span style="margin:5px"> </span></span>

Get into it
Gradients

I don't recommend using these too much as they can become an eyesore, but I do tend to use them time to time.

Linear Gradient (To Left)

<div style="height:20px;background-image:linear-gradient(to left, #986f44, #4e2e1a)"> </div>

Linear Gradient (To Right)

<div style="height:20px;background-image:linear-gradient(to right, #986f44, #4e2e1a)"> </div>

Linear Gradient (To Bottom)

<div style="height:20px;background-image:linear-gradient(to bottom, #986f44, #4e2e1a)"> </div>

Linear Gradient (To Top)

<div style="height:20px;background-image:linear-gradient(to top, #986f44, #4e2e1a)"> </div>

Radial Gradient

<div style="height:20px;background-image:radial-gradient(#986f44, #4e2e1a)"> </div>
Tables
Tables can tend to get a little complicated, so I'll go through the steps on everything you can do to a table.

Simple Table (No Border, Backgrounds, Etc.)

{|style="width:680px"
|column 1
|column 2
|column 3
|column 4
|}
column 1 column 2 column 3 column 4

Bordered Table #1

{|style="width:680px;border:1px solid #000"
|column 1
|column 2
|column 3
|column 4
|}
column 1 column 2 column 3 column 4

Bordered Table #2

{|style="width:680px"
|style="border:1px solid #000"|column 1
|style="border:1px solid #000"|column 2
|style="border:1px solid #000"|column 3
|style="border:1px solid #000"|column 4
|}
column 1 column 2 column 3 column 4

Combining Tables (Tables inside Tables)

{|style="width:680px"
|style="border:1px solid #000;width:230px"|column 1
|
{|style="width:220px"
|style="border:1px solid #000"|column 2.1
|-
|style="border:1px solid #000"|column 2.2
|-
|style="border:1px solid #000"|column 2.3
|-
|style="border:1px solid #000"|column 2.4
|}
|}
column 1
column 2.1
column 2.2
column 2.3
column 2.4

Table Inception (They're Limitless)

{|style="width:680px"
|
{|
|style="border:1px solid #000;width:230px"|column 1
|
{|style="width:220px"
|style="border:1px solid #000"|column 2.1
|-
|style="border:1px solid #000"|column 2.2
|-
|style="border:1px solid #000"|column 2.3
|-
|style="border:1px solid #000"|column 2.4
|}
|}
|
{|
|style="border:1px solid #000;width:230px"|column 1
|
{|style="width:220px"
|style="border:1px solid #000"|column 2.1
|-
|style="border:1px solid #000"|column 2.2
|-
|style="border:1px solid #000"|column 2.3
|-
|style="border:1px solid #000"|column 2.4
|}
|}
|}
column 1
column 2.1
column 2.2
column 2.3
column 2.4
column 1
column 2.1
column 2.2
column 2.3
column 2.4
Putting It All Together
Here's an example of what you can make with any of the coding above. For the sake of learning, I am not showing the full source code so you may try to make your own coding based off what you have learned. (Please do not try to recreate the format below in its entirety for your own use).
Tumblr ocvd502CcP1qbg3s6o1 400
Dahy5j0-4066ad04-6e7c-45a0-b8db-c28d855cb241 eliza & lizzy
Dahy5j0-4066ad04-6e7c-45a0-b8db-c28d855cb241 sagittarius ms:taurus
Dahy5j0-4066ad04-6e7c-45a0-b8db-c28d855cb241 female ♀ she/her
Animal-crossing-new-horizons-custosm-designs (1) Discord: wonder_xame#4949
Animal-crossing-new-horizons-custom-designs (1) AJ: Cardinalsong
Animal-crossing-new-horizons-custom-designs My message wall is always open
Mageleaf
Shallowedheart
My Commissions

contact icons from ac: new horizons

Just so you can see how it's formatted, here is a hollow version without content displaying its setup.
{|style="width:220px;border:2px solid #4e2e1a"
|style="border:2px solid #4e2e1a;height:180px"|
{|
|style="width:75px"|<div style="border:1px solid #4e2e1a;width:75px;height:75px"> </div>
|content
|}
<div style="height:5px"> </div>
<div style="border:1px solid #4e2e1a;width:280px;overflow:hidden;height:100px">content</div>
|-
|style="border:1px solid #4e2e1a"|column 1
|-
|style="border:1px solid #4e2e1a"|column 2
|-
|style="border:1px solid #4e2e1a"|column 3
|-
|style="border:1px solid #4e2e1a"|column 4
|}
content
 
content
column 1
column 2
column 3
column 4

Introducing Collapsibles With Position Relative, Absolute, & Fixed[]

Collapsible Type #1
This is the easiest collapsible out of the two. It's a reformed version of a table (something you've just learned).
{| class="mw-collapsible mw-collapsed"
|Collapsible Title
|-
|info
|}
 
Collapsible Title
info
 
These are my personal favorites. They're easy to use, and I like giving myself the challenge of making good use of it. Admittedly, it does tend to look a little ugly with the green link, but later you'll learn how to change it white or black. Each collapsible is labeled with a word or number. For example, your collapsible must have the same number in the customtoggle and in the customcollapsible to work. If you reuse the number for every collapsible on your page, they'll all open at once. In order to avoid that, you'll have to rename each collapsible accordingly.
Collapsible Type #2
This one isn't hard to use as long as you know how to use it. This one is the most moldable. You can use it anywhere, and it's not too unforgiving.
<span class="mw-customtoggle-1">click me to see your future!</span>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-1">
haha loser</div>
click me to see your future!
haha loser
To exit out of the collapsible, you'd just have to reclick "click me to see your future!", but you can also add an exit. You would just have to reuse another customtoggle (with the same number/name) inside the customcollapsible.
<span class="mw-customtoggle-2">click me to see your future!</span>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-2">
haha loser
<span class="mw-customtoggle-2">exit</span></div>
click me to see your future!

haha loser

exit


Position Relative
Position Relative is my personal favorite. I find it very easy to use, and it's the least problematic for me.
<div style="position:relative;bottom:0px;top:0px;left:0px;right:0px"> </div>
Position Relative moves the selected coding up, down, left, or right from where it originates (where the coding is placed on the page). It can go over any piece of coding as long as it contains position:relative. You don't have to have all of the "bottom:0px;top:0px;left:0px;right:0px", you can only apply the body code that you're using to move the code if you wish, or not use them at all. Here's an example:
<div style="border:1px solid #000;height:300px;width:500px;overflow:hidden">[[File:Placeholder.png|600px|center]]</div><div style="position:relative;bottom:200px;left:200px">Hello there!</div>
Placeholder
Hello there!
Position Absolute
Position Absolute is easy, but also problematic. It can become very problematic and hard to use at times as users have different version based on their desktop, so it may appear in a different position than you see it. It also can go over any coding.
<div style="position:absolute;bottom:0px;top:0px;left:0px;right:0px"> </div>
Position Absolute moves the selected coding up, down, left, or right from the top of the page instead of where it originates. When you select top:0px; the selected coding will appear at the very top of the page. If it's at top:100px, it will appear 100 pixels below the top of the page.


Position Fixed
I do not recommend using Position Fixed. The only case in which I've seen people use it is for newsletters at the corners of pages.
<div style="position:fixed;bottom:0px;top:0px;left:0px;right:0px"> </div>
Position Fixed affixes it to the outside of the page, and it doesn't move even when you scroll down. Here's an example of me using it on my profile.
Art by Fubsy

Div Classes[]

Here's a list of some of the Div Classes on the wiki. There's many scattered classes, so not all of them might be listed! Here's how you'd use a class:
<div class="classhere"> </div>

quick note: you can also use <span>

List of Div Classes:
fadein
<div class="fadein"> </div>
fadein2
<div class="fadein2"> </div>
shiftLeft
<div class="shiftLeft"> </div>
setup-transition
<div class="setup-transition"> </div>
typewriter
<div class="typewriter" style="position:absolute"> </div>

Hover over this...

...and this appears!
<div class="set-appear">
Hover over this...
<div class="appear">
...and this appears!
</div></div>
wiggle
<div class="wiggle"> </div>
scale
<div class="scale"> </div>
flicker
<div class="flicker"> </div>
zoom
<div class="zoom"> </div>
backnforth
<div class="backnforth" style="position:relative"> </div>
bounce
<div class="bounce" style="position:relative"> </div>
ripple
<div class="ripple"> </div>
upbump
<div class="upbump"> </div>
flip (click me!)
<div class="flip" style="position:relative"> </div>
reverseflip (click me!)
<div class="reverseflip" style="position:relative"> </div>
spcglow
<div class="spcglow"> </div>
rpgtext
<div class="rpgtext"> </div>
shake
<div class="shake"> </div>
revshake
<div class="revshake"> </div>
buttonleft
<div class="buttonleft"> </div>
buttoncenter
<div class="buttoncenter"> </div>
buttonright
<div class="buttonright"> </div>
fsanimation2
<div class="fsanimation2"> </div>
swing
<div class="swing"> </div>
upbump
<div class="upbump"> </div>
nox
<div class="nox"> </div>
wisp-header-hover
<div class="wisp-header-hover"> </div>
underline-on-hover
<div class="underline-on-hover"> </div>
spin
<div class="spin"> </div>
firefly-hover
<div class="firefly-hover"> </div>
content-tab
<div class="content-tab"> </div>
<div class="greyLink"> </div>
policyTOC
<div class="policyTOC"> </div>
<div class="whiteLink"> </div>
burrow
<div class="burrow"> </div>
<div class="bcLink"> </div>
hoverurr
<div class="hoverurr"> </div>
horizontalScroll
<div class="horizontalScroll"> </div>

(Warning: Lag Might Occur)

Cursors:
Hover over each cell to see what the cursor looks like!
<div style="cursor:________"> </div>

quick note: you can also use <span>

cursor:pointer 
cursor:help
cursor:cell
cursor:col-resize
cursor:copy
cursor:crosshair
cursor:default
cursor:e-resize
cursor:grab
cursor:grabbing
cursor:move
cursor:n-resize
cursor:nesw-resize
cursor:nw-resize
cursor:no-drop
cursor:none
cursor:progress
cursor:row-resize
cursor:text
cursor:wait
cursor:zoom-in
cursor:zoom-out

Extra Coding (Importing Songs, Quotes, Polls, Etc.)[]

A mini guide from one of my blogs:

How to add music back to your pages![]

Ever since the sad departure of the pretty soundclouds, it has been overwhelmingly quiet. I think I'm going just a little crazy!!
So, here's a tutorial on how to add music media files to your page!

Step 1: Find your desired song from Spotify[]

For example, I've chosen "A Slow Waltz" by Lullatone

A Slow Waltz - Lullatone

MUSIC1
Click on the three dots ". . ."
Click "Share ▶"
Click "Copy Song Link"

Step 2: Convert Your Copied Link Into a Downloadable MP3 File[]

Next, what you'll want to do is find an MP3 convertor. Here's the one I use specifically for Spotify, however, there are other available MP3 convertors for Soundcloud and Youtube if your desired song isn't on Spotify!
Your page should look like this:
MUSIC2
Copy and paste your selected song's link in this space here and then click "Download":
MUSIC3
Your page should now look like this with your selected song where mine says "A Slow Waltz":
MUSIC4
Click "Download"
MUSIC5
Click "Download MP3", and then exit the website.
MUSIC6


Step 3: Convert Your Downloaded MP3 File Into An .OGG File[]

In order to upload your file to the wiki, your file has to be an .ogg file.
You'll want to open an .ogg convertor like the one I use here.
Click "Choose File", select your new MP3, and then click "> Start"
MUSIC7
Wait for your file to be uploaded. DO NOT CLICK ANYTHING ELSE!
Click ONLY "Download". You do not want to click "Download ZIP File", "Cloud Upload", or anything else on the page.
MUSIC9
Exit the page.

Step 4: Upload Your Music to AGRW[]

Click the Images and media icon at the top of the source editor MediaTricks9 Wikitext Guide For Beginners
Click "Upload" and select your .ogg file
It should look like this:
MUSIC10
Click "Use This Image" and "Insert"!
You should now end up with a file that looks like this!

You can change the width of the file by adding a #px after your file like this: [[File:yoursong.ogg|#px]]

Enjoy![]


Quote here
{{Quote|Quote here}}
quote here
{{Colored Quote|quote here|Color = #000000}}


The tabview links to sandboxes (userpages) and displays the content inside them. You have to make sure you own the sandbox, and that the sandbox actually exists as a page.
<tabview>
User:username/title of your sandbox|title you want to be displayed
User:username/title of your sandbox|title you want to be displayed
User:username/title of your sandbox|title you want to be displayed
User:username/title of your sandbox|title you want to be displayed
</tabview>

My example:

<tabview>
User:WonderousDreams/Sandbox 1|Sandbox 1
User:WonderousDreams/Sandbox 2|Sandbox 2
User:WonderousDreams/Sandbox 3|Sandbox 3
User:WonderousDreams/Sandbox 4|Sandbox 4
</tabview>


info

info

info

info

<tabber>
|-|title1=info
|-|title2=info
|-|title3=info
|-|title4=info
</tabber>


Y Scroll:

insert info here
<div style="height:230px;overflow:hidden;overflow-y:scroll">insert info here</div>

X Scroll:

insert text here
<div style="overflow: hidden;width:570px;overflow-x: scroll">insert text here</div>


I have been on the wiki for:

<span style="display:none;" class="countdown"><span class="countdowndate">January 1 2020 01:01:00</span></span>


Days until I'm too old:

<span style="display:none;" class="countdown"><span class="countdowndate">December 12 2023 00:00:00</span></span>
{{Avatar|usernamehere|75}}

hey there!

i made this guide!
{{User_Talk_Bubble
|image = INSERT FILE HERE
|border = black
|color = #FFFFFF
|namecolor = black
|textcolor = black
|namefonttype = 
|fonttype = 
|name = INSERT TITLE HERE
|border2 = black
|color2 = #FFFFFF
|line = 2px
|textcolor2 = black
|text = INSERT INFO HERE	
|color3 = #FFFFFF
|border3 = black
|line2 = 3px}}

credit to Fubsy!

{{User:Fubsy/Sandbox/Custom Button|
|color = darkgrey
|borderColor = grey
|textColor = white
|link = User:WonderousDreams
|text = Profile
}}

Side by Side:

credit to Fubsy!

{|
|{{User:Fubsy/Sandbox/Custom Button|
|color = darkgrey
|borderColor = grey
|textColor = white
|link = User:WonderousDreams
|text = Profile
}}
|{{User:Fubsy/Sandbox/Custom Button|
|color = darkgrey
|borderColor = grey
|textColor = white
|link = User:WonderousDreams
|text = Profile
}}
|}

External Links:

credit to Fubsy!

{{User:Fubsy/Sandbox/Custom Button|
|color = darkgrey
|borderColor = grey
|textColor = white
|externalLink = [https://www.deviantart.com/ <font color="white">DeviantArt</font>]
}}

i'm transparent, and i'm not!

<div style="opacity:.7">text</div>
Mother
 
Father
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Daughter
 
Son
{{Familytree/start}}
{{Familytree|MOM|y|DAD|MOM=Mother|DAD=Father
|boxstyle_DAD=background-color: #D3EBFD;
|boxstyle_MOM=background-color: #FFDAE0;}}
{{Familytree| |,|-|^|-|.}}
{{Familytree| |DAU| |SON|DAU=Daughter|SON=Son
|boxstyle_SON=background-color: #D3EBFD;
|boxstyle_DAU=background-color: #FFDAE0;}}
{{Familytree/end}}

How they work:

Parameters

Credit to Duskaa's Guide!

Keeping Your Coding Clean & Tidy[]

1. Minimizing the number of tags you're using.

To avoid clogging your page with unnecessary tags, try to combine as many as possible. For instance, if you're trying to alter one piece of text, only use one tag unless necessary.

For example:
Don't Do:

<div class="wisp-hover">
<div style="color:#fff;"><div style="font-size:120pt;font-family:einsteinromanopti;"><span style="text-shadow:2px 2px #000">Sample</span></div></div></div>

DO:

<div class="wisp-hover" style="color:#fff;font-size:120pt;font-family:einsteinromanopti;text-shadow:2px 2px #000">Sample</div>


2. Using A Tag Checker

Even if you check through currently, it's very common to have unclosed tags on your page. If you're wondering why your comments are at the top of your page or have disappeared altogether, that is your reason why.
Here's a recommended tag checker that'll find any unclosed tags:

https://www.aliciaramirez.com/closing-tags-checker/

Tagchecker wikitextguide
Although, the tag checker is meant for pure HTML, not wikitext! Therefore, it won't find any unclosed tables or tags within tables. If it says you have no unclosed tags, but your page is still messy, you'll have to search through it thoroughly!


3. Don't Use Unnecessary Tags In Tables

Just like having unnecessary tags, you don't want to use tags in tables unless it's a scroller or altering specific text in a table.

Don't:

{|style="width:680px"
|style="border-top:2px solid #000;height:150px;color:#000;font-family:arial narrow;font-size:12px"|<div style="border-bottom:1px solid #000;"><span style="color:#000">Lorem ipsum dolor sit amet, consectetur adipi- scing elit. Fusce vel laoreet orci. In eget auctor mi. Maecenas ipsum purus, imperdiet ullamcor- per quam sit amet, malesuada semper sem. Duis elit quam, sagittis sed justo at, condimentum porttitor velit. Vivamus rutrum a enim eget molestie. Sed pharetra diam metus, id ornare dolor lobortis quis. Integer gravida, ipsum non venenatis pretium, elit mauris ultrices neque, quis tincidunt arcu velit sed dolor. Suspendisse non lacus at orci hendrerit tincidunt. Quisque consequat faucibus luctus. Ut sollicitudin arcu mauris, non dictum est viverra vitae.</span></div>
|}

DO:

{|style="width:680px"
|style="border-top:2px solid #000;height:150px;color:#000;font-family:arial narrow;font-size:12px;border-bottom:1px solid #000;color:#000"|Lorem ipsum dolor sit amet, consectetur adipi- scing elit. Fusce vel laoreet orci. In eget auctor mi. Maecenas ipsum purus, imperdiet ullamcor- per quam sit amet, malesuada semper sem. Duis elit quam, sagittis sed justo at, condimentum porttitor velit. Vivamus rutrum a enim eget molestie. Sed pharetra diam metus, id ornare dolor lobortis quis. Integer gravida, ipsum non venenatis pretium, elit mauris ultrices neque, quis tincidunt arcu velit sed dolor. Suspendisse non lacus at orci hendrerit tincidunt. Quisque consequat faucibus luctus. Ut sollicitudin arcu mauris, non dictum est viverra vitae.
|}

Learning To Memorize The Code[]

You Won't Memorize It All Right Away!

When you start off, don't worry if you're constantly running to a guide for help. That's how I started off, too! But, don't depend too much on a guide, either. If you find yourself using the same code over and over, I suggest trying to remember it! When you first start off, code might appear as a bunch of gibberish coding, but if you keep to it and stay with it, you can find yourself enjoying coding! It's very similar to drawing. When you start off, you're not going to be able to paint the perfect cat right away! It takes time, effort, and referencing. If you're ever wondering how a code works on a certain page, feel free to take a gander. But remember this: There's a difference between inspiration and stealing. You can take inspiration from a certain piece of coding, but you cannot copy and paste it onto your own page without permission! It's alright to look and take inspiration, but please remember the policies when coding! Feel free to take a break every once in a while if you've been coding for a long time, it's good to take breaks! Good luck!

Credits[]

  • Credit to Fubsy's Coding Guide Neo
  • Credit to Duskaa's coding guide
  • The art pieces of Harefoot are by Fubsy, book & banner by Wildworks: Animal Jam Classic, and the miscellaneous banners are by ZandraArt.
  • Credit to Mugsey, Circanine's guide, and Fubsy for the list of Div Classes.
  • Credit to the Blog Post category that won't go away 😭

Hi! My name's Eliza, current content moderator and avid coder! I've been one the wiki since summer of 2018, and have been roleplaying, coding, and writing on-and-off since! I love coding, so if you need help, HMU on my message wall, through Discord, or comment on this page, and I'll try to help!
"Stay safe, and have fun coding!"

DO NOT copy my guide or create duplicates. Please do not copy my format, writing, or concepts! Thanks!
Last updated:

Advertisement