View source for CSS Cookbook

<noinclude>{{LangSelect}}</noinclude><includeonly>
{{Languages}}
{{tocright}}
{{{intro|This '''cookbook''' is a collection of simple but useful CSS snippets to be used however you want.}}}

== {{{css-tutorial|CSS tutorials}}} ==
=== {{{background-images|Background images}}} ===
{{{background-images-info|If you want to change the background image of your wiki using CSS, look no further. Generally, you can accomplish this using:}}}
{{#tag:syntaxhighlight|
body.mediawiki {
	/* {{{background-image|Replace <URL> with the URL of the image you want the background to be.}}} */
	background-image: url("<URL>");
	/* {{{background-color|Changes the color of the background, use a hex code or color name (i.e. "red").}}} */
	background-color: 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-blend-mode: normal;
	/* {{{background-attachment|Set to "scroll" to allow it to scroll with the page, or to "fixed" to keep its position static}}} */
	background-attachment: scroll; 
	/* {{{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-position: top left; 
	/* {{{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.}}} */
	background-repeat: repeat;
}
|lang="css"
}}
{{{background-images-info-1|Some fine tuning may be required, but those are the basics.}}}

=== {{{message-wall-user-tags|Message Wall user tags}}} ===
[[File:CSSMessageWallTagsUCP.png|thumb]]
{{{message-wall-user-tags-intro|This snippet by [[User:Caburum|Caburum]] allows you to add a customizable "tag" to messages and forum posts by a specified user. It can be used to distinguish administrators, bureaucrats, the wiki's founder etc. It can be used for any purpose.}}}
{{#tag: syntaxhighlight|
[class^='EntityHeader_name__'][href$="{{{username|Username}}}"]::after {
	content: " ({{{tag|Tag}}})";
	color: var(--theme-page-text-color);
}
|lang="css"}}
{{{message-wall-user-tags-usage|Change <code>Username</code> to the username (make sure to replace any spaces with <code>%20</code> or, if the name uses special characters, you can transform it in an [https://www.urlencoder.org/ URL Encoder] and use its result) and change <code>(Tag)</code> to whatever you want to show after. You can type any other CSS rules to customize the appearance of the tag. The above example, in addition to adding the tag, makes the text color the same color as other text, but this can be changed.}}}

=== {{{specific-css|Specific CSS}}} ===
{{{specific-css-info|Fandom has several specific built-in classes.}}}
* <code>.ns</code>
** {{{ns-info|Namespace specific class}}}
** {{{ns-info-1|This page's is <code>.ns-{{NAMESPACENUMBER}}</code>}}}
{{#tag:syntaxhighlight|
/* {{{ns-comment|Change text color in user namespace}}} */
.ns-2 {
	color: black;
}
|lang="css"
}}
* <code>.theme-fandomdesktop-light</code> {{int:and}} <code>.theme-fandomdesktop-dark</code>
** {{{light-and-dark|Light and dark theme specific classes}}}
{{#tag:syntaxhighlight|
/* {{{light-and-dark-comment|Change link color on dark wikis but not light wikis}}} */
.theme-fandomdesktop-dark a {
	color: white;
}
|lang="css"
}}
* <code>.page</code>
** {{{page-info|Page specific class}}}
** {{{page-info-1|This page's is <code>.page-CSS_Cookbook</code>}}}
{{#tag:syntaxhighlight|
/* {{{page-comment|Add some styling on a certain page}}} */
.page-CSS_Cookbook h2 {
	font-weight: bold;
}
|lang="css"
}}
* <code>.wiki</code>
** {{{wiki-info|Wiki specific class}}}
** {{{wiki-info-1|This wiki's is <code>.wiki-dev</code>}}}
{{#tag:syntaxhighlight|
/* {{{wiki-comment|Add some styling only to dev wiki}}} */
.wiki-dev .portable-infobox {
	padding: 1px;
}
|lang="css"
}}

== {{{site-enhancements|Site enhancements}}} ==
=== {{{image-styling|Image styling}}} ===
{{{image-styling-info|This CSS manipulates the appearance of a specific image on your wiki, use this CSS snippet below, replacing <code>Filename.ext</code> with an image on your wiki (for example: <code>Example.jpg</code>):}}}
{{#tag:syntaxhighlight|
img[src*="Filename.ext"] {
	/* {{{is-comment-1|Apply filters to manipulate image color}}} */
	filter: none;
	/* {{{is-comment-2|Combines color with the site background, and the image. (supported blend modes include "color", "color-burn", "color-dodge", "darken", "difference", "exclusion", "hue", "lighten", "luminosity", "multiply", "normal", "overlay", "plus-lighter", "saturation", "screen", and "soft-light"}}} */
	mix-blend-mode: multiply;
	/* {{{is-comment-3|Set the opacity, to make the image opaque, or transparent.}}} */
	opacity: 1;
	/* {{{css-more-comment|More CSS attributes}}} */
}

/* {{{is-comment-4|Prevent effects from being used on file history, especially when hovering image on it's file page to enable viewing original images, incase vandalized.}}} */
.filehistory img {
	filter: revert !important;
	mix-blend-mode: revert !important;
	opacity: revert !important;
	/* {{{css-more-comment|More CSS attributes}}} */
}

#file img:hover {
	filter: revert !important;
	mix-blend-mode: revert !important;
	opacity: revert !important;
	/* {{{css-more-comment|More CSS attributes}}} */
}
|lang="css"
}}

{{{image-styling-info-1|To apply CSS image manipulation for light and dark skins, place <code>.theme-fandomdesktop-</code> (for desktop), and <code>.theme-fandommobile-</code> (for mobile), with the class suffix <code>light</code> or <code>dark</code> before <code>img</code>.}}}
=== {{{blackout-customization|Blackout customization}}} ===
[[File:Blackout.png|thumb]]
{{{blackout-customization-info|To customize the black out that appears when viewing an image on a lightbox, use this CSS snippet below:}}}
<syntaxhighlight lang="css">
.blackout {
	background: #84dcff;
	mix-blend-mode: overlay;
}
</syntaxhighlight>
{{{blackout-customization-info-1|Change the color of the background <code>#84dcff</code> to the intended color and the blending type <code>overlay</code> to the intended mixing mode.}}}

=== {{{gallery-styling|Gallery styling}}} ===
{{{gallery-styling-info|This CSS snippet by [[User:ValleyMaster|ValleyMaster]] will change the default appearance of galleries.}}}
{{#tag:syntaxhighlight|
/* {{{gs-comment-1|Alters the whole gallery}}} */
.wikia-gallery {
	/* {{{css-attr-comment|CSS Attributes}}} */
}

/* {{{gs-comment-2|Alters each gallery item}}} */
.wikia-gallery-item {
	text-align: center;
	padding: 0px;
	margin: 5px;
	background-color: rgba(0,0,0,0.1);
	border-radius: 1em;
	/* {{{css-more-comment|More CSS Attributes}}} */
}

/* {{{gs-comment-3|Removes the default border of the images}}} */
.wikia-gallery-item .thumb .gallery-image-wrapper {
	border-style: none;
}
|lang="css"
}}
{{{gallery-styling-info-1|If you want a custom image border, remove <code>border-style: none</code> and replace it with <code>border: _px solid color</code>.<br>You may also apply a <code>border-radius</code> if you'd like, and this works even with <code>border-style: none</code> active.}}}

{{#tag:syntaxhighlight|
/* {{{gs-comment-4|Changes the default position of the images to center}}} */
.wikia-gallery-position-left {
	text-align: center;
}

/* {{{gs-comment-5|Alters the caption of the images}}} */
.theme-fandomdesktop-dark .lightbox-caption {
	border-top: 1px solid #4d4d4d;
	border-bottom: 1px solid #4d4d4d;
	/* {{{css-more-comment|More CSS Attributes}}} */
}

.theme-fandomdesktop-light .lightbox-caption {
	border-top: 1px solid #cecece;
	border-bottom: 1px solid #cecece;
	/* {{{css-more-comment|More CSS Attributes}}} */
}
|lang="css"
}}

=== {{{collapse-header|Expand/Collapse toggle button design}}} ===
{{{collapse-info|This CSS snippet will allow you to design the expand/collapse toggle button.}}}
{{#tag:syntaxhighlight|
/* {{{ch-comment-1|Alters the appearance of the toggle button.}}} */
.mw-collapsible-text {
	/* {{{css-attr-comment|CSS Attributes}}} */
}

/* {{{ch-comment-2|Removes the default square brackets (for design purposes) — from MediaWiki.}}} */
.mw-collapsible-toggle-default:before, .mw-collapsible-toggle-default:after {
	display: none;
}

/* {{{ch-comment-3|Changes the default position of the toggle button to left instead of right. — from MediaWiki.}}} */
.mw-collapsible span.mw-collapsible-toggle {
	float: none;
	margin-left: 0;
	margin-right: 1em;
}
|lang="css"
}}
{{{collapse-info-1|Sometimes, the toggle button may not be better on the left side. This CSS snippet by [[User:ValleyMaster|ValleyMaster]] will allow you to change the position back to right.}}} 
<syntaxhighlight lang="css">
.float-right .mw-collapsible span.mw-collapsible-toggle {
	float: right;
}
</syntaxhighlight>
{{{collapse-info-2|To apply this, close the tag with <code>mw-collapsible</code> with <code><nowiki><div class="float-right"></div></nowiki></code>.<br>
For example:}}}
<syntaxhighlight lang="html">
<div class="float-right">
<div class="mw-collapsible mw-collapsed">
text 1
<div class="mw-collapsible-content">
text 2
</div>
</div>
</syntaxhighlight><br>
{{{collapse-info-3|Table example:}}}
<syntaxhighlight lang="wikitext">
<div class="float-right">
{| class="wikitable mw-collapsible mw-collapsed"
!Text 1
|-
|Text 2
|}
</div>
</syntaxhighlight>

=== {{{bs-header|Block-style header}}} ===
[[File:BlockHeader.png|thumb]]
{{{bs-header-info|This CSS snippet by [[User:JustLeafy|JustLeafy]], makes the page header looks like a block style with a solid background color. It indirectly returns the style of the Oasis-style header.}}}
<syntaxhighlight lang="css">
.fandom-community-header {
	background: var(--theme-accent-color);
	color: var(--theme-accent-label-color);
	padding: 15px 20px 5px 20px;
}

.page {
	margin-top: 0;
}
</syntaxhighlight>

=== {{{chd|Condensed header dropdowns}}} ===
[[File:CondensedHeaderDropdowns.png|thumb]]
{{{chd-info|This CSS snippet by [[User:JustLeafy|JustLeafy]], makes the style of the dropdowns of the page header look more condensed.}}}
<syntaxhighlight lang="css">
.fandom-community-header__local-navigation .wds-dropdown__content {
	padding: 0 !important;
}

.fandom-community-header__local-navigation .wds-dropdown__content .wds-list.wds-is-linked > li {
	padding: 0 6px !important;
}
</syntaxhighlight>

=== {{{themed-scrollbar|Wiki-themed scrollbar}}} ===
[[File:Themed scrollbar.png|right|15px]]
{{{themed-scrollbar-info|This CSS snippet by [[User:Headquarter8302|Headquarter8302]] styles the wiki's scrollbar with the current theme that is being applied, regardless of color and theme selection (light or dark). The snippet uses the relatively new [https://caniuse.com/mdn-css_properties_scrollbar-color <code>scrollbar-color</code>] property introduced in the [https://drafts.csswg.org/css-scrollbars/#scrollbar-color CSS Scrollbars Styling Module Level 1 spec].}}}
<syntaxhighlight lang="css">
:root {
  scrollbar-color: var(--theme-accent-color) var(--theme-accent-color--hover);
}
</syntaxhighlight>

=== {{{lh-customization|Line-height customization}}} ===
{{{lh-customization-info|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:}}}
<syntaxhighlight lang="css">
.wds-community-header__sitename,
.fandom-community-header a,
#content h2,
#content h3,
#content h4 {
	line-height: 1.5;
}
</syntaxhighlight>

=== {{{link-customization|Link customization}}} ===
{{{link-customization-info|This CSS snippet was created by [[User:Cleverduck09|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:}}}
{{#tag:syntaxhighlight|
/* {{{a-link-comment|What the link looks like when you haven't clicked/hovered on it}}} */
a:link {
	color: {{{code|CODE}}};
	background-color: {{{code|CODE}}};
	text-decoration: {{{code|CODE}}};
	text-shadow: {{{code|CODE}}};
	/* {{{css-more-comment|More CSS Attributes}}} */
}

/* {{{a-visited-comment|What the link looks like when you've visited it}}} */
a:visited {
	color: {{{code|CODE}}};
	background-color: {{{code|CODE}}};
	text-decoration: {{{code|CODE}}};
	text-shadow: {{{code|CODE}}};
	/* {{{css-more-comment|More CSS Attributes}}} */
}

/* {{{a-hover-comment|What the link looks like when you're hovering on it}}} */
a:hover { 
	color: {{{code|CODE}}};
	background-color: {{{code|CODE}}};
	text-decoration: {{{code|CODE}}};
	text-shadow: {{{code|CODE}}};
	/* {{{css-more-comment|More CSS Attributes}}} */
}

/* {{{a-active-comment|What the link looks like when you click it}}} */
a:active { 
	color: {{{code|CODE}}};
	background-color: {{{code|CODE}}};
	text-decoration: {{{code|CODE}}};
	text-shadow: {{{code|CODE}}};
	/* {{{css-more-comment|More CSS Attributes}}} */
}
|lang="css"
}}

=== {{{profile-background|Profile background}}} ===
[[File:CustomProfileImage.png|thumb|400px]]
{{{profile-background-info|If you want to insert a background image that spans across of profiles of users, you can use:}}}
{{#tag:syntaxhighlight|
#userProfileApp {
	/* {{{profile-background-url|insert URL to profile background image}}} */
	background-image: url("<URL>");
}
|lang="css"
}}
{{{profile-background-note|'''Note:''' Add <code>background-repeat: no-repeat;</code> if you have added a wider image. They may not fit and will result in a repeating background.}}}

=== {{{print-stylesheet|Print/PDF sanitisation}}} ===
{{{print-stylesheet-note|This stylesheet by [[User:Headquarter8302|Headquarter8302]] distills the print/PDF output to a more print and PDF friendly format by removing most if not all Fandom elements and only leaving the Infoboxes and the content articles, while also making a lot of the page content much more legible. If you have found some elements that should be removed or if you want this to be turned into a fully-maintained stylesheet, please harass Markus (the author of this snippet).

Remember to put this inside ''MediaWiki:Print.css'', and ''<u>not</u>'' your Common.css.}}}
<syntaxhighlight lang="css">
:root {
	--pi-border-color: black !important;
}

.fandom-sticky-header,
.global-navigation,
#mixed-content-footer,
.bottom-ads-container,
.top-ads-container,
.global-footer,
div[class^="InlineEntityFormWrapper_inline-entity-form-wrapper"],
#WikiaBar,
.page-side-tools__wrapper,
.page-header__actions,
.page__right-rail,
.community-header-wrapper,
.mw-editsection,
.page-footer__categories .wds-icon.wds-icon-small,
div[class^="Filters_article-comments-filters"],
#mw-data-after-content {
	display: none !important;
}

:not(pre > *),
:not(.mw-highlight > *) {
	background: white !important;
	color: black !important;
}

.main-container, .resizable-container {
	max-width: none;
	width: 100%;
	margin: 0;
}
</syntaxhighlight>

=== {{{scrollbar-customization|Scrollbar customization}}} ===
[[File:MinimalScrollbar.png|thumb]]
{{{scrollbar-customization-info|If you want to customize your wiki's scrollbar, you can use these CSS selectors to apply various properties to it:}}}
{{#tag:syntaxhighlight|
/* {{{scrollbar-comment|Makes the scrollbar 8px wide}}} */
::-webkit-scrollbar {
	width: 8px;
}

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

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

/* {{{scrollbar-thumb-hover-comment|Makes the background for the scrollbar bar a darker shade of green when hovered}}} */
::-webkit-scrollbar-thumb:hover {
	background: #222;
}
|lang="css"
}}
{{{scrollbar-note|'''Note:''' Scrollbar customization is only supported in WebKit based browsers, like Chrome, Safari, and Opera. However, Firefox users could instead use other properties, such as <code>scrollbar-width</code> and <code>scrollbar-color</code>.
* <code>scrollbar-width</code>: Modifies the width of the scrollbar. Note that the value of this property is not measured in pixels, so to make it thin for example, instead of making it a few pixels, the value should be "thin".
* <code>scrollbar-color</code>: Modifies the colors of the scrollbar. Note that there are two color values in this property: the first color value applies to the scrollbar itself and the second color value applies to the background of the scrollbar. The color of the scrollbar in its hover/active/focus state is automatically adjusted.}}}
{{#tag:syntaxhighlight|
/* {{{scrollbar-firefox|Change all of the scrollbars using properties supported for Firefox browsers}}} */
* {
	scrollbar-color: #888 transparent;
	scrollbar-width: thin;
}
|lang="css"
}}

=== {{{username-highlighting|Username highlighting}}} ===
[[File:HighlightUsername.png|thumb]]
{{{username-highlighting-info|This CSS snippet highlights links to an administrator's userpage, Message Wall, contributions and blog listing:}}}
{{#tag:syntaxhighlight|
a[href$=":{{{admin-username|Admin's_Username}}}"],
a[href$="/{{{admin-username|Admin's_Username}}}"] {
	/* {{{admin-color|Changes the color of the username}}} */
	color: #006600 !important;
	/* {{{admin-font-weight|Makes the username bold}}} */
	font-weight: bold !important;
	/* {{{admin-font-family|Changes the font of the username}}} */
	font-family: Arial !important;
	/* {{{css-more-comment|More CSS Attributes}}} */
}
|lang="css"
}}
{{{username-highlighting-info-1|Change <code>Admin's_Username</code> to the username of the administrator you intend to highlight, <code>#006600</code> to the intended color of highlighting and <code>Arial</code> 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:}}}
{{#tag:syntaxhighlight|
a[href$=":{{{admin-username|Admin's_Username}}}"],
a[href$="/{{{admin-username|Admin's_Username}}}"],
a[href$=":{{{admin-username-20|Admin's%20Username}}}"],
a[href$="/{{{admin-username-20|Admin's%20Username}}}"]	{
	/* {{{css-attr-comment|CSS Attributes}}} */
}
|lang="css"
}}
{{{username-highlighting-info-2|In case there are other special characters in the username (such as '''&''' or ''' ' '''), those need appropriate encoding as well.}}}

=== {{{cos|Change outline style}}} ===
{{{cos-info|This minor CSS plug-in customizes the style of the outline. The outline means the blue border that appears when tabbing (using {{Keys|Tab}} to navigate a page). It is a style that is not to be confused with <code>border</code>. An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".}}}
{{#tag:syntaxhighlight|
a:focus {
	/* {{{cos-comment-1|Sets the color of the outline}}} */
	outline-color: green;
	/* {{{cos-comment-2|Sets the amount of space between an outline and the edge or border of an element}}} */
	outline-offset: 1px;
	/* {{{cos-comment-3|Sets the style of the outline (e.g. dotted, dashed, solid etc.)}}} */
	outline-style: solid;
	/* {{{cos-comment-4|Sets the width of the outline}}} */
	outline-width: 2px;
}
|lang="css"
}}
{{{cos-note|'''Note:''' Do ''<u>not</u>'' remove that outline as it is vital for making your wiki accessible to users who only use their keyboards.}}}

=== {{{rcosc|Round corners on Special:Community}}} ===
{{{rcosc-info|This snippet by [[User:Louky|Louky]] rounds corners of [[Special:Community|Community Page]] modules:}}}
<syntaxhighlight lang="css">
.community-page-card-module-header, .community-page-card-module {
	border-radius: 40px 40px / 40px 40px;
}
</syntaxhighlight>

=== {{{pixelated-images|Pixelated images}}} ===
{{{pixelated-images-info|This snippet by [[User:Rail|Rail]] makes sure that low resolution pixelart images are being displayed without antialiasing applied by Fandom's image processing service.}}}

<syntaxhighlight lang="css">
.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;
}
</syntaxhighlight>

=== {{{reduced-motion|Reduced motion}}} ===
{{{reduced-motion-info|This CSS snippet 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 [https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion prefers-reduced-motion] preference on their system set to true. Snippet from [https://web.dev/prefers-reduced-motion/ web.dev].}}}

<syntaxhighlight lang="css">
@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;
	}
}
</syntaxhighlight>

{{{reduced-motion-info-1|You can also remove the media query to apply it to the wiki no matter the user's preference.}}}

=== {{{anb|Accessible navigation buttons}}} ===
{{{anb-info|Allows links in the navigation bars to be keyboard-navigable (it's highly recommended to implement along with [[JumpToContent]] since it can drastically increase the amount of links keyboard users will have to navigate in each page before getting to its contents).}}}

<syntaxhighlight lang="css">
.wds-dropdown:not(.wds-is-touch-device):not(.wds-is-not-hoverable):is(:hover, :focus, :focus-within) .wds-dropdown__content,
.fandom-community-header__local-navigation .wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-nested:not(.wds-is-touch-device):is(:hover, :focus, :focus-within) > .wds-dropdown-level-nested__content {
	display: block;
}
</syntaxhighlight>

=== {{{edit-sections|Edit sections}}} ===
==== {{{hes|Hidden edit sections}}} ====
[[File:HiddenEditSectionUCP screenshot.png|thumb]]
{{{hes-info|This CSS snippet by [[User:Александр III|Александр III]] hides all edit links next to section headers.}}}
<syntaxhighlight lang="css">
.mw-editsection {
	display: none;
}
</syntaxhighlight>

==== {{{cifes|Change icon for edit sections}}} ====
{{{cifes-info|This CSS snippet by [[User:Laclale|Laclale]] and [[User:KockaAdmiralac|KockaAdmiralac]] changes icon for all edit links next to section headers. You can change the URL that links to image.}}}
<syntaxhighlight lang="css">
.section-edit-pencil-icon, .mw-editsection .wds-icon {
	background: url('https://vignette.wikia.nocookie.net/ocraviutl/images/1/13/EditVester.png/revision/latest?path-prefix=ja') no-repeat;
}
.section-edit-pencil-icon use, .mw-editsection .wds-icon use {
	opacity: 0;
}
</syntaxhighlight>

=== {{{transparent-strikes|Transparent strikes}}} ===
{{{transparent-strikes-info|This CSS snippet by [[User:Leslie1289|Leslie1289]] makes <code>&lt;s></code> and related elements semi-transparent. <s style="opacity: 0.5;">Example.</s>}}}
<syntaxhighlight lang="css">
strike, s, del {
	opacity: 0.5;
}
</syntaxhighlight>

=== {{{stpb|Semi-transparent page background}}} ===
{{{stpb-info|The background of the content area is currently opaque, meaning the wiki background image behind it is not visible. To set that background semi-transparent while keeping the color picked via Theme Designer, use:}}}
<syntaxhighlight lang="css">
.page__main {
	background-color: rgba(var(--theme-page-background-color--rgb), 0.96);
}
</syntaxhighlight>
{{{stpb-info-1|The value of 0.96 is the opacity and it can be increased or decreased, but it's not recommended to lower it too much since the background image behind might make the text hard to read.

The code above would still leave the right rail and the bottom Fan Feed opaque. In order to make them semi-transparent too, the following extended version can be used instead:}}}
<syntaxhighlight lang="css">
.page__main,
.page__right-rail,
#mixed-content-footer {
	background-color: rgba(var(--theme-page-background-color--rgb), 0.96);
}

.page__right-rail .rail-module {
	background: transparent;
}
</syntaxhighlight>

=== {{{ssboss|Sticky search bar on Special:Search}}} ===
{{{ssboss-info|This simple snippet by [[User:SuperDragonXD1]] makes the search bar, alongside the related wikis and filters sidebar on [[Special:Search]] and [[Special:SearchCommunity]].}}}

{{#tag:syntaxhighlight|
/* {{{ssboss-comment-1|Search bars being sticky}}} */
.mw-special-Search form.unified-search__form, .mw-special-SearchCommunity form.unified-search__form {
	position: sticky;
	top: 42px;
	z-index: 1;
}

/* {{{ssboss-comment-2|Tabs on the left being sticky}}} */
.mw-special-Search .unified-search__layout__left-rail {
	position: sticky;
	top: 100px;
	align-self: flex-start;
}

/* {{{ssboss-comment-3|Related community section being sticky}}} */
.mw-special-Search .unified-search__layout__right-rail {
	position: sticky;
	top: 85px;
	align-self: flex-start;
}

/* {{{ssboss-comment-4|General rule}}} */
.mw-special-Search div#content, .mw-special-SearchCommunity div#content {
	overflow: unset;
}

/* {{{ssboss-comment-5|Prevent overlapping of the search bar if there are more CSS customizations}}} */
.mw-special-SearchCommunity .unified-search__result {
	margin: 8px;
}
|lang="css"
}}

=== {{{fto|FAB TOC only}}} ===
{{{fto-info|This CSS snippet sets a middle ground between showing all Table of Contents (TOC) and not showing any of them, by hiding the TOC in the article but keeping the one in the Floating Action Button (FAB) on the top left of the page (or top right if you're on mobile). The in-page's TOC can still be accessed through keyboard navigation.}}}

<syntaxhighlight lang="css">
#toc:not(:focus-within) {
	clip: rect(1px, 1px, 1px, 1px);
	overflow: hidden;
	position: absolute;
}
</syntaxhighlight>

=== {{{rtbaf|Rail toggle button as FAB}}} ===
{{{rtbaf-info|The rail toggle button doesn't scroll with you as the buttons on the left side does, making you have to scroll to the top of the page to toggle the side bar, so this '''personal CSS snippet''' gives that specific button the same styling as the other Floating Action Buttons (FABs) so it follows you around when you scroll.}}}

{{#tag:syntaxhighlight|
/* {{{rtbaf-comment-1|Adds FAB styling to the rail toggle button}}} */
.page__right-rail > .right-rail-toggle {
	-webkit-box-pack: center;
	-webkit-box-align: center;
	align-items: center;
	background: var(--theme-page-background-color);
	border: none;
	border-radius: 50%;
	-webkit-box-shadow: 0 3px 12px 0 rgb(0 0 0 / 30%);
	box-shadow: 0 3px 12px 0 rgb(0 0 0 / 30%);
	color: var(--theme-link-color);
	cursor: pointer;
	display: -webkit-box;
	display: flex;
	height: 36px;
	justify-content: center;
	margin-bottom: 9px;
	margin-top: 18px;
	outline: none;
	padding: 0;
	position: sticky;
	top: 58px;
	-webkit-transition: color .3s;
	transition: color .3s;
	width: 36px;
}

.page__right-rail > .right-rail-toggle:focus-visible {
	outline: 2px solid var(--theme-link-color);
}

.page__right-rail > .right-rail-toggle:hover,
.page__right-rail > .right-rail-toggle:focus {
	color: var(--theme-link-color--hover);
}

.page__right-rail > .right-rail-toggle {
	float: right;
	transform: translateX(18px);
}

/* {{{rtbaf-comment-2|Restores rail's original position and width}}} */
.right-rail-wrapper {
	transform: translateY(-63px);
	width: 100%;
}
|lang="css"
}}

=== {{{htmltc|HTML theme colors}}} ===
{{{htmltc-info|This snippet sets the accent color for user-interface controls generated by some default HTML elements as well as the scrollbar. Note that [https://caniuse.com/?search=accent-color accent-color] is enabled by default only in recent browser versions, and [https://caniuse.com/?search=color-scheme color-scheme] has wider browser support.

The following snippet assumes that your wiki is light-theme by default, but you can invert the <code>color-scheme</code> value to <code>dark light</code> if your wiki is dark-themed by default, and you also may want to change the class <code>.theme-fandomdesktop-dark</code> to <code>.theme-fandomdesktop-light</code> to properly update the color scheme for light theme.}}}
{{#tag:syntaxhighlight|
/* {{{htmltc-comment-1|Undefined/light theme}}} */
:root {
	accent-color: var(--theme-link-color);
	color-scheme: light dark;
}

/* {{{htmltc-comment-2|Dark theme}}} */
.theme-fandomdesktop-dark {
	accent-color: var(--theme-link-color);
	color-scheme: dark light;
}
|lang="css"
}}

=== {{{sth|Sticky table headers}}} ===
{{{sth-info-1|You can make table header cells follow your screen so users can permanently see what each column is about. To do so, you use the following CSS:}}}

{{#tag:syntaxhighlight|
/* {{{sth-comment-1|Allows sticky elements to work inside the page's content.}}} */
#content {
	overflow: initial;
}
| lang="css"
}}

{{{sth-info-2|Then you can make header cells sticky. Here we will show two methods: one that only checks for the table class nd other that checks for each cell's class.}}}

{{#tag:syntaxhighlight|
/* {{{sth-comment-2|Method 1: check for table's class. All header cells of that table will be sticky.}}} */
table.sticky-header th {
	position: sticky;
	top: 45px;
}

/* {{{sth-comment-3|Method 2: check only for table header cells with the "sticky-header" class.}}} */
table th.sticky-header {
	position: sticky;
	top: 45px;
}
| lang="css"
}}

=== {{{amf|Align mobile footer}}} ===
{{{amf-intro|The following snippet aligns the footer section in mobile to not obstruct any elements above as it can clash with interactive maps and navboxes.}}}
:{{{amf-note|'''Note:''' ''This snippet should only be added either to your personal CSS, or to your local'' <code>FandomMobile.css</code>. ''It won't work if it's added elsewhere, or if mobile CSS hasn't been enabled for your community.''}}}
<syntaxhighlight lang="css">
.article-footer {
	transform: unset;
}

.article-footer-item, .article-information-header, .wds-font-size-base {
	transform: unset;
}
</syntaxhighlight>

=== {{{rme|Remove mobile main page elements}}} ===
{{{rme-intro|The following snippet comes from [[w:c:sky-children-of-the-light|Sky Children of the Light Wiki]], in which it removes elements from the native main page in mobile in order to have the wiki's main page to only show at the top.}}}

:{{{rme-note|'''Note:''' ''This snippet should only be added either to your personal CSS, or to your local'' <code>FandomMobile.css</code>. ''It won't work if it's added elsewhere.''}}}
<syntaxhighlight lang="css">
.mobile-main-page__wiki-description {
	display: none !important
}

.mobile-main-page__trending-articles {
	display: none !important
}

.mobile-main-page__popular-categories {
	display: none !important
}

.mobile-main-page .mobile-hidden {
	display: block !important
}
</syntaxhighlight>

== {{{user-customization|User customizations}}} ==
=== {{{wikieditor-extensions|WikiEditor Syntaxhighlight Extensions}}} ===
[[File:WikiEditorSyntaxHighlightExtensions.png|right|300px|alt=Advanced syntaxhighlight demonstration]]
{{{wikieditor-extensions-info|'''Personal CSS only:''' This CSS extension pack by [[User:Suggon|Suggon]] adds a few visual fixes and syntaxhighlight features into the 2010 wikitext editor; some being inspired by '''VSCode'''.
* Enable editor overscrolling
* Fix occasional "disappearance" of text cursor
* Line highlight on mouse hover
* Comprehensible matching-brackets
* Outline for lines with matching-bracket
* Left border for lines between matching-brackets &mdash; handy for debugging nested parser functions}}}
<syntaxhighlight lang="css" line>
.CodeMirror {
	caret-color: var(--theme-page-text-color);
}
.CodeMirror * {
	transition-property: background-color, box-shadow, filter;
	transition-duration: 0.2s;
}
.cm-mw-matchingbracket {
	background-color: transparent !important;
	box-shadow: 0 0 0 0.5px rgba(128,128,128,.5) !important;
	filter: brightness(2);
	.theme-fandomdesktop-light & {
		box-shadow: 0 0 0 0.5px rgba(0,0,0,.5) !important;
	}
}
.CodeMirror-line:hover {
	background-color: rgba(128,128,128,.1) !important;
}
.CodeMirror-line:has(.cm-mw-matchingbracket) {
	box-shadow: inset 0 0 0 2px rgba(128,128,128,.2);
}
.CodeMirror-code div:last-child {
	height: 50vh;
}
.CodeMirror-code div:has(.cm-mw-matchingbracket), .CodeMirror-code div:has(.cm-mw-matchingbracket) ~ div {
	box-shadow: -1px 0 #0af;
}
.CodeMirror-code div:has(:nth-child(2 of .cm-mw-matchingbracket)) ~ div, .CodeMirror-code div:nth-child(2 of :has(.cm-mw-matchingbracket)) ~ div {
	box-shadow: none;
}
.CodeMirror-gutters {
	margin-left: -0.5px;
}
</syntaxhighlight>

=== {{{rst|Remove Search Tooltip}}} ===
{{{rst-info|'''Personal CSS only:''' This is a very simple user customization which removes the yellow tooltip indicating options to search specific, highlighted text.}}}
<syntaxhighlight lang="css">
#highlight__main-container {
	display: none;
}
</syntaxhighlight>

=== {{{cursor-customization|Cursor customization}}} ===
[[File:CustomCursor.png|thumb]]
{{{cursor-customization-info|'''Personal CSS only''': sitewide use violates customization policy.

If you want to change the icon displayed as your cursor, you can use:}}}
{{#tag:syntaxhighlight|
/* {{{curror-comment-1|This cursor icon will be displayed normally}}} */
html {
	/* {{{cursor-url|Replace <URL> with URL of the cursor icon}}} */
	cursor: url("<URL>"), default;
}

/* {{{cursor-comment-2|This cursor icon will be displayed when hovering or clicking on links}}} */
a:hover, a:active {
	/* {{{cursor-url|Replace <URL> with URL of the cursor icon}}} */
	cursor: url("<URL>"), pointer;
}
|lang="css"
}}

=== {{{dut|Detect username template}}} ===
[[File:DetectUsername.png|thumb]]
{{{dut-info|This CSS snippet by [[User:TheGoldenPatrik1|TheGoldenPatrik1]] places a border around [[InputUsername|the <nowiki>{{USERNAME}}</nowiki> template]] to prevent users from being fooled by it:}}}
<syntaxhighlight lang="css">
.insertusername,
.inputusername,
.InsertUsername,
.InputUsername {
	border: 1px solid;
	padding: 0.5px;
}
</syntaxhighlight>

=== {{{fmaarb|Fix "Mark All As Read" button}}} ===
{{{fmaarb-info|This '''personal only''' CSS snippet by [[User:Headquarter8302|Headquarter8302]] fixes the issue where the floating wiki navigation bar covers the top of the notifications popup, and thus, covering the "Mark All As Read" button. The snippet below changes the z-index of the notifications popup and the header:}}}
<syntaxhighlight lang="css">
.fandom-sticky-header.is-visible {
	z-index: 499;
}

.notifications header[class*="NotificationsDropdown-module_contentHeader"] {
	z-index: 500;
}
</syntaxhighlight>

=== {{{fdc|Force default cursor}}} ===
[[File:ForceDefaultCursor.png|thumb]]
{{{fdc-info|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.}}}
<syntaxhighlight lang="css">
body,
* {
	cursor: default !important;
}

a:hover {
	cursor: pointer !important;
}
</syntaxhighlight>

=== {{{hmpc|Hide main page categories}}} ===
[[File:NoCat.png|thumb]]
{{{hmpc-info|This '''personal-only''' CSS snippet by [[User:JustLeafy|JustLeafy]] and [[User:KockaAdmiralac|KockaAdmiralac]] prevents the bottom category bar to appear on the main page:}}}
<syntaxhighlight lang="css">
.mainpage .article-categories, .mainpage .page-footer__categories {
	display: none;
}
</syntaxhighlight>

=== {{{hmpt|Hide main page title}}} ===
{{{hmpt-info|This '''personal-only''' CSS snippet by [[User:DiegoFire Network|DiegoFire Network]] and [[User:KockaAdmiralac|KockaAdmiralac]] removes the title of a wiki's main page.}}}
<syntaxhighlight lang="css">
.mainpage .WikiaPage .page-header__title,
.mainpage .WikiaPage .page-header__separator,
.mainpage #firstHeading {
	display: none;
}
</syntaxhighlight>

=== {{{mppn|Minified PPH}}} ===
[[File:MinifiedPPH.png|thumb]]
{{{mppn-info|This '''personal-only''' CSS snippet by [[User:KurwaAntics|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:}}}
<syntaxhighlight lang="css">
.page-header__categories,
.page-header__languages {
	display: none;
}
.page-header__title {
	font-size: 34px;
}
</syntaxhighlight>

=== {{{pwdsbd|Previous WDS Button design}}} ===
[[File:OldWDSButtons.png|thumb]]
{{{pwdsbd-info|This minor CSS plugin by [[User:JustLeafy|JustLeafy]] makes the buttons look like the previous style before they had rounded corners and a larger font size.}}}
<syntaxhighlight lang="css">
.wds-button {
	padding: 7px 12px;
	font-size: 10px;
	border-radius: 0 !important;
}
</syntaxhighlight>

=== {{{r2010acee|Retro 2010 ACE Editor}}} ===
[[File:Shiny text customization.png|250px|right]]
{{{r2010acee-info|This CSS snippet by [[User:Headquarter8302|Headquarter8302]] makes the 2010 ACE Editor text have a glowy text effect, similar to Windows Terminal's retro terminal setting.}}}
<syntaxhighlight lang="css">
.ace_line {
	text-shadow: 0 0 5px currentColor;
}
</syntaxhighlight>

=== {{{selection-customization|Selection customization}}} ===
[[File:CustomSelection.png|thumb]]
{{{selection-customization-info|This CSS snippet by [[User:JustLeafy|JustLeafy]] makes the selection background color semi-transparent.}}}
<syntaxhighlight lang="css">
::selection {
	background: rgba(120,120,120,0.5);
}
</syntaxhighlight>

=== {{{spl|Smooth page load}}} ===
[[File:Smoothloadexample.gif|right|Example of the Smooth Page Load]]
{{{spl-info|This '''personal only''' CSS code by [[User:Cleverduck09|Cleverduck09]] creates a short fade-in animation on wiki pages.}}}
<syntaxhighlight lang="css">
@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;
}
</syntaxhighlight>

=== {{{cdh|Change diff highlights}}} ===
{{{cdh-info|This CSS snippet by [[User:RyaNayR|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.}}}
<syntaxhighlight lang="css">
.diffchange {
	border: 1px solid #f00;
}
</syntaxhighlight>

=== {{{rff|Remove Fan Feed}}} ===
[[File:Remove Fan Feed.png|thumb]]
{{{rff-info|This is a simple '''personal CSS snippet''' that removes the Fan Feed which is located at the bottom of the main page, article pages and file pages.}}}
<syntaxhighlight lang="css">
#mixed-content-footer {
	display: none;
}
</syntaxhighlight>

=== {{{caret-color|Caret color}}} ===
[[File:CaretColor.png|thumb]]
{{{caret-color-info|'''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 <code>caret-color</code>, 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.}}}
<syntaxhighlight lang="css">
textarea {
	caret-color: red;
}
</syntaxhighlight>

=== {{{hrfan|Hide read feeds/announcements notifications}}} ===
{{{hrfan-info|This CSS snippet added by [[User:Andrewds1021|Andrewds1021]] and [[User:KockaAdmiralac|KockaAdmiralac]] 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.'''}}}
{{#tag:syntaxhighlight|
/* {{{hrfan-comment-1|Hiding read notifications}}} */
#notificationContainer .wds-notification-card:not(.wds-is-unread), .notifications li:not([class*="isUnread"]) {
	display: none;
}

/* {{{hrfan-comment-2|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;
}
|lang="css"
}}

=== {{{ltidc|Large thumbnails in Dynamic Categories}}} ===
{{{ltidc-info|This CSS snippet by [[User:HumansCanWinElves|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%".}}}

<syntaxhighlight lang="css">
.ns-14 #content .category-page__members.category-page__members {
	column-count: 1;
}

.ns-14 #content .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 #content .category-page__member {
	flex-direction: column;
}

.ns-14 #content .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 #content .category-page__member-thumbnail {
	width: 160px;
	height: 120px;
	border: none;
}

.ns-14 #content .category-page__member-link {
	text-align: center;
}
</syntaxhighlight>

=== {{{hsn|Hide StickyNav}}} ===
{{{hsn-info|This short, '''personal only''', snippet by [[User:BlindCartographer|BlindCartographer]] stops the stickied top navigation from ever appearing.}}}
<syntaxhighlight lang="css">
.fandom-sticky-header {
	display: none !important;
}
</syntaxhighlight>
[[Category:CSS]]
</includeonly>