CSS Formatting

Various useful CSS for quick and easy usage on other wikis.

Main Page / Background Formatting for FandomDesktop
Adjusts default header gradient to fade from top to bottom so it blends into the background. .fandom-community-header__background::before { --my-header-color-rgb:20,20,20; background-image: linear-gradient(to bottom, rgba(var(--my-header-color-rgb), 1) 0%, rgba(var(--my-header-color-rgb), 0.8) 60%, rgba(var(--my-header-color-rgb), 0) 100%); }

Manually add a full background image.
 * Adjust image by changing:
 * To use different backgrounds for light vs. dark theme, just replace  with   and

/* Add background image */ body.skin-fandomdesktop {    background-image: url('/wiki/Special:FilePath/Wiki-background'); background-attachment: fixed; background-size: cover; }

Switch off gradient strip /* switch off gradient under the strip */ .fandom-community-header__background:before { display: none; }

Alternate method to adjust background to cover. body { background: #000000 url(https://static.wikia.nocookie.net/wreckfest/images/5/50/Wiki-background/revision/latest) no-repeat fixed center top; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
 * Adjust image by changing:

Solution for white or black logos used on the main page or in articles. Problem: On some of the Wikis, used icons or logos are either solid black or white, but with alpha channel (transparent background). They unfortunately often don't show properly on either the light or the dark theme.

1. Use a filter and invert the colour Use this IF icons are white: .theme-fandomdesktop-light .yourclass img { -webkit-filter: invert(100%); filter: invert(100%); }

OR

Use this IF icons are dark: .theme-fandomdesktop-dark .yourclass img { -webkit-filter: invert(100%); filter: invert(100%); }

Examples: Steelrising Wiki, Grow: Song of the Evertree

2. Use a filter and add a shadow Dark shadow .theme-fandomdesktop-light .yourclass img { -webkit-filter: drop-shadow(0px 0px 10px #000); filter: drop-shadow(0px 0px 3.5px #000) drop-shadow(1px 1px 1px #000); }

OR

Light shadow .theme-fandomdesktop-dark .yourclass img { -webkit-filter: drop-shadow(0px 0px 10px #FFF); filter: drop-shadow(0px 0px 3.5px #FFF) drop-shadow(1px 1px 1px #FFF); }

You also can adjust the color and other settings like blur, vertical and horziontal offset to your liking. See also: Drop-Shadow generator

Example: Schurken Wiki

3. Exchange the logo version .theme-fandomdesktop-light .yourclass { background-image: url(link to dark logo version); background-size: 100%; background-repeat: no-repeat; float: left; position: relative; }

.theme-fandomdesktop-dark .yourclass { background-image: url(link to white logo version); background-size: 100%; background-repeat: no-repeat; float: left; position: relative; }

Example: Ooblets Wiki

Gamepedia Wikis often use a 2 column or 3 column responsive layout which you can find here Default Loadout Wiki.

Note: To show this, you need to configure and login to Viscosity (VPN). (Probably switched off again now.)

While this was used as a "standard" on most Wikis, there are a few Wikis that use "responsive flex templates" and a different responsive layout like in this Example. You easily can see this when clicking edit on the main page and read lines starting with "RFP".