CSS Cookbook/ja

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

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

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

Specific CSS
Fandom has several specific built-in classes.
 * Namespace specific class
 * This page's is
 * This page's is
 * Class automatically added to wikis with a dark theme
 * Class automatically added to wikis with a dark theme
 * Page specific class
 * This page's is
 * This page's is
 * User specific class
 * Logged in users are  and anonymous users are
 * Logged in users are  and anonymous users are
 * Wiki specific class
 * This wiki's is
 * This wiki's is

Blackout customization
To customize the black out that appears when viewing an image on a lightbox, use this CSS snippet below: Change the color of the background  to the intended color and the blending type   to the intended mixing mode.

Blurry background
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. The blur effect should usually be limited to 2-5px. In case  already has a background defined, you can always remove it with:

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

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.

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

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

Note: Add  if the background image has a dark background.

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

Scrollbar customization
If you want to customize your wiki's scrollbar, you can use these CSS selectors to apply various properties to it: Note: Scrollbar customization is only supported in certain browsers, like Chrome, Opera and Safari.

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.

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.

Unhide the amount of characters remaining in chat
This CSS plugin by JustLeafy keeps the characters remaining feature unhidden no matter how many characters were typed.

Username highlighting
This CSS snippet highlights links to an administrator's userpage, Message Wall, contributions and blog listing: Change "Admin's Username" to the username of the administrator you intend to highlight,  to the intended color of highlighting and   to the intended font for the highlight. You can also remove certain sections if you don't need them in the highlight.

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.

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

Detect Username Template
This CSS snippet by TheGoldenPatrik1 places a border around the template to prevent users from being fooled by it:

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.

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

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

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

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

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

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

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

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:

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.

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

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

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

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

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.