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:  `url('/wiki/Special:FilePath/Filename.jpg')`
* To use different backgrounds for light vs. dark theme, just replace `body.skin-fandomdesktop` with `body.theme-fandomdesktop-light` and `body.theme-fandomdesktop-dark`

```
/* 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.

* Adjust image by changing:  `url(https://static.wikia.nocookie.net/wreckfest/images/5/50/Wiki-background/revision/latest)`

```
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;
}

```

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

## Shadow for top menu links

In some cases, the links in the top menu can be enhanced by adding a filter setting.

**NOTES:** Without the z-index setting the tabs will fall behind the page content and links will become unavailable.

**Example:**

```
.theme-fandomdesktop-light .fandom-community-header__top-container,
.theme-fandomdesktop-light .fandom-community-header__local-navigation {
    filter: drop-shadow(0px 0px 3px white) drop-shadow(0px 0px 8px white);
    z-index: 1;
}

```

You also can also use `.theme-fandomdesktop-dark`. Usage depends on the theme background.

## Gamepedia Wikis

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".

>> You can now also just use the standard Fandom 2 column layout from Starter Fandom. Keeps all the ads in place!