CSS Cookbook

This cookbook is a collection of useful CSS snippets to be used however you want.

CSS tutorials

Background images

If you want to change the background image of your wiki using CSS, look no further. Generally, you can accomplish this using

body {
    background-image: url(<replace this with the url of the image you want the background to be>);
    background-color: <changes the color of the background, use a hex code or color name (i.e. "red")>;
    background-blend-mode: <combines two or more background layers together with different blend modes, use one of the names of the blend mode to change the resulting background appearance (examples: "color-dodge", "screen", "multiply", "hard-light", "difference", "luminosity")>
    background-attachment: <set to scroll to allow it to scroll with the page, or to fixed to keep its position static>;
    background-position: <set to either the directions from which to start the image (i.e. "top left", "left center", "right center", etc), percentages (x% y%), or position (xpos ypos). (Note: % and pos are mixable)>
    background-repeat: <the default setting is repeating the image both vertically and horizontally, setting to repeat-y will repeat the image only vertically, setting it to repeat-x will repeat it only horizontally, and setting it to no-repeat prevents it from repeating at all.>;
}

Some fine tuning may be required, but those are the basics.

Specific CSS

Fandom has several specific built-in classes.

• .ns
  • Namespace specific class
  • This page's is .ns-0

/* Change text color in user namespace */
.ns-2 {
    color: black;
}

• .oasis-dark-theme
  • Class automatically added to wikis with a dark theme

/* Change link color on dark wikis but not light wikis */
.oasis-dark-theme a {
    color: white;
}

• .page
  • Page specific class
  • This page's is .page-CSS_Cookbook

/* Add some styling on a certain page */
.page-CSS_Cookbook h2 {
    font-weight: bold;
}

• .user (Legacy wikis only. The user specific classes aren't present on UCP)
  • User specific class
  • Logged in users are .user-logged and anonymous users are .user-anon

/* Hide category adder for anons */
.user-anon .CategorySelect.articlePage .last {
    display: none;
}

• .wiki
  • Wiki specific class
  • This wiki's is .wiki-dev

/* Add some styling only to dev wiki */
.wiki-dev .portable-infobox {
    padding: 1px;
}

Site enhancements

Blackout customization

To customize the black out that appears when viewing an image on a lightbox, use this CSS snippet below:

.blackout {
    background: #84dcff;
    mix-blend-mode: overlay;
}

Change the color of the background #84dcff to the intended color and the blending type overlay to the intended mixing mode.

Blurry background

This CSS snippet adds blur to the background.

Note: The browser support is relatively poor in the IE-Edge side, but you probably shouldn't expect everything to work if you're using IE anyways. It will just show a non-blurry image.

body::before {
    content: '';
    background-image: url(image-url);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    -webkit-filter: blur(5px);
    filter: blur(5px);
}

The blur effect should usually be limited to 2-5px. In case body already has a background defined, you can always remove it with:

body {
    background-image: none !important;
}

Cursor customization

If you want to change the icon displayed as your cursor, you can use:

/* This cursor icon will be displayed normally */
body {
    cursor: url("<insert URL to cursor icon>");
}

/* This cursor icon will be displayed when hovering or clicking on links */
a:hover, a:active {
    cursor: url("<insert URL to cursor icon>");
}

FixAceHighlightingUnits

This CSS snippet by Sophie fixes ace highlighting units inside of words and etc.

#theme-solarized-light .kw2 > .re3,
#theme-solarized-light .re1 > .re3,
#theme-solarized-dark .kw2 > .re3,
#theme-solarized-dark .re1 > .re3 {
    color: unset;
}

Fix the toolbar width in the VisualEditor

This CSS snippet by JustLeafy fixes the width of the toolbar of VisualEditor, in order to make it as wide as the editing area.

.ve-init-mw-viewPageTarget-toolbar {
    border-top: none;
}
.oo-ui-toolbar.ve-ui-toolbar.ve-ui-dir-inline-ltr.ve-ui-dir-block-ltr.ve-init-mw-viewPageTarget-toolbar {
    margin-left: -10px;
    margin-right: -10px;
}

"No article text" background

This site-wide only CSS snippet by Master Ceadeus 27 adds a background image to the missing article message:

#mw-content-text .noarticletext {
    background-image: url('<insert error image URL>');
    background-blend-mode: normal;
    background-size: cover;
}

Line-height customization

Customizing line-height is useful for Indic scripts such as Devanagari, Bengali, Kannada, Odiya, etc due to mātrās (such ि, ी, ुु and ूू),flowing off the lines in specific locations and making it look untidy. It is recommended that all wikis in the mentioned languages use this:

/* Community header */
.wds-community-header__sitename,
/* Headings */
.WikiaMainContent h2,
.WikiaMainContent h3,
.WikiaMainContent h4 {
    line-height: 150%;
}

Link Customization

This CSS snippet was created by Cleverduck09 to customize what links wiki-wide look like on hover, once they have been visited, and when they haven't been visited or hovered on, input the following code:

a:link { /*What the link looks like when you haven't clicked/hovered on it*/
  color: CODE;
  background-color: CODE;
  text-decoration: CODE;
  text-shadow:CODE;
/*More CSS Attributes*/
}
a:visited { /*What the link looks like when you've visited it*/
  color: CODE;
  background-color: CODE;
  text-decoration: CODE;
  text-shadow:CODE;
/*More CSS Attributes*/
}
a:hover { /*What the link looks like when you're hovering on it*/
  color: CODE;
  background-color: CODE;
  text-decoration: CODE;
  text-shadow:CODE;
/*More CSS Attributes*/
}
a:active { /*What the link looks like when you click it*/
  color: CODE;
  background-color: CODE;
  text-decoration: CODE;
  text-shadow:CODE;
/*More CSS Attributes*/
}

Profile background

If you want to insert a background image to the right bottom corner of profiles of users, you can use:

.UserProfileMasthead .masthead-info {
    background-image: url("<insert URL to profile background image>");
    background-repeat: no-repeat;
    background-blend-mode: normal;
    background-position: right bottom;
}

Note: Add color: white; if the background image has a dark background.

If you want to insert a background image that spans across of profiles of users, you can use:

#userProfileApp {
	background-image: url("<insert URL to profile background image>");
}

Note: Add background-repeat: no-repeat; if you have added a wider image. They may not fit and will result in a repeating background.

Responsive Modal

This CSS snippet by Noreplyz fixes the position of all modals when the desktop site on a mobile device is being used, making it easier to use these modals.

/* Responsive modal */
@media only screen and (max-width: 700px) {
  .modalWrapper {
    box-sizing:border-box;
    width:calc(100% - 20px) !important;
    left:auto !important;
    margin-left:10px !important;
  }
}

Round div corners

This CSS snippet by PhilippL rounds the corners on <div>s.

#WikiaPage div,
#WikiaPage .avatar,
#WikiaPage section,
#WikiaPage table,
#WikiaPage .WikiaMenuElement,
#WikiaPage .widget-box,
#WikiaPage .preview_mobile.preview_icon,
#WikiaPage #wpPreviewMobile,
#WikiaPage #articleCategories {
    border-radius: 5px;
}

Scrollbar customization

If you want to customize your wiki's scrollbar, you can use these CSS selectors to apply various properties to it:

/* Makes the scrollbar 8px wide */
::-webkit-scrollbar {
    width: 8px;
}

/* Makes the scrollbar track have a black background */
::-webkit-scrollbar-track {
    background: black;
}

/* Makes the scrollbar bar have a green background */
::-webkit-scrollbar-thumb {
    background: #228B22;
}

/* Makes the background for the scrollbar bar a darker shade of green when hovered */
::-webkit-scrollbar-thumb:hover {
    background: #222;
}

Note: Scrollbar customization is only supported in WebKit based browsers, like Chrome, Safari, and Opera.

Source Editor header improvements

This CSS snippet by JustLeafy adds minor improvements into the header of the classic editor, including a different color, box shadow removal and some opacity.

/* Source Editor Header Improvements */
.EditPageHeader {
    opacity: .95;
    background-color: darkgreen;
    border-bottom: none;
    box-shadow: none;
    color: #fff;
}

/* Fix wrong colored links */
.EditPageHeader > .wordmark,
.EditPageHeader > h2,
.EditPageHeader > h1 a,
.HelpLink,
.HelpLink > a,
.NotificationsLink,
.NotificationsLink > a {
    color: inherit;
}

Unhide Lightbox Add To Article Button

This CSS snippet by JustLeafy unhides the add to article option from the lightbox. The add to article option is simply used to add the image the user currently is viewing in the lightbox into an article by typing the article's name in the inputbox that will appear after clicking the "Add to Article" button.

.LightboxModal .lightbox-add-to-article {
    display: initial;
}

Username highlighting

This CSS snippet highlights links to an administrator's userpage, Message Wall, contributions and blog listing:

a[href$=":Admin's_Username"],
a[href$="/Admin's_Username"] {
    /* changes the color of the username */
    color: #006600 !important;
    /* makes the username bold */
    font-weight: bold !important;
    /* changes the font of the username */
    font-family: Arial !important;
    /* other CSS goes here */
}

Change Admin's_Username to the username of the administrator you intend to highlight, #006600 to the intended color of highlighting and Arial to the intended font for the highlight. You can also remove certain sections if you don't need them in the highlight.

Note: For usernames with spaces in them, message walls encode the spaces with %20, while the MediaWiki part encodes the spaces with underscores. So in order to highlight both, both versions need to be included in the CSS rule. For example:

a[href$=":Admin's_Username"],
a[href$="/Admin's_Username"],
a[href$=":Admin's%20Username"],
a[href$="/Admin's%20Username"]  {
.
.
.
}

In case there are other special characters in the username (such as & or ' ), those need appropriate encoding as well.

Fix the color of the file history table

This minor CSS plug-in makes a fix to the background color of the file history tables, making it from white to black.

/* Fix File History Table Color */
.oasis-dark-theme table.wikitable.filehistory > tbody > tr > td,
.oasis-dark-theme table.wikitable.filehistory > tbody > tr > th {
    background: black !important;
    color: white !important;
}
 
.oasis-dark-theme table.wikitable.filehistory > tbody > tr > td {
    border-bottom: 1px #222 solid !important;
}

Change outline style

This minor CSS plug-in customizes the style of the outline. The outline means the blue border that appears when tabbing (using Tab to navigate a page). It is a style that is not to be confused with border. An outline is a line that is drawn around elements (outside the borders) to make the element "stand out". Here is a list of the outline properties and their definitions.

• outline-color: Sets the color of the outline. (e.g. red outline).
• outline-style: Sets the style of the outline. (e.g. dotted, dashed, solid etc.)
• outline-width: Sets the width of the outline. (e.g. 3-pixel wide outline)
• outline-offset: Sets the amount of space between an outline and the edge or border of an element. (e.g. Outline with an offset that is 3 pixels large)

/* Customize the outline color, width, style and offset (note that this is an example and you can change the properties to your preferences) */
a:focus {
    outline-color: green;
    outline-offset: 1px;
    outline-style: solid;
    outline-width: 2px;
}

Round corners on Special:Community

This snippet by Louky rounds corners of Community Page modules:

.community-page-card-module-header, .community-page-card-module {
    border-radius: 40px 40px / 40px 40px;
}

Page glow

This CSS snippet by Zambiealex adds a glowing border around a wiki's page.

/* Site glow */
.WikiaPage {
    border: 2px solid #F9A000;
    box-shadow: 0px 0px 28px #F9A000;
}

Pixelized images

This snippet by Rail makes sure that low resolution pixelart images are being displayed without antialiasing applied by Fandom's image processing service.

.mw-parser-output img {
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

Reduced motion

This CSS snipet will make the duration of all CSS animations and transitions in such a short time that they are not noticeable anymore, while keeping it functional in case there's scripts that depends on animations and/or transitions to work. This can be useful for people who don't like animations, have motion-triggered vestibular spectrum disorders or want to improve page performance. The code will take effect only if the user has the prefers-reduced-motion preference on their system set to true. Snipet from web.dev.

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}

You can also remove the media query to apply it to the wiki no matter the user's preference.

Edit sections

Hidden edit sections

This UCP-only CSS snippet by Александр III hides all edit links next to section headers.

.mw-editsection {
    display: none;
}

Change icon for edit sections

This UCP-only CSS snippet by Laclale changes icon for all edit links next to section headers. You can change url that links to image.

.section-edit-pencil-icon{
    background: url('https://vignette.wikia.nocookie.net/ocraviutl/images/1/13/EditVester.png/revision/latest?cb=20180302160206&path-prefix=ja') no-repeat;
}
.section-edit-pencil-icon use{
    opacity: 0;
}

User customizations

Custom community header

This personal only CSS snippet by Anonminati makes full image graphic header.

header.wds-community-header {
        background-image: url(add your image url here...) !important;
        background-position: right center !important;
        background-size: auto !important;
}
 
.wds-community-header::before {
    background: linear-gradient(to right,rgba(255, 217, 0, 0),rgba(240, 133, 12, 0),rgba(51, 24, 0, 0.7),rgba(51, 27, 30, 0)),linear-gradient(to left,rgba(0, 0, 0, 0) 200px,#0000 430px) !important
}

Detect Username Template

This CSS snippet by TheGoldenPatrik1 places a border around the {{USERNAME}} template to prevent users from being fooled by it:

.insertusername,
.inputusername,
.InsertUsername,
.InputUsername {
    border: 1px solid;
    padding: 0.5px;
}

Force default cursor

This personal only CSS snippet forces all cursors to become default. This means that custom wiki cursors will be restored back to default. It also replaces the hand cursor when hovering over links with the default cursor.

body,
a:hover,
* {
    cursor: default !important;
}

Hide START A NEW WIKI button

This personal only CSS snippet by Headquarter8302 hides the

START A NEW WIKI

button next to the notifications dropdown.

div.wds-global-navigation__start-a-wiki {
	display: none;
}

Hide right rail

This personal only CSS snippet by Headquarter8302 hides the right rail both on legacy and UCP wikis

aside.WikiaRail {
    display: none;
}
 
aside#WikiaRailWrapper {
    display: none;
}
 
div#WikiaRailWrapper {
    display: none;
}
 
div.WikiaRail {
    display: none;
}

Hide Featured Videos

Normally, w:c:spongebob:Spongebob Squarepants (character) has a featured video, but applying this CSS snippet removes it.

This personal only CSS snippet by Sophiedp hides the featured video on articles.

/* Hide Featured Videos */
.featured-video__wrapper {
    display: none;
}

Hide main page categories

This personal-only CSS snippet by JustLeafy prevents the bottom category bar to appear on the main page:

.mainpage .article-categories {
    display: none;
}

Hide main page title

This personal-only CSS snippet by DiegoFire Network removes the title of a wiki's main page.

.mainpage .WikiaPage .page-header__title,
.mainpage .WikiaPage .page-header__separator {
    display: none;
}

Hide notifications

This personal-only CSS snippet by KnazO prevents all notifications in the bottom right that aren't talkpage notifications from showing up:

#WikiaNotifications li div[data-type="2"], /* community message notifications */
#WikiaNotifications li div[data-type="5"], /* global notifications */
#WikiaArticle #WikiaNotifications { /* notifications users put on their pages */
    display: none !important;
}

Hide rail modules

This personal only CSS snippet by Monochromatic Bunny hides certain modules from the Rail:

.community-page-rail-module, /* Removes Community part of the Wiki Activity module */
.insights-module, /* Removes Insights Module */
#recirculation-rail, /* Removes Trending Articles Module */
#wikia-recent-activity { /* Removes Wiki Activity Module */
    display: none;
}

Note: Add the following code to increase the article width and not leave out the empty space on the right rail.

#WikiaMainContent {
    width: 100%;
}

Hide Trending Fandom Articles

This personal only CSS snippet by Anonminati hides the trending Fandom articles.

#WikiaAdInContentPlaceHolder.rail-sticky-module {
    visibility: hidden;
}

Kill VisualEditor focus

Before

After

This minor CSS plugin by iynque kills the focus on the VisualEditor.

/* Clear UI—blocking VisualEditor "focus" */
body.ve .WikiaMainContent {
    box-shadow: initial;
    z-index: 1;
    border: 1px dashed rgba(230, 126, 34, 0.35);
}
 
body.ve {
    pointer-events: auto;
}

Minified PPH

This personal-only CSS snippet by KurwaAntics minifies Fandom's new article header by removing the category list and language dropdown button on the top of the header and reducing the article's title's font size:

.WikiaPage .page-header__categories,
.WikiaPage .page-header__languages {
    display: none;
}
.WikiaPage .page-header__title {
    font-size: 34px;
}

Previous WDS Button design

This minor CSS plugin by JustLeafy makes the buttons look like the previous style before they had rounded corners and a larger font size.

.wds-button {
    padding: 7px 12px;
    font-size: 10px;
    border-radius: 0 !important;
}

Selection customization

This CSS snippet by JustLeafy makes the selection background color semi-transparent.

::selection {
  background: rgba(120,120,120,0.5);
}

Slider shadow button

This CSS snippet by Anonminati makes the "Read more >" button from the slider have a drop shadow.

.wikiaPhotoGallery-slider-body {
    --mst-icon: none;    
}

.wikiaPhotoGallery-slider-body .wikia-button.secondary {
    background-color: #2193d7 !important;
    border-radius: 0px !important;
    color: black;
    font-size: 15px;
    font-weight: normal !important;
    text-transform: none;
    box-shadow: 4px 4px black;
    font-family: rubik;
}

.wikiaPhotoGallery-slider-body a:not(.wds-button).wikia-button.secondary:hover {
    background-color: #DDDDDD !important;
    filter: brightness(80%);
}

Smooth Page Load

This personal only CSS code by Cleverduck09 creates a short fade-in animation on wiki pages.

@keyframes pageload {
	from{opacity:0;}
	to {opacity:100}
}
body,
.Message__content,
.wds-dropdown,
.wds-tabs__tab,
.wds-dropdown__toggle,
.client-js{
	animation-name:pageload;
	animation-duration:0.4s;
	animation-iteration-count:1;
	animation-delay:0s;
}

Static TFA rail module

This personal only CSS snippet by JustLeafy makes the "Trending Fandom Articles" module static when scrolled past:

#WikiaAdInContentPlaceHolder.rail-sticky-module {
    position: static;
}

Ugly modules

This CSS snippet by KurwaAntics fixes ugly margins of Fandom's new rail modules.

.WikiaRail .rail-module {
    margin: 0 0 20px;
}
.WikiaRail .rail-module h2 {
    align-items: center;
    display: flex;
}

Change diff highlights

This CSS snippet by RyaNayR adds a red outline-border to diff-change highlight color-scheme. This would presumably greatly increase visibility of small, one-character changes, while also remaining palatable to the eyes on larger diffs, when anyone on your wiki is reviewing edit-differences.

.diffchange {
    border: 1px solid #f00;
}

Hide Related Stories

This personal only CSS snippet by Anonminati hides related stories.

.side-articles .side-article {
    border-top: 2px solid #333333;
    margin-bottom: 0;
    min-height: 90px;
    padding-bottom: 8px;
    display: none;
}

.side-articles .side-articles-header {
    border: 0;
    margin: 0 0 19px;
    padding: 0;
    display: none;
}

Remove Fan Feed

This is a simple CSS snippet that removes the Fan Feed which is located at the bottom of the main page, article pages and file pages.

#mixed-content-footer {
    display: none;
}

Caret Color

Caret Color is a simple stylesheet that gives the caret (or text indicator cursor) a different color. Currently, the caret can only be colored with the caret-color, but the width and other properties are not customizable yet because these properties don't exist yet. This minor CSS plug-in will affect the caret in all textareas. Note that the caret color here is red, but it can definitely be changed to a different color.

textarea {
    caret-color: red;
}

Hide Read Feeds/Announcements Notifications

This CSS snippet added by Andrewds1021 hides read notifications in the Feeds/Announcements notification drop-down (the bell icon in the global navigation header). It also re-works how the horizontal rules are added between notifications such that the last unread notification is not followed by an extraneous horizontal rule. This is for personal use only.

/* hiding read notifications */
#notificationContainer .wds-notification-card:not(.wds-is-unread) {
    display: none;
}

/* re-working horizontal rules */
#notificationContainer.wds-has-lines-between > li {
    border-bottom: 0;
    border-top: 1px solid #bed1cf;
}
 
#notificationContainer.wds-has-lines-between > li:first-child {
    border-top: 0;
}

Large thumbnails in Dynamic Categories on UCP

This CSS snippet by HumansCanWinElves and partially based on Fandom's own stylesheet, turns all the entries in category pages to look like the "Trending pages" at the top - four columns with large thumbnails. This works for users who use the default "Dynamic Categories" view.

The images look somewhat blurry, since they are low-resolution thumbnails enlarged by CSS.

Entries without an image will display the Fandom logo, and this can be replaced by changing the URL in the middle of the code. In this case, usually you will also want to change the "80%" size definition to "100%".

.ns-14 .WikiaMainContent .category-page__members.category-page__members {
    column-count: 1;
}

.ns-14 .WikiaMainContent .category-page__members-for-char {
    display: -ms-inline-flexbox;
    display: grid;
    -ms-flex-wrap: wrap;
    grid-gap: 20px;
    grid-template-columns: repeat(4,1fr);
    margin-left: 0;
}

.ns-14 .WikiaMainContent .category-page__member {
    flex-direction: column;
}

.ns-14 .WikiaMainContent .category-page__member-left {
    width: 160px;
    height: 120px;
    background: url(https://static.wikia.nocookie.net/740bff54-a89f-4c0a-97a1-a97c6b1a77a7) no-repeat center center/auto 80%;
    border: 1px solid;
    justify-content: flex-start;    
}

.ns-14 .WikiaMainContent .category-page__member-thumbnail {
    width: 160px;
    height: 120px;
    border: none;
}

.ns-14 .WikiaMainContent .category-page__member-link {
    text-align: center;
}

Text above can be found here (edit)