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.
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>
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.
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 |
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 |
with gradient | ||
.label-info |
background-color:#5bc0de | test |
|
.progress-bar-info |
with gradient | ||
.label-warning |
background-color:#f0ad4e | test |
|
.progress-bar-warning |
with gradient | ||
.label-danger |
background-color:#d9534f | test |
|
.progress-bar-danger |
with gradient | ||
.navbar-inverse |
background-color:#222; border-color:#080808 |
also adds a black border |
|
.btn-default.active |
test |
||
.btn-default.disabled.active |
test |
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 |
TBA
Check comments below this text here while editing the page to see classes yet not in tables: