Guide to Coding (Daffødils)

Guide to Coding	by Daffødils	my message wall spacer my f2u format	Daffødils110
Close the Contents before conintuing!	This guide has been up for:	May 25 2020 20:00:00

The Basics[]

Creating a Page

Depending on what you want to code, knowing how to create a page is step one. Remember, you can only have five mainspace articles in your name at a time. To create a page on the main AGRW site, click the "ADD" button in the top right of your screen.

Creating a Blogpost

If you're just experimenting, a blog linked to your account is perfect! That way, you don't fill the Wiki with unnecessary official pages, and you don't have a cap with how many you can have in your name. In order to create a blog, go to View Profile > Blog > Create blog post.

Creating a Sandbox

I like to use Sandboxes when I'm planning a page to make or trying to do something complicated with code. Because blogs shift your code a bit, they can be inaccurate if your coding is very complex. For example, I used a Sandbox to create this page! To launch a Sandbox, simply type in the following when you create a regular page as the title:

User:Your Username Here/Sandbox

Rudimentary Text Formatting[]

Simple Formatting

1. BOLD TEXT

'''text here'''

2. ITALIC TEXT

''text here''

3. UNDERLINED TEXT

<u>text here</u>

4. ~~STRIKETHROUGH TEXT~~

<s>text here</s>

Using Tags

There are 3 main tag categories. They all work similarly, but here I will explain the differences and how to use them properly and most efficiently.

1. DIV

Div is both the most common and the most efficient tag, in my opinion. It can override most code and can operate a wide range of customizations.

<div style="insert values">text here</div>

2. FONT

Font isn't too awful, but it can only do a few things. However, it is extremely simple.

<font face="value here"><font color="value here">text here</font></font>

3. SPAN

Span is a lot like Div, just not as common.

<span style="insert values">text here</span>

Applying Different Text Alignment

Aligning text can be done in several different ways. Some are easier than others, but some have more options.

1. CENTER

Center doesn't have to be used only on text, it can also be done with tables and images, too!

<center>text here</center>

2. TEXT ALIGN

Text align can be used in Div tags and Span tags.
You can do left align, right align, or center align.

<div style="text-align: value;">text here</div>
OR
<span style="text-align: value;">text here</span>

Text Colors

Your text doesn't have to stay that murky gray color; It can be changed to any color you desire! There are two ways to do it.

1. COLOR NAMES

These include:
- Red
- Orange
- Yellow
- Green
- Cyan
- Blue
- Purple

<div style="color: value here;">text here</div>
OR
<font color="value here">text here</font>

2. HEX CODES

Visit this site and copy the code under "HEX"

<div style="color: #value;">text here</div>

Advanced Text Formatting[]

Div Classes

Div classes allow your text to move, not matter how you formatted it.

1. APPLICATION

<div class="value here">text here</div>

1A. LIST OF CLASSES

These are by name, so you can just copy and paste them into the code set up above. (Hint: try hovering over some!)

scanimation	wisp-header-hover	firefly-hover	swing	nox	spin
fsbutton	upbump	content-tab	underline-on-hover	flicker	zoom

Links

1. TO A WIKI PAGE/BLOG/SANDBOX

[[Page| title]]

2. TO AN OUTSIDE SITE

[https://www.google.com title]

Maybe you don't want an ugly green link, but something more fun!

3. COLORED LINKS

[[Page| <font color="value">title</font>]]
OR
[https://www.google.com <font color="value">title</font>]

Text Placement

It's possible that you might want your text hovering over an image!

Example:

Credits to SpringClan

<div style="position: absolute; left: -px; top: -px;">text here</div>

Borders[]

Borders Around Text

These are a super simple way to make your page look fancy and complicated, without having a really messy source mode.

1. BASIC BORDER

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<div style="border: -px solid value; width: -px; height: -px;">
<span style="font-family: value; font-size: -px; color: value; text-align: value;">text here</span>
</div>

2. DOUBLE BORDER

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<div style="border: -px double value; width: -px; height: -px;">
<span style="font-family: value; font-size: -px; color: value; text-align: value;">text here</span>
</div>

3. DOTTED BORDER

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<div style="border: -px dotted value; width: -px; height: -px;">
<span style="font-family: value; font-size: -px; color: value; text-align: value;">text here</span>
</div>

4. DASHED BORDER

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<div style="border: -px dashed value; width: -px; height: -px;">
<span style="font-family: value; font-size: -px; color: value; text-align: value;">text here</span>
</div>

Borders Around Images

Not only can you fit a border around text, you can also fit them around images!

1. SIMPLE IMAGE BORDER

by StormyxxNightss

<div style="border: -px solid value; width: -px; height: -px; overflow: hidden;">[[File:Placholder.png|center|-px]]</div>

2. ROUNDED IMAGE BORDER

by StormyxxNightss

<div style="border: -px solid value; border-radius: 20px; width: -px; height: -px; overflow: hidden;">[[File:Placholder.png|center|-px]]</div>

3. TOP ROUNDED IMAGE BORDER

by StormyxxNightss

<div style="border: -px solid value; border-radius: 20px 20px 0px 0px; width: -px; height: -px; overflow: hidden;">[[File:Placholder.png|center|-px]]</div>

4. BOTTOM ROUNDED IMAGE BORDER

by StormyxxNightss

<div style="border: -px solid value; border-radius: 0px 0px 20px 20px; width: -px; height: -px; overflow: hidden;">[[File:Placholder.png|center|-px]]</div>

Tables[]

1. BASIC HORIZONTAL TABLE

What	A	Nice	Table
info	info	info	info

{| class="article-table" border="0" cellpadding="1" cellspacing="1" style="margin: 0px auto; width: -px; text-align: value; background: #value"
|-
| style="border: -px solid value" |<font color="value">What</font>
| style="border: -px solid value" |<font color="value">A</font>
| style="border: -px solid value" |<font color="value">Nice</font>
| style="border: -px solid value" |<font color="value">Table</font>
|-
| style="border: -px solid value; background: white;" |<font color="black">info</font>
| style="border: -px solid value; background: white;" |<font color="black">info</font>
| style="border: -px solid value; background: white;" |<font color="black">info</font>
| style="border: -px solid value; background: white;" |<font color="black">info</font>
|}

2. BASIC VERTICAL TABLE

I	info
Like	info
This	info
One	info

{| class="article-table" border="0" cellpadding="1" cellspacing="1" style="margin: 0px auto; width: -px; text-align: value; background: #value"
|-
| style="border: -px solid value" |<font color="value">I</font>
| style="border: -px solid value; background: white;" |<font color="black">info</font>
|-
| style="border: -px solid value" |<font color="value">Like</font>
| style="border: -px solid value; background: white;" |<font color="black">info</font>
|-
| style="border: -px solid value" |<font color="value">This</font>
| style="border: -px solid value; background: white;" |<font color="black">info</font>
|-
| style="border: -px solid value" |<font color="value">One</font>
| style="border: -px solid value; background: white;" |<font color="black">info</font>
|}

3. SYNOPSIS STACKER

This	info
Is	info
Good	info
For	info
Clans	info

{| class="box" align="value" cellpadding="2" cellspacing="0" text-align: value; "
|-
| style="border-bottom: -px solid value; width: 150px;" |'''This'''
| style="border-bottom: -px solid value; width: 100px;" |info
|-
| style="border-bottom: -px solid value; width: 150px;" |'''Is'''
| style="border-bottom: -px solid value; width: 100px;" |info
|-
| style="border-bottom: -px solid value; width: 150px;" |'''Good'''
| style="border-bottom: -px solid value; width: 100px;" |info
|-
| style="border-bottom: -px solid value; width: 150px;" |'''For'''
| style="border-bottom: -px solid value; width: 100px;" |info
|-
| style="border-bottom: -px solid value; width: 150px;" |'''Clans'''
| style="border-bottom: -px solid value; width: 100px;" |info
|}

4. HIERARCHY TABLE

Rank (x/x)
info

Name	Username	Gender	Age	Mate	Pixel
info	info	info	info	info	info
info	info	info	info	info	info

{| class="article-table" border="0" style="margin: 0px auto; width: 500px; height: 100px; border: -px solid value;"
! scope="col" style="background: value; text-align: center;" |<font color="value">Rank '''(x/x)'''</font>
|-
| style="text-align: center; background: white;" |
info
|}
{| class="article-table" border="0" style="margin: 0px auto; width: 500px; height: 30px; border: -px solid value;"
! scope="col" style="background: value; text-align: center;" |<font color="value">Name</font>
! scope="col" style="background: value; text-align: center;" |<font color="value">Username</font>
! scope="col" style="background: value; text-align: center;" |<font color="value">Gender</font>
! scope="col" style="background: value; text-align: center;" |<font color="value">Age</font>
! scope="col" style="background: value; text-align: center;" |<font color="value">Mate</font>
! scope="col" style="background: value; text-align: center;" |<font color="value">Pixel</font>
|-
| style="text-align: center; background: white;" |info
| style="text-align: center; background: white;" |info
| style="text-align: center; background: white;" |info
| style="text-align: center; background: white;" |info
| style="text-align: center; background: white;" |info
| style="text-align: center; background: white;" |info
|-
| style="text-align: center; background: white;" |info
| style="text-align: center; background: white;" |info
| style="text-align: center; background: white;" |info
| style="text-align: center; background: white;" |info
| style="text-align: center; background: white;" |info
| style="text-align: center; background: white;" |info
|}

5. BANNER TABLE

How

Nice!

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

{| class="article-table" border="0" cellpadding="1" cellspacing="1" style="margin: 0px auto; width: 550px;text-align:center;background:#cb9cdb"
|-
| style="border: -px solid value" |<font color="black">How</font>
| style="border: -px solid value" |<font color="black">Nice!</font>
|-
| style="border: -px solid value; background: white; height: 300px;" |<font color="black">
<div style="height: 300px; width: 275px; overflow: hidden; overflow-y: scroll;">info</div></font>
| style="border: -px solid value; background: white; height: 300px;" |<font color="black">
<div style="height: 300px; width: 275px; overflow: hidden; overflow-y: scroll;">info</div></font>
|}

Miscellaneous Extras[]

Scrollers

Scrollers are great for when you have a lot of information.

1. Y SCROLLER

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div style="height: -px; width: -px; overflow: hidden; overflow-y: scroll;">text here</div>

Collapsibles

Click Me

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="mw-customtoggle-value">
<div style="background: value; width: -px; height: -px; border: -px solid value; color: value; text-align: value;">'''Click Me'''</div>
</div>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-value">
<div style="background: white; width: -px; height: -px; border: -px solid black; color: value;">
<div style="height: -px; width: -px; overflow: hidden; overflow-y: scroll;">info</div>
</div>
</div>

Tabbers

I like tabs for multiple-category sections!

look

at

this

!

<tabber>
|-|titleone=info
|-|titletwo=info
|-|titlethree=info
|-|titlefour=info
</tabber>

Quotes

1. REGULAR QUOTE

“

Pip pip cheerio!

„

{{Quote|text here}}

2. COLORED QUOTE

“

Pip pip cheerio!

„

{{Colored Quote|text here|Color = #value}}

Soundclouds

Somewhere Over the Rainbown - Israel Kamakawiwo'Ole

<soundcloud url="link here" color="#value" height="20" width="21"></soundcloud>

Countdowns

I've been on AGRW for:

February 27 2019 01:01:00

<span style="display: none;" class="countdown"><span class="countdowndate">December 25 2019 01:01:00</span></span>

How long until my 100th birthday:

February 26 2105 01:01:00

<span style="display: none;" class="countdown"><span class="countdowndate">December 25 2025 01:01:00</span></span>

Polls

Feedbeck Templates

Feedback templates are good to reply with under polls and demotions/promotions.

1. SUPPORT

-(support)

{{support}}

2. NEUTRAL

-(neutral)

{{neutral}}

3. OPPOSE

-(oppose)

{{oppose}}

Avatars[]

Display any user's pfp, your's or a friend's!

1. BASIC AVATAR

{{Avatar|username|15px}}

2. AVATAR WITH BORDER

<div style="border: -px solid value; width: 100px; height: 100px; overflow: hidden;">{{Avatar|username|15px}}</div>

3. CIRCULAR AVATAR

<div style="border: -px solid value; width: 110px; height: 110px; overflow: hidden; border-radius: 140px;">{{Avatar|username|110}}</div>

4. TINY AVATAR

{{Avatar|username|30}}

5. SPINNING AVATAR

Hint: hover over my pfp...

<div class="masthead-avatar">{{Avatar|username|15px}}</div>

Template Markers[]

Adding markers to pages help the community! Implementing a critique marker on your page will let other users know if they can give constructive criticism, and adding deletion markers help admins find unused pages faster.

1. CONSTRUCTIVE CRITICISM

{{Critique}}

2. DELETION

{{Delete}}

3. ARTICLE STUB

{{Stub}}

Credits[]

Banner: ZandraArt
Coding: Daffødils

Guide to Coding (Daffødils)

The Basics[]

Creating a Page

Creating a Blogpost

Creating a Sandbox

Rudimentary Text Formatting[]

Simple Formatting

Using Tags

Applying Different Text Alignment

Text Colors

Advanced Text Formatting[]

Div Classes

Links

Text Placement

Borders[]

Borders Around Text

Borders Around Images

Tables[]

Miscellaneous Extras[]

Scrollers

Collapsibles

Tabbers

Quotes

Soundclouds

Countdowns

Polls

Feedbeck Templates

Avatars[]

Template Markers[]

Credits[]

Fan Feed