Animanga Wiki:CSS Visual classes

This is a guide to the various CSS and JS Markup classes that can be used on all wiki in the for various styling and interactive visual effects.

Most of these classes are meant to be used within the  parameter within a WikiTable. The normal syntax for their use would be:

Element Sizing

 * fill-horiz: This class stretches an element horizontally so that it's width fills the content area.
 * fill-vert: This class stretches an element vertically so that it's height fills the content area.
 * half-horiz: This class sizes an element so that it takes up half the content area with it's width.
 * half-vert: This class sizes an element so that it takes up half the content area with it's height.
 * quarter-horiz: This class sizes an element so that it takes up a quarter of the content area with it's width.
 * quarter-vert: This class sizes an element so that it takes up a quarter of the content area with it's height.
 * fill-td td: This class stretches a table's td elements so that they fill up and dominate over th elements.
 * fill-th th: This class stretches a table's th elements so that they fill up and dominate over td elements.
 * cell-icon-25: This class sizes a td so that it nicely fits a 25x25px icon.
 * cell-icon-35: This class sizes a td so that it nicely fits a 35x35px icon.
 * cell-icon-64: This class sizes a td so that it nicely fits a 64x64px icon.
 * cell-icon-125: This class sizes a td so that it nicely fits a 125x125px icon.
 * withpadding: This class is used with the  classes to give the icon cells some extra padding.

Text Sizing

 * text-small: This class sizes text with a small text size.
 * text-medium: This class sizes text with a text size a little smaller than normal.
 * text-normal: This class sizes text with a good normal text size, not always matching the default.
 * text-large: This class gives text a large text size.
 * text-huge: This class gives text a huge text size.
 * text-growbold: This class is used with the  classes. In some cases a font may ignore bold at some sizes. By using this class with the others a bold element's size is expanded so that bold will have a proper effect on the text.

Text Styling

 * Note: The italic and bold classes here are primarily used not within content, but within templates or elements where a number of element areas are defined using different classes and use of a styling class is cleaner than the use of the normal WikiText syntax.


 * style-italic: This class is an alternative to the  syntax to give text an italicized style.
 * style-bold: This class is an alternative to the  syntax to give text an bolded style.
 * style-underline: This class gives text an underline.
 * style-strike or style-strikethrough: This class gives text a strikethrough.
 * style-overline: This class gives text an overline.

Alignment and Floats

 * left: This class give text a horizontal left alignment.
 * center: This class give text a horizontal center alignment.
 * right: This class give text a horizontal right alignment.
 * justify: This class give text a horizontally justified alignment.
 * top: This class give text a vertical top alignment.
 * middle: This class give text a vertical middle alignment.
 * bottom: This class give text a vertical bottom alignment.


 * cell-align-left: This class gives all td and th cells inside of a table a horizontal left alignment.
 * td-align-left: This class gives all td cells inside of a table a horizontal left alignment.
 * th-align-left: This class gives all th cells inside of a table a horizontal left alignment.
 * cell-align-center: This class gives all td and th cells inside of a table a horizontal center alignment.
 * td-align-center: This class gives all td cells inside of a table a horizontal center alignment.
 * th-align-center: This class gives all th cells inside of a table a horizontal center alignment.
 * cell-align-right: This class gives all td and th cells inside of a table a horizontal right alignment.
 * td-align-right: This class gives all td cells inside of a table a horizontal right alignment.
 * th-align-right: This class gives all th cells inside of a table a horizontal right alignment.
 * cell-align-top: This class gives all td and th cells inside of a table a vertical top alignment.
 * td-align-top: This class gives all td cells inside of a table a vertical top alignment.
 * th-align-top: This class gives all th cells inside of a table a vertical top alignment.
 * cell-align-middle: This class gives all td and th cells inside of a table a vertical middle alignment.
 * td-align-middle: This class gives all td cells inside of a table a vertical middle alignment.
 * th-align-middle: This class gives all th cells inside of a table a vertical middle alignment.
 * cell-align-bottom: This class gives all td and th cells inside of a table a vertical bottom alignment.
 * td-align-bottom: This class gives all td cells inside of a table a vertical bottom alignment.
 * th-align-bottom: This class gives all th cells inside of a table a vertical bottom alignment.


 * float-left: This class floats an element left.
 * float-left-clear: This class floats an element left and clears other elements off from that size.
 * float-right: This class floats an element right.
 * float-right-clear: This class floats an element right and clears other elements off from that size.

Lists

 * list-noicon: This class removes the left icon or bullet from a list and pulls out the left margin.
 * list-icon: This class is used to return the left bullet to lists inside of an element which has the icon/bullet switched off because of the use of a  in the class of an element it is contained within.
 * list-inline: This class is used to turn a list into an inline list.
 * list-comma: This class is used to turn an inline list into a comma separated list. (Note: IE Does not support the :after, so the commas will not display in IE based browsers)

Page Cleanup

 * nowrap: This class is used to prevent the text within an element from wrapping.
 * nowrap-all: This class is used to prevent the text within all the elements inside of it from wrapping.
 * nowrap-td: This class is used to prevent the text within all the td's inside of it from wrapping.
 * nowrap-th: This class is used to prevent the text within all the th's inside of it from wrapping.
 * hide: This class is used to make an element disappear or otherwise not show on the screen.
 * inline-p: This class is used to make all inside p elements inline in cases where extra ones may interfere with markup.
 * inline-div: This class is used to make all inside div elements inline in cases where extra ones may interfere with markup.

Header Modification

 * Note: These work on the headers within a element not on actual h# elements. They are meant to be used mainly to style normal ==headers== within tables which have sections.


 * header-noline: This class is used to remove the underline from a header.
 * header-left: This class is used to align a header left.
 * header-center: This class is used to align a in the center.
 * header-right: This class is used to align a to the right.
 * header-bold: This class is used to make a header bold.
 * header-italic: This class is used to make a header italic.
 * header-underline: This class is used to give a header an underline. (An underline does not look the same as the normal line below the header)

TOC Styling
.toc-limit-5(1-6): This class is used outside of a  to limit the header level that the TOC may list.
 * toc-horiz: This class is used outside of a  to make the TOC a horizontal TOC instead of a vertical TOC.
 * toc-comma: This class is used outside of a  in conjunction with   to make the horizontal TOC a comma list. (Note: IE Does not support the :after, so the commas will not display in IE based browsers)
 * toc-nolevel: This class is used outside of a  to remove the numbers on the TOC within.
 * toc-clear: This class is used outside of a  to remove all normal TOC styling from it so that an element outside using the #TOC id will be the one styled instead. The primary purpose of this is to add something extra like a Archive list to the TOC.
 * toc-nohide #toc #toctitle: This class is used outside of a  to remove the ability to collapse the TOC.
 * toc-start-(1-6): This class is used outside of a  to make a TOC start at a header level deeper than the normal h1 level.

Scrolling

 * overflow-visible: This class returns the normal overflow which makes everything visible.
 * overflow-auto or scrollable: This class is used to give an auto overflow meaning that when a element is to large for it's limited size, it will begin to scroll. (The  class is preferred and does not work exactly the same as the  . The   class is designed for use with spans, divs, and tables. In the case of a table, instead of making it scrollable it will make the tbody scrollable so that the header will still display when the table is scrolled down.)
 * overflow-hidden: This class returns the normal overflow which makes everything visible.

Sortable
The sortable class is used to make a table sortable. In addition to the sortable class,  may be used on the first row header cells for columns which should not be sortable.

Note that using this also gives each row a odd and even class so that in some cases they may be styled with alternating colors.

NavFrame
The NavFrame class is used to make div's, span's, and fieldset's collapsible. It uses the NavFrame as a container, the NavHead for the header which contains the toggle link, and the NavContent for the content area which will get collapsed. An element may also have a NavPic class which is meant for an image which is part of the collapsible box, outside of the content area.

Collapsible
The collapsible class is used to make a table collapsible. The first th is the header where the toggle link is placed, and all the rows inside are the content areas which are collapsed. Unlike the NavFrame this cannot be put inside of another table with a collapsible class, but by adding the  class the table will be collapsed by default.