Animepedia:Visual Classes

From Animepedia

Please note that this is Animepedia, if you came to this page from a link on another Wikia in the Wikia ACG, then you should use the back button on your browser to return.

Rules

Standards

Local Policies

Wikia ACG Policies

Policy

Copyrights

Fair use policy

Jump start from Wikipedia policy

Guides

Request for Deletion

How to copy from Wikipedia

Step-by-step guide to a Wikipedia base

Enough for a wiki?

Setup (admin guide)

Info

IRC

Tips and Tricks

ACG Worlds

Tech pages

Visual Classes

FAQ

What will happen?

Extended information

Wikia ACG Terminology

About

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

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

{| class="class name"
|-
|| Various Text
|}

[edit] Classes

[edit] 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 cell-icon-* classes to give the icon cells some extra padding.

[edit] 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 text-(small|medium|normal|large|huge) 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.

[edit] 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 ''italic'' syntax to give text an italicized style.
style-bold: This class is an alternative to the '''bold''' 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.

[edit] 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.

[edit] 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 list-noicon 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)

[edit] 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.

[edit] 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)

[edit] TOC Styling

toc-horiz: This class is used outside of a __TOC__ to make the TOC a horizontal TOC instead of a vertical TOC.
toc-comma: This class is used outside of a __TOC__ in conjunction with toc-horiz 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 __TOC__ to remove the numbers on the TOC within.
toc-clear: This class is used outside of a __TOC__ 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 __TOC__ to remove the ability to collapse the TOC.
toc-start-(1-6): This class is used outside of a __TOC__ to make a TOC start at a header level deeper than the normal h1 level.

.toc-limit-5(1-6): This class is used outside of a __TOC__ to limit the header level that the TOC may list.

[edit] 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 scrollable class is preferred and does not work exactly the same as the overflow-auto. The scrollable 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.

[edit] JS Classes

[edit] Sortable

The sortable class is used to make a table sortable. In addition to the sortable class, unsortable 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.

[edit] 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.

[edit] 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 collapsed class the table will be collapsed by default.

[edit] See Also

Box Classes for the details of the complex and highly useful Box CSS Classes.
Userboxes/color classes for the color classes used in userboxes.

Facts about Visual ClassesRDF feed

Create a new article Upload a new image
Recent changes Help	Random page Special pages Recent changes Random page