Wiki colors

Checked correctly working examples on 2022.08.01

Right now the design of the wiki doesn’t allow using custom colors for page elements. But you can still use colors by assigning classes, that modify font/background/border color, to HTML elements. Some of them are from bootstrap 3.3.4 and some are this wiki specific.

Those classes were gathered by using browser’s DevTools on any RealmEye’s page:
(“Sources” tab > “top” > “www.realmeye.com” > “s/fa” or some other folder > “css” > “re.css” and “wiki.css”)

If you find more of useful ones, feel free to add to this page : )

TODO: CHECK THAT ELEMENTS WITH ASSIGNED CLASSES DON’T CAUSE DISRUPTIONS TO WORKINGS OF WIKI PAGES.

Usage

Add class="x y z" into start tag of HTML element (x, y and z are class names without “.”).

E.g., to add class .bg-info into <div>test</div>, format the element so:
<div class="bg-info">test</div>

Classes for colors

Result column’s cells show a <div> element that has specified class assigned to it.

In Class column, if there is something without dot in front of “.”, then that means that this class works only for <something> elements (not a real element, just an example).

If there are multiple classes connected (e.g., .one.two), then that means there must be multiple classes assigned to one element (<div class="one two"></div>) for the effect to work.

Text

Class Attribute Result Comments
no class
test
for comparison
.text-muted color:#777
test
.text-primary color:#337ab7
test
.text-success color:#3c763d
test
.text-primary color:#337ab7
test
.text-info color:#31708f
test
.text-warning color:#8a6d3b
test
.text-danger color:#a94442
test
.pet-ability-disabled color:#999
test
td.to-max color:#08C test changes placement of text too,
so careful
td.below-avg color:red test
td.above-avg color:green test
.st color:#f90 test
.ut color:#8a2be2 test

Background

Class Attribute Result Comments
no class
test
for comparison
.mp-bg background-color:#06c
test
.wis-bg background-color:#09f
test
.spd-bg background-color:#00F53D
test
.def-bg background-color:#999
test
.att-bg background-color:#c0f
test
.hp-bg background-color:#c33
test
.vit-bg background-color:#red
test
.dex-bg background-color:#f93
test
.fame-bg background-color:#daa520
test
.fp-bg background-color:peru
test
.bg-success background-color:#dff0d8
test
.bg-info background-color:#d9edf7
test
.bg-warning background-color:#fcf8e3
test
.bg-danger background-color:#f2dede
test
.label-default background-color:#777
test
.label-primary background-color:#337ab7
test
.label-success background-color:#5cb85c
test
.progress-bar-success
test
with gradient
.label-info background-color:#5bc0de
test
.progress-bar-info
test
with gradient
.label-warning background-color:#f0ad4e
test
.progress-bar-warning
test
with gradient
.label-danger background-color:#d9534f
test
.progress-bar-danger
test
with gradient
.navbar-inverse background-color:#222;
border-color:#080808
also adds
a black border
.btn-default.active
test
.btn-default.disabled.active
test

Text and background

Class Attributes Result Comments
no class
test
for comparison
.bg-primary color:#fff;
background-color:#337ab7
test
.btn-primary.active
test
.btn-primary.disabled.active
test
.btn-success.active
test
.btn-success.disabled.active
test
.btn-info.active
test
.btn-info.disabled.active
test
.btn-warning.active
test
.btn-warning.disabled.active
test
.btn-danger.active
test
.btn-danger.disabled.active
test
.alert-default
test
.alert-success background-color:#dff0d8;
color:#3c763d
test
.alert-info background-color:#d9edf7;
color:#31708f
test
.alert-warning background-color:#fcf8e3;
color:#8a6d3b
test
.alert-danger background-color:#f2dede;
color:#a94442
test
.list-group-item-success background-color:#f2dede;
color:#a94442
test

You can also mix and match previous ones (some combinations don’t work (e.g., “text-warning” with “alert-danger”)). Working examples:

<div class="btn-primary active st">test</div>
test
<div class="alert-default ut">test</div>
test

Border

TBA
Check comments below this text here while editing the page to see classes yet not in tables: