Text Selection Colors

This line of CSS will change the colors when selecting text. You can try it out by selecting the coresponding text in this demo.

cyan / white Selection

::selection { color: white; background: #10a6b6; }

red / white Selection

::selection { color: white; background: red; }

magenta / lime Selection

::selection { color: lime; background: magenta; }

User Page

A couple of lines that can be used anywhere in your profile or character page!

Different icon before User

a[href*="https:/ /toyhou. se/user"] .user-name-icon:before { content: "\f5e4"; font-family: 'font awesome 6 pro'; }

Different icon before link

< a href="LINK" class="class">link< /a>

.class:before { content: "\f5e4"; font-family: 'font awesome 6 pro'; margin-right:3px; }

Change Header Toyhou.se Logo

.navbar-brand:after { content: "[text]"; text-indent: 0; display: block; line-height: initial; visibility: visible; }
.navbar-brand { text-indent:-99999px; line-height: 0 ; visibility: hidden; }

Character Gallery

This CSS will allow you to slightly modify how your characters are portrayed in your Character Gallery. An example can be found here.
If you would like to add the same subtitle / prefix to all your characters, use a{href*="."]
Please replace [character name] with either the character name or the ID (number combination in the character link) of the character. Please do not use spaces or special characters!
If your character has a space in their name, you can alternatively only use the first part of their name (e.g. "Lindsey Rose" -> "Lindsey"), though using their ID is preferred.

Character Name Edits

Name uppercase

.character-name-badge { text-transform: uppercase; }

Name lowercase

.character-name-badge { text-transform: lowercase; }

Name Capitalized

.character-name-badge { text-transform: capitalize; }

Name

.characters-gallery a[href*="[charcter name]"].character-name-badge:after { content: "[subtitle]"; display:block!important; }

Name

.characters-gallery a[href*="[charcter name]"].character-name-badge:before { content: "[prefix]"; }

Image Replacement

.characters-gallery a[href*="[character name]"].img-thumbnail { content: url('[REPLACEMENT IMAGE URL]'); }

Image Border and Transparency

a.img-thumbnail { border:5px solid #4bced7!important; }

a.img-thumbnail { border:5px solid #4bced7!important; border-radius:10px; padding:4px; }

a.img-thumbnail::hover { filter: opacity(80%); }

General Things

Text Manipulation

color change mid text

color < span style="color:[COLOR];">mid< /span> text

color < span class="text-[BOOTSTRAP];" >mid< /span > text

font weight

< p style="font-weight:800;">font-weight< /p >

Custom scrollbar

Colored scrollbar (see page scrollbar)

::-webkit-scrollbar { width:[width]; } ::webkit-scrollbar-thumb { background: [color]; } ::webkit-scrollbar-track { background: [color]; } ::webkit-scrollbar-thumb:hover { background: [color]; }

Button states

Changes an object / class if the user hovers over it with their mouse

Changes an object / class for the duration the user clicks it. Once the click has been finished it deactivates.

>> The order of ::hover ::focus and ::active is important for the functionality of the code.

Tooltips

Works for both links and normal text. for normal text I recommend using < span>.

hover me

class="tooltipster" title="text top"

hover me

class="tooltipster" title="text right" data-placement="right"

hover me

class="tooltipster" title="text left" data-placement="left"

hover me

class="tooltipster" title="text bottom" data-placement="bottom"

Class hierarchy

element

elements such as < p> and < br>. These are not classes. The same hierarchy rules apply here nonetheless.

.classOne.classTwo

These classes are in the same object
e.g. < p class="classOne classTwo">text< /p>
The CSS will only apply if the classes appear in the same object.

.classOne .subOne

These classes are not in the same object, but "staggered". The space between the classes is important to look out for.
e.g. < div class="classOne">< div class="subOne">< /div>< /div>
The CSS will only apply if the classes appear in this order. The CSS will only apply to the last class / element named (e.g. .subOne).

#content-id

objects with ID's are marked with #'s. These can be used to e.g. jump to different sections.

Combinators

Adjacent Sibling Combinator

.elementOne + .elementTwo { .. }

Any .elementTwo that comes DIRECTLY after .elementOne will be affected with that css. This will NOT affect .elementTwo that does NOT come directly after .elementOne
e.g. img + p { .. }
every paragraph DIRECTLY after an image will be affected

Child Combinator

.elementOne > .elementTwo { .. }

Any .elementTwo that is a child / part of .elementOne will be affected.
e.g. div.main-body > img { .. }
every image inside of a div with the class .main-body will be changed

General Sibling Combinator

.elementOne ~ .elementTwo { .. }

Any .elementTwo that comes after .elementOne will be affected with that css. .elementTwo does NOT have to be directly next to it, simply below and in the same container.
e.g. p ~ span { .. }
every span following after the p will be affected

Bootstrap Colors

• current
• default
• night
• pink
• teal
• bee
• velvet

$primary

$secondary

$success

$danger

$warning

$info

$faded

$dark

$light

$primary

$secondary

$success

$danger

$warning

$info

$faded

$dark

$light

$primary

$secondary

$success

$danger

$warning

$info

$faded

$dark

$light

$primary

$secondary

$success

$danger

$warning

$info

$faded

$dark

$light

$primary

$secondary

$success

$danger

$warning

$info

$faded

$dark

$light

$primary

$secondary

$success

$danger

$warning

$info

$faded

$dark

$light

$primary

$secondary

$success

$danger

$warning

$info

$faded

$dark

$light

Character Gallery [BASICS]

Folder Name [All characters]

.characters-title

Quick-Actions [View Unsorted]

.characters-folders-top

.characters-folders-top.btn btn-default

Folders [DIRECTORY]

.characters-folder

Character image { affects worlds + favorites too }

a.img-thumbnail

Character Name

.character-name-badge

Character Quick-Actions

.thumb-character-stats

Page control { affects worlds + favorites too }

.characters-gallery-pagination

.page-link

.page-item.active

Order by

#dropdownMenuButton

Tags

.characters-tags-view

Character Gallery [EXTRA]

WORK IN PROGRESS

you can find a lot more from the tabs!