Help:Coding Reference

haha guess what

I went to edit my existing code ref and dislike how I did everything so instead of fixing it I'm just. Remaking it.

What I need to include:


 * How to make polls (and note about condensed poll)
 * Fonts (and BIG note about fallback fonts)
 * Collapsible windows Very important!
 * Standard collapsible window
 * Table + ul/ol collapsible window
 * Custom collapsible window
 * Floating images
 * Wiki notifications don't work on UCP wikis due to missing CSS. Are unlikely to return?

Polls
Main Article: mw:Extension:AJAXPoll

Note: Polls do not currently work on UCP wikis.

Standard Poll
Question Answer 1 Answer 2 Answer 3

Condensed Poll
Note: This style of poll only works on the fanon wiki as it relies on custom CSS styles.

Question Answer 1 Answer 2 Answer 3

Fonts
Note that if you try to use a font installed on your computer but not on someone else's they will get standard serif font instead of what you intended. For this reason it is important to add fallback fonts.

This wiki has two installed fonts available,  and. These two fonts won't work off this wiki.

Serif Fonts
Generally safe serif fonts:


 * Adelon Book
 * To use this font add  to your code.
 * Note that this font is available only on this wiki.
 * Georgia
 * To use this font add  to your code.
 * Im Fell English
 * To use this font add  to your code.
 * Note that this font is available only on this wiki.
 * Liberation Serif
 * To use this font add  to your code.
 * Times New Roman
 * To use this font add  to your code.
 * Serif fallback font
 * To use this font add  to your code.

Sans-Serif Fonts
Generally safe sans-serif fonts:


 * Arial
 * To use this font add  to your code.
 * Rubik
 * Note that this font is loaded by FANDOM and as such is available only on FANDOM wikis
 * To use this font add  to your code.
 * Tahoma
 * To use this font add  to your code.
 * Verdana
 * To use this font add  to your code.
 * Sans-Serif fallback font
 * To use this font add  to your code.

Monospace Fonts
Generally safe monospace fonts:


 * Consolas
 * To use this font add  to your code.
 * Courier New
 * To use this font add  to your code.
 * Lucida Console
 * To use this font add  to your code.
 * Monaco
 * To use this font add  to your code.
 * Monospace fallback font
 * To use this font add  to your code.

Infobox
A standard infobox with styles to make it a little prettier than the one on the Coding Guide.

Quotes Boxes
Quotes to use on OC pages.

Standard Quote Box
Uses  tags to display content. Takes up 100% of available space up automatically and auto-sizes to fit beside infoboxes properly.

Ut sit amet tempor odio. Donec posuere diam ut aliquet dapibus. Quisque metus libero, laoreet eu nulla nec, scelerisque posuere tellus. ~Speaker

Table Quote Box
Uses a Wikitext table to display content. Takes up the minimum amount of space to fit all text on a single line and auto-sizes to fit beside infoboxes properly.

Collapsible Windows
Main Article: mw:Manual:Collapsible elements

Basic Collapsible Windows
The standard method of collapsing/expanding things. By adding the  class after the   class you can set it to be collapsed by default instead of expanded by default.

You can set custom collapse/expand messages by setting  and   attributes. These attributes also apply to Collapsible Tables and Collapsible Lists but examples are not shown for brevity.

Expanded Window
 This text is collapsible. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 * Default messages

 This text is collapsible. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 * Custom collapse/expand message

Collapsed Window
 This text is collapsible. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 * Default messages

 This text is collapsible. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 * Custom collapse/expand message

Collapsible Tables
When given the  class tables react differently than most tags.

If a caption is set then the collapse/expand button will appear beside it:
 * With Table Caption

If no caption is set the collapse/expand button will appear in the last cell of the first row:
 * Without Table Caption

Collapsible Lists
When given the  class lists react differently than most tags. Instead of floating to the right side of the page, the collapse/expand button is placed in an  with the   style applied, above all the other   tags. This makes it ideal for use in code with centered text due to the lack of a float.

The result is the same regardless of if you chose to use an ordered list or an unordered list.

 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet 

Custom Collapsible Windows
For accessibility purposes custom collapsible windows should have the style applied to make it obvious you can click on them.

Any type of html tag available on the wiki may be turned into a custom toggle button, for the following examples a  tag is used.

To prevent the closing animation custom collapsible windows have when loading a page you can give them the  style.

Custom Expanded Window
Toggle button Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Custom Collapsed Window
Toggle button Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Fixed Image
An image that floats along with you as you scroll through the page. Use CSS properties,  ,  , and   to set where the image appears.

To ensure the image has the proper alignment, make sure the only parameter the image has is it's size.