FANDOM


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
    • 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

Cursor customization

CustomCursor

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>");
}

"No article text" background

ArticleNoTextBG

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

Profile background

CustomMastheadImage

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.

Round div corners

DivRoundedCorners

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

MinimalScrollbar

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 certain browsers, like Chrome, Opera and Safari.

Source Editor header improvements

EditorSourceHeaderImprovements

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

Username highlighting

HighlightUsername

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.

Blackout customization

Blackout

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

BlurBackground

This CSS snippet by Dorumin 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;
}

Unhide Lightbox Add To Article Button

A2A

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

Fix the toolbar width in the VisualEditor

VEfixed

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

Unhide the amount of characters remaining in chat

UnhideRemainingCharacters

This CSS plugin by JustLeafy keeps the characters remaining feature unhidden no matter how many characters were typed.

/** Unhide Characters Remaining **/
 
/* Display the "characters remaining" feature at any time */
 
body .remaining {
    display: initial;
    font-weight: bold;
    margin-right: 5px;
    margin-top: 30px;
    z-index: 1;
}
 
/* Limiting the width of the chat message inputbox to keep space for this feature */
 
.Write [name="message"] {
    width: 96%;
}

User customizations

Detect Username Template

DetectUsername

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

Hide main page categories

NoCat

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

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

Hide notifications

HideNotifications

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

HideRail

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

.WikiaRail .chat-module, /* Removes Chat Module */
.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%;
}

Static TFA rail module

StaticTFA

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

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

Selection customization

CustomSelection

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

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

Ugly modules

UglyModules

This personal only 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;
}

Obscure advertisements

ObscureAds

This personal only CSS snippet by Dorumin obscures advertisements, meaning that all advertisements will be semi-transparent.

#WikiaTopAds,
#top-right-boxad-wrapper,
#WikiaArticleBottomAd,
#WikiaAdInContentPlaceHolder,
.WikiaAdInContent,
.wikia-ad,
.home-top-right-ads,
div[id^="br_video_player_"],
.FIOnDemandWrapper,
#mixed-content-footer {
    opacity: .5;
}

Slider shadow button

Readmore

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%);
}

Previous WDS Button design

OldWDSButtons

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

Kill VisualEditor focus

Kill visual editor focus-before

Before

Kill visual editor focus-after

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