Common Theme CSS classes

The CT contains several custom classes that can be used in articles. A demonstration of all standard and additional formatting can be seen here: http://scp-int-sandbox.wikidot.com/menutest:testpage

Formatting classes

.justify

Applicable on: Any DIV

Effects: Makes all text in the DIV justified. Intended to be used with .hyphens

Equivalent to Wikidot tag: [==](/Grombald/Common-Theme/wiki/==)

.hyphens

Applicable on: Any DIV

Effects: Adds automatic linebreak in words to a text. Looks best in combination with .justify

.indent

Applicable on: Any DIV or SPAN

Effects: Indents the first line of the SPAN or of every paragraph in the DIV with this class.

Variable: The Dimension of the indenting can be customized as follows; 2em is the default value:

[module css](/Grombald/Common-Theme/wiki/module-css)
:root { --ct_dim_text-indent: 2em; }
[/module](/Grombald/Common-Theme/wiki//module)``

.no-indent

Applicable on: Any element inside a DIV with the class .indent

Effects: Prevents the element with this class from indenting.

.unmargined

Applicable on: Any DIV

Effects: Removes the margins above and below paragraphs inside that DIV.

Classes for new page elements

.bblock

Applicable on: Any SPAN

Effects: Creates a censored blackbox which's text turns green when hovering over it with the cursor.

.dblock

Applicable on: Any SPAN

Effects: Creates a censored blackbox which's background turns white when hovering over it with the cursor.

.keycap

Applicable on: Any SPAN

Effects: Formats the SPAN as a grey box containing the text.

.sexy-box

Applicable on: Any DIV

Effects: Formats the DIV as a plain grey box; contains an own image container. Presumably as an alternative to blockquotes.

.tags

Applicable on: Any SPAN

Effects: Formats the SPAN like little tag-signs, like price-tags, with dark grey background and white text.

Classes imitating standard page elements

.blockquote

Applicable on: Any DIV

Effects: Formats the DIV like a blockquote element.

Imitates Wikidot tag: >

Classes for Asian scripts

.emph

Applicable on: Unknown

Effects: Emohiazises a dot.

.rt

Applicable on: Unknown

Effects: Imitates an rt element.

.ruby

Applicable on: Unknown

Effects: Imitates a ruby element.

Classes manipulating standard page elements

.borderless-tabs

Applicable on: DIV containing a tabview element.

Effects: Removes the border and background of the tabview content area.

Custom element: .content-panel

Applicable on: Any DIV

Effects: Creates the standard box with rounded edges used on the front page and in many hubs. Requires either the formatting classes .standalone and .series or sub-elements with .panel-heading, .panel-body and .panel-footer. Other classes are optional.

.standalone (formatting class)

Applicable on: Any DIV with the class .content-panel

Effects: Changes the background color to bright-grey. Should be used with .series

.series (formatting class)

Applicable on: Any DIV with the class .content-panel

Effects: Adds padding to the content-panel to use it without sub-elements. Should be used with .standalone

.centered (formatting class)

Applicable on: Any DIV with the class .content-panel

Effects: Makes the content of the content-panel centered.

.left-column (formatting class)

Applicable on: Any DIV with the class .content-panel

Effects: Makes the content-panel float left and half the available width.

.right-column (formatting class)

Applicable on: Any DIV with the class .content-panel

Effects: Makes the content-panel float righ and half the available width.

.panel-heading (sub-element class)

Applicable on: Any DIV inside the class .content-panel

Effects: The grey title bar on a content-panel.

.panel-body (sub-element class)

Applicable on: Any DIV inside the class .content-panel

Effects: The actual content area of a content-panel

.panel-footer (sub-element class)

Applicable on: Any DIV inside the class .content-panel

Effects: The grey footer bar on a content-panel.

.content-toc (sub-element class)

Applicable on: Any DIV inside the class .content-panel (should be used with thes standalone series variant)

Effects: A fake table of contents for series content-panels. Has to be filled manually.

.alternate (sub-element sub-element class)

Applicable on: Any DIV inside the class .panel-body

Effects: Alternates the background color of DIVs in the content-panel body element. Best used with .unmargined