CSS Cookbook/pl

Ta „książka kucharska” (ang. cookbook) to kolekcja użytecznych fragmentów CSS do wykorzystania w dowolny sposób.

Poradniki CSS

Obraz tła

Jeśli chcesz zmienić obraz tła swojej wiki za pomocą CSS, nie szukaj dalej. Ogólnie rzecz biorąc, możesz to osiągnąć używając:

body.mediawiki {
	/* Zastąp <URL> adresem URL obrazu, który ma być tłem */
	background-image: url("<URL>");
	/* Zmienia kolor tła pod obrazem; użyj kodu szestnastkowego lub nazwy koloru (np. "red") */
	background-color: red;
	/* Blend-mode łączy co najmniej dwie warstwy tła za pomocą różnych metod mieszania; ustaw wybrany tryb mieszania by zmienić końcowy wygląd tła (przykłady: "color-dodge", "screen", "multiply", "hard-light", "difference", "luminosity") */
	background-blend-mode: normal;
	/* Ustaw na "scroll", aby umożliwić przewijanie tła wraz ze stroną, lub na "fixed", aby zatrzymać je w miejscu. */
	background-attachment: scroll; 
	/* Reguluje początkową pozycję obrazu tła względem krawędzi strony; Pierwsza wartość to pozycja pozioma, a druga wartość to pozycja pionowa, możesz mieszać nazwy pozycji (np. "top left", "left center", "right center", itd.) oraz procenty (x% y%) */
	background-position: top left; 
	/* Domyślnym ustawieniem jest powtarzanie obrazu zarówno w pionie, jak i w poziomie; użycie "repeat-y" spowoduje powtarzanie obrazu tylko w pionie, "repeat-x" - tylko w poziomie, natomiast "no-repeat" zablokuje całkowicie powtarzanie */
	background-repeat: repeat;
}

Mogą być konieczne precyzyjnie dostrojone powyższych wartości — powyższy opis stanowi jedynie punkt wyjścia.

Tagi użytkowników na tablicach wiadomości

Poniższy snippet autorstwa Caburum pozwala na dodanie konfigurowalnego "tagu" do wiadomości i postów na forum wysyłanych przez określonego użytkownika. Można go użyć w dowolnym celu, przykładowo do wyróżnienia administratorów, biurokratów czy założyciela wiki.

[class^='EntityHeader_name__'][href$="Nazwa_użytkownika"]::after {
	content: " (Tag)";
	color: var(--theme-page-text-color);
}

Change Username to the username (make sure to replace any spaces with %20 or, if the name uses special characters, you can transform it in an URL Encoder and use its result) and change (Tag) 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.

CSS zależny od motywu/strony

Fandom udostępnia kilka dodatkowych klas, pozwalających na wpłynięcie na wygląd wiki zależnie od wybranej strony lub motywu.

• .ns
  • Klasa specyficzna dla danej przestrzeni nazw
  • Klasa dla tej strony to .ns-0

/* Zmienia kolor tekstu w przestrzeni nazw Użytkownik */
.ns-2 {
	color: black;
}

• .theme-fandomdesktop-light and .theme-fandomdesktop-dark
  • Klasy specyficzne dla jasneho i ciemnego motywu

/* Zmienia kolor linków w ciemnym motywie, ale nie w jaznym */
.theme-fandomdesktop-dark a {
	color: white;
}

• .page
  • Klasa specyficzna dla obecnie przeglądanej strony
  • Klasa dla tej strony to .page-CSS_Cookbook

/* Zmiana styli na wybranej stronie */
.page-CSS_Cookbook h2 {
	font-weight: bold;
}

• .wiki
  • Klasa specyficzna dla obecnie przeglądanej wiki
  • Klasa dla tej wiki to .wiki-dev

/* Zmiana styli tylko na Dev Wiki */
.wiki-dev .portable-infobox {
	padding: 1px;
}

Ulepszenia strony

Zmiana wyglądu obrazka

Ten CSS manipuluje wyglądem określonego obrazu na wiki, użyj poniższego fragmentu CSS, zastępując Filename.ext nazwą obrazu na Twojej wiki (na przykład:Example.jpg):

img[src*="Filename.ext"] {
	/* Zastosuj filtry do manipulowania kolorami obrazu */
	filter: none;
	/* Miesza tło strony z obrazem (wspierane tryby mieszania to m.in. "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;
	/* Przezroczystość obrazu */
	opacity: 1;
	/* Więcej atrybutów CSS */
}

/* Zapobieganie działaniu efektu w historii plików, zwłaszcza po najechaniu kursorem na obraz na stronie pliku, aby umożliwić przeglądanie oryginalnych obrazów, w przypadku wandalizmu. */
.filehistory img {
	filter: revert !important;
	mix-blend-mode: revert !important;
	opacity: revert !important;
	/* Więcej atrybutów CSS */
}

#file img:hover {
	filter: revert !important;
	mix-blend-mode: revert !important;
	opacity: revert !important;
	/* Więcej atrybutów CSS */
}

Aby zastosować powyższy kod zależnie od wybranego motywu, poprzedź img za pomocą .theme-fandomdesktop- (dla skórki komputerowej) lub .theme-fandommobile- (dla urządzeń mobilnych) wraz ze stosownym przyrostkiem light lub dark

Konfiguracja przyciemnienia za lightboxem

Aby dostosować zaciemnienie, które pojawia się podczas wyświetlania obrazu w lightboxie, użyj poniższego fragmentu kodu CSS:

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

Zamień przykładowu kolor tła #84dcff i tryb mieszania overlay zależnie od potrzeb

Zmiana wyglądu galerii

Poniższy snippet autorstwa ValleyMaster zmieni domyślny wygląd galerii.

/* Zmienia wygląd całej galerii */
.wikia-gallery {
	/* Atrybuty CSS */
}

/* Zmienia wygląd poszczególnych elementów galerii */
.wikia-gallery-item {
	text-align: center;
	padding: 0px;
	margin: 5px;
	background-color: rgba(0,0,0,0.1);
	border-radius: 1em;
	/* Więcej atrybutów CSS */
}

/* Usuwa domyślne obrabowanie obrazów w galerii */
.wikia-gallery-item .thumb .gallery-image-wrapper {
	border-style: none;
}

Jeśli chcesz dostosować obramowanie obrazu zamiast go usuwać, zastąp border-style: none za pomocą border: _px solid color.
Niezależnie od wybranej opcji, możesz również zaokrąglić narożniki obrazu dodając artybut border-radius.

/* Zmienia domyślne wyrównanie podpisów z "po lewej" na "do środka" */
.wikia-gallery-position-left {
	text-align: center;
}

/* Modyfikuje wygląd podpisów galerii */
.theme-fandomdesktop-dark .lightbox-caption {
	border-top: 1px solid #4d4d4d;
	border-bottom: 1px solid #4d4d4d;
	/* Więcej atrybutów CSS */
}

.theme-fandomdesktop-light .lightbox-caption {
	border-top: 1px solid #cecece;
	border-bottom: 1px solid #cecece;
	/* Więcej atrybutów CSS */
}

Zmiana przycisku rozwijania/zwijania

Ten fragment kodu CSS pozwoli ci zmodyfikować wygląd przycisku rozwijania/zwijania.

/* Zmienia wygląd przycisku przełączania. */
.mw-collapsible-text {
	/* Atrybuty CSS */
}

/* Usuwa domyślne nawiasy kwadratowe - z MediaWiki */
.mw-collapsible-toggle-default:before, .mw-collapsible-toggle-default:after {
	display: none;
}

/* Zmienia domyślną pozycję przycisku przełączania - z MediaWiki */
.mw-collapsible span.mw-collapsible-toggle {
	float: none;
	margin-left: 0;
	margin-right: 1em;
}

Powyższy kod wymusza wyświetlenie przycisku przełączenia po lewej stronie, co nie zawsze może być pożądane. Poniższy fragment autorstwa ValleyMaster pozwala przywrócić poprzednie zachowanie:

.float-right .mw-collapsible span.mw-collapsible-toggle {
	float: right;
}

Następnie umieść element mw-collapsible wewnątrz elementu <div class="float-right"></div>, by przywrócić przycisk przełączania po prawej.
Przykład:

<div class="float-right">
<div class="mw-collapsible mw-collapsed">
text 1
<div class="mw-collapsible-content">
text 2
</div>
</div>

Przykład z tabelą:

<div class="float-right">
{| class="wikitable mw-collapsible mw-collapsed"
!Text 1
|-
|Text 2
|}
</div>

Nagłówek społeczności w bloku

Poniższy fragment CSS autorstwa JustLeafy'ego zamyka nagłówek strony wewnątrz bloku z jednolitym kolorem tła, pośrednio przywracając styl nagłówka znany ze skórki Oasis.

.fandom-community-header {
	background: var(--theme-accent-color);
	color: var(--theme-accent-label-color);
	padding: 15px 20px 5px 20px;
}

.page {
	margin-top: 0;
}

Kompaktowe menu rozwijane nagłówka

Poniższy fragment CSS autorstwa JustLeafy'ego zmienia styl rozwijanych menu nagłówka strony na bardziej kompaktowy.

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

Wiki-themed scrollbar

This CSS snippet by 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 scrollbar-color property introduced in the CSS Scrollbars Styling Module Level 1 spec.

:root {
  scrollbar-color: var(--theme-accent-color) var(--theme-accent-color--hover);
}

Dostosowanie wysokości wiersza

Dostosowanie wysokości wiersza jest użyteczne m.in. dla Indyjskich alfabetów sylabicznych (Indic scripts), takich jak Devanagari, Bengali, Kannada, Odiya itd. z powodu mātrās (np. ि, ी, ु oraz ू) które uciekają w niektórych miejscach poza wiersze przez co wyglądają na nieuporządkowane. Zaleca się użycie poniższego kodu we wszystkich wiki, które używają tych języków.

.wds-community-header__sitename,
.fandom-community-header a,
#content h2,
#content h3,
#content h4 {
	line-height: 1.5;
}

Dostosowywanie linków

Poniższy fragment kodu CSS został stworzony przez Cleverduck09, aby dostosować to jak linki wyglądają po najechaniu na nie kursorem, po ich odwiedzeniu, jak również gdy nie zostały odwiedzone ani nie najechano na nie kursorem.

/* Zmienia wygląd linków, które nie zostały najechane/kliknięte */
a:link {
	color: CODE;
	background-color: CODE;
	text-decoration: CODE;
	text-shadow: CODE;
	/* Więcej atrybutów CSS */
}

/* Zmienia wygląd linków do stron, które odwiedziłeś */
a:visited {
	color: CODE;
	background-color: CODE;
	text-decoration: CODE;
	text-shadow: CODE;
	/* Więcej atrybutów CSS */
}

/* Zmienia wygląd linków, które zostały najechane */
a:hover { 
	color: CODE;
	background-color: CODE;
	text-decoration: CODE;
	text-shadow: CODE;
	/* Więcej atrybutów CSS */
}

/* Zmienia wygląd linków, które zostały kliknięte */
a:active { 
	color: CODE;
	background-color: CODE;
	text-decoration: CODE;
	text-shadow: CODE;
	/* Więcej atrybutów CSS */
}

Tło profilu użytkownika

Jeśli chcesz dodać tło, które rozciąga się na cały profil użytkownika, użyj tego:

#userProfileApp {
	/* Zastąp <URL> adresem URL obrazu, który ma być tłem */
	background-image: url("<URL>");
}

Uwaga: Dodaj background-repeat: no-repeat;, jeśli dodałeś szerszy obra, by uniknąć powtarzania się tła w pionie.

Czyszczenie wydruków/PDF

Ten arkusz stylów autorstwa Headquarter8302 modyfikuje styl wydruków do formatu bardziej przyjaznego dla druku i PDF, usuwając większość, jeśli nie wszystkie elementy Fandomu i pozostawiając jedynie Infoboxy i treść artykułów, jednocześnie czyniąc wiele treści strony znacznie bardziej czytelnymi. Jeśli znalazłeś jakieś elementy, które powinny zostać usunięte lub jeśli chcesz, aby to zostało przekształcone w pełni utrzymywany arkusz stylów, daj znać Markusowi (autorowi tego fragmentu).

Pamiętaj, aby umieścić to wewnątrz MediaWiki:Print.css, nie Common.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;
}

Dostosowywanie paska przewijania

Jeśli, chcesz dostosować pasek przewijania na twojej wiki, możesz posłużyć się tym:

/* Zmiana wielkości paska przewijania */
::-webkit-scrollbar {
	width: 8px;
}

/* Czarne tło ścieszki po której porusza się pasek przewijania */
::-webkit-scrollbar-track {
	background: black;
}

/* Zielone tło paska przewijania */
::-webkit-scrollbar-thumb {
	background: #228B22;
}

/* Zamiana tła paska przewijania na ciemniejszy odcień zielonego po najechaniu */
::-webkit-scrollbar-thumb:hover {
	background: #222;
}

Uwaga: Dostosowywanie paska przewijania w ten sposób jest obsługiwane tylko w przeglądarkach opartych na WebKit, takich jak Chrome, Safari czy Opera. Użytkownicy Firefoksa mogą zamiast tego użyć innych właściwości, takich jak scrollbar-width and scrollbar-color

• scrollbar-width: Modyfikuje szerokość paska przewijania. Miej na uwadze, że wartość tej właściwości nie jest mierzona w pikselach; by uzyskać cienki pasek przewijania, ustaw wartość tego artrybutu na "thin".
• scrollbar-color: Modyfikuje kolory paska przewijania. Ta właściwość zawiera dwie wartości kolorów: pierwsza wartość koloru dotyczy samego paska przewijania, a druga - koloru tła, po którym porusza się pasek.

Właściwości paska zależne od stanu (hover/active/focus) zostaną dostosowywane automatycznie.

/* Zmienia wszystkie paski przewijania za pomocą właściwości obsługiwanych przez przeglądarki Firefox */
* {
	scrollbar-color: #888 transparent;
	scrollbar-width: thin;
}

Wyróżnienie nazw użytkowników

Ten fragment CSS wyróżnia linki do wszystkich stron wybranego użytkownika: do profilu użytkownika, tablicy wiadomości, wkładu oraz blogów:

a[href$=":Nazwa_administratora"],
a[href$="/Nazwa_administratora"] {
	/* Zmienia kolor linku */
	color: #006600 !important;
	/* Pogrubia link */
	font-weight: bold !important;
	/* Zmienia krój czcionki na "Arial" */
	font-family: Arial !important;
	/* Więcej atrybutów CSS */
}

Zmień Nazwa_administratora na nazwę użytkownika, który ma być wyróżniony, #006600 na kolor i Arial na czcionkę. Możesz również usunąć niektóre sekcje, jeśli nie są one potrzebne.

W przypadku nazw użytkowników zawierających spacje, tablice wiadomości kodują spacje za pomocą %20, podczas gdy MediaWiki koduje spacje za pomocą podkreśleń. Tak więc, aby wyróżnić nick użytkownika w obu przypadkach, obie wersje muszą być zawarte w regule CSS. Na przykład:

a[href$=":Nazwa_administratora"],
a[href$="/Nazwa_administratora"],
a[href$=":Nazwa%20administratora"],
a[href$="/Nazwa%20administratora"]	{
	/* Atrybuty CSS */
}

Uwaga: nazwy zawierające specjalne znaki (np. & i ' ) także wymagają kodowania.

Modyfikacja stylu obramowania (ang. outline)

Ten niewielki fragment CSS pozwala na zmienianie stylów obramowania tekstu. Obramowanie (ang. outline) to linia, która pojawia się zazwyczaj, gdy używasz ↹ Tab do nawigacji na stronie). Róznica jest taka, że outline znajduje się poza border i nie wpływa na zmianę szerokości i wysokości elementu. Nie wpływa również na położenie elementów, które znajdują się w pobliżu.

a:focus {
	/* Zmienia kolor obramowania */
	outline-color: green;
	/* Zmienia ilość miejsca między obramowaniem a krawędzią elementu. */
	outline-offset: 1px;
	/* Zmienia styl obramowania (np. dotted, dashed, solid itd.) */
	outline-style: solid;
	/* Zmienia wielkość obramowania */
	outline-width: 2px;
}

Uwaga: Nie usuwaj całkowicie tego obramowania — jest ono kluczowe by Twoja wiki była dostępna dla użytkowników, którzy używają wyłącznie z klawiatury.

Zaokrąglone boki na Special:Community

Ten fragment CSS stworzony przez Louky zaokrągla boki modułów na stronie społeczności:

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

Rozpixelowane zdjęcia

Poniższy kod stworzony przez Raila sprawia, że pixelarty w niskiej rozdzielczości są wyświetlane bez efektów wygładzania krawędzi nakładanych przez mechanizmy przetwarzania obrazów Fandomu.

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

Ograniczenie ruchu na stronie

Poniższy kod z web.dev sprawi, że czas trwania wszystkich animacji i przejść CSS będzie tak krótki, że nie będą one już zauważalne, zachowując jednocześnie funkcjonalność w przypadku skryptów, których działanie zależy od animacji i/lub przejść. Może to być przydatne dla osób, które nie lubią animacji, chcą poprawić wydajność strony, lub cierpią na zaburzenia przedsionkowe wywołane ruchem. Kod zadziała tylko wtedy, gdy użytkownik ma włączoną opcję prefers-reduced-motion w systemie.

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

Możesz również użyć powyższego kodu bez sprawdzania wartości @media, aby zastosować go na wiki bez względu na preferencje użytkownika.

Przyciski nawigacyjne z ułatwieniami dostępu

Pozwala na nawigację po elementach pasków nawigacyjnych za pomocą klawiatury (wysoce zalecane jest zaimplementowanie tego wraz z JumpToContent, ponieważ może to drastycznie zwiększyć liczbę linków, przez które użytkownicy klawiatury będą musieli przejść, zanim dotrą do jej zawartości).

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

Modyfikację przycisków edycji sekcji

Ukrycie przycisków

Poniższy fragment CSS stworzony przez Александр III ukrywa wszystkie linki edycji obok nagłówków sekcji.

.mw-editsection {
	display: none;
}

Zmiana ikony

Poniższy fragment CSS autorstwa Laclale oraz KockaAdmiralac zmienia ikonę przy linkach do edycji. Możesz zmienić wykorzystywany w ww. kodzie zmieniając zawartość elementu url().

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

Półprzezroczyste przekreślenia

Poniższy snippet autorstwa Leslie1289 modyfikuje działania znacznika <s> i podobnych, czyniąc je półprzezroczystymi. Przykład.

strike, s, del {
	opacity: 0.5;
}

Półprzezroczyste tło strony

Tło obszaru treści jest obecnie nieprzezroczyste, co oznacza, że znajdujący się za nim obraz tła wiki nie jest widoczny. Aby ustawić to tło jako półprzezroczyste, zachowując kolor wybrany za pomocą kreatora motywów, użyj:

.page__main {
	background-color: rgba(var(--theme-page-background-color--rgb), 0.96);
}

Wartość 0.96 określa stopień przezroczystości strony. Nie zaleca się jej zbytniego zmniejszania, ponieważ obraz tła może utrudniać odczytanie tekstu.

Korzystając z powyższego kodu, prawa kolumna strony oraz Fan Feed pozostają nie przezroczyste. Aby uczynić je również półprzezroczystymi, można zamiast tego użyć poniższej, rozszerzonej wersji:

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

Przyklejony pasek wyszukiwania na stronie Special:Search

Ten prosty fragment autorstwa User:SuperDragonXD1 sprawia, że pasek wyszukiwania, wraz z powiązanymi wiki i filtrami na Special:Search i Special:SearchCommunity, podążają za użytkownikiem podczas przewijania strony.

/* Przyklejenie paska wyszukiwania */
.mw-special-Search form.unified-search__form, .mw-special-SearchCommunity form.unified-search__form {
	position: sticky;
	top: 42px;
	z-index: 1;
}

/* Przyklejenie nawigacji po lewej stronie */
.mw-special-Search .unified-search__layout__left-rail {
	position: sticky;
	top: 100px;
	align-self: flex-start;
}

/* Przyklejenie sekcji "Powiązana społeczność" po prawej */
.mw-special-Search .unified-search__layout__right-rail {
	position: sticky;
	top: 85px;
	align-self: flex-start;
}

/* Zapobieganie ucięciu elementów */
.mw-special-Search div#content, .mw-special-SearchCommunity div#content {
	overflow: unset;
}

/* Zapobieganie nakładaniu się paska wyszukiwania w przypadku większej ilości modyfikacji */
.mw-special-SearchCommunity .unified-search__result {
	margin: 8px;
}

Tylko pływający spis treści

Ten snippet CSS stanowi kompromis między wyświetlaniem wszystkich spisów treści (TOC) i nie pokazywaniem żadnego z nich, ukrywając TOC w artykule, ale zachowując ten w pływającym przycisku akcji (FAB) w lewym górnym rogu strony (lub w prawym górnym rogu, jeśli korzystasz z telefonu komórkowego). Dostęp do spisu treści na stronie jest nadal możliwy poprzez nawigację za pomocą klawiatury.

#toc:not(:focus-within) {
	clip: rect(1px, 1px, 1px, 1px);
	overflow: hidden;
	position: absolute;
}

Pływający przycisk ukrywania prawej kolumny

Przycisk ukrywania prawego panelu nie przesuwa się wraz ze stronąą, tak jak przyciski po lewej stronie, przez co musisz przewinąć stronę do góry, aby przełączyć pasek boczny. Poniższy snippet modyfikuje wygląd i zachowanie tego przycisku, upodabiając go do pozostałych, pływających przycisków akcji (FAB).

/* Dodaje style FAB do przycisku ukrywania prawego panelu */
.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);
}

/* Przywraca oryginalną pozycję i szerokość prawego panelu */
.right-rail-wrapper {
	transform: translateY(-63px);
	width: 100%;
}

Kolory motywu HTML

Ten fragment kodu ustawia kolor wybranych elementów interfejsu użytkownika, a także paska przewijania. Miej na uwadze, że zarówno accent-color, jak również color-scheme są obsługiwane jedynie przez najnowsze wersje przeglądarek internetowych.

TPoniższy fragment kodu zakłada, że wiki ma domyślnie jasny motyw. Jeśli wiki ma domyślnie ciemny motyw, możessz odwrócić wartość color-scheme ustawiając ją dark light. Pamiętaj o zmianie klasy .theme-fandomdesktop-dark na .theme-fandomdesktop-light i odwróceniu wartości na light dark, by kod był w stanie poprawnie obsłużyć zmianę schematu kolorów dla jasnego motywu.

/* Undefined/light theme */
:root {
	accent-color: var(--theme-link-color);
	color-scheme: light dark;
}

/* Dark theme */
.theme-fandomdesktop-dark {
	accent-color: var(--theme-link-color);
	color-scheme: dark light;
}

Przyklejone nagłówki tabeli

Możesz sprawić, że komórki nagłówka tabeli będą podążać za użytkownikiem podczas przewijania strony, aby użytkownicy mogli stale widzieć, czego dotyczy każda kolumna. W tym celu należy użyć następującego kodu CSS:

/* Umożliwia działanie przyklejonych elementów wewnątrz zawartości strony. */
#content {
	overflow: initial;
}

Następnie można ustawić komórki nagłówka jako "sticky". Tutaj pokażemy dwie metody: pierwsza sprawdza tylko klasę tabeli, druga weryfikuje również klasę każdej komórki.

/* Metoda 1: sprawdź klasę tabeli. Wszystkie komórki nagłówka tej tabeli będą przyklejone. */
table.sticky-header th {
	position: sticky;
	top: 45px;
}

/* Metoda 2: sprawdź tylko komórki nagłówka tabeli z klasą "sticky-header". */
table th.sticky-header {
	position: sticky;
	top: 45px;
}

Wyrównaj stopkę na skórce mobilnej

Poniższy fragment kodu modyfikuje sekcję stopki na urządzeniach mobilnych, aby nie zasłaniała żadnych elementów powyżej, ponieważ może kolidować z interaktywnymi mapami i navboxami.

Uwaga: Ten fragment powinien być dodany tylko do twojego osobistego CSS lub do lokalnego FandomMobile.css. Nie zadziała, jeśli zostanie dodany gdzie indziej lub jeśli mobilny CSS nie został włączony dla twojej społeczności.

.article-footer {
	transform: unset;
}

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

Usuń elementy mobilnej strony głównej

Poniższy arkusz pochodzący z Sky Children of the Light Wiki usuwa domyślne elementy strony głównej na urządzeniach mobilnych, pozwalając na wyświetlenie treści wybranej przez administratorów wiki.

Uwaga: Ten fragment powinien być dodany tylko do twojego osobistego CSS lub do lokalnego FandomMobile.css. Nie zadziała, jeśli zostanie dodany gdzie indziej lub jeśli mobilny CSS nie został włączony dla twojej społeczności.

.mobile-main-page__wiki-description {
	display: none;
}

.mobile-main-page__trending-articles {
	display: none;
}

.mobile-main-page__popular-categories {
	display: none;
}

.mobile-main-page .mobile-hidden {
	display: block;
}

Modyfikacje do użycia wyłącznie w osobistym CSS

WikiEditor Syntaxhighlight Extensions

Tylko osobisty CSS: Poniższy snippet CSS autorstwa Suggon dodaje kilka wizualnych poprawek i funkcji podświetlania składni do edytora wikitekstu 2010; niektóre z nich są inspirowane VSCode.

• Włączenie przewijania edytora
• Naprawiono sporadyczne "znikanie" kursora
• Podświetlanie linii po najechaniu myszą
• Kolorowanie pasujących do siebie klamr
• Zaznaczenie linii z pasującymi do siebie klamrami
• Lewe obramowanie linii z pasującymi do siebie klamrami — przydatne do debugowania zagnieżdżonych funkcji parsera

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

Usuń podpowiedzi wyszukiwania

Tylko osobisty CSS: Poniższy snippet CSS ukrywa narzędzie wskazujące opcje wyszukiwania określonego, podświetlonego tekstu.

#highlight__main-container {
	display: none;
}

Dostosowywanie kursora

Jeśli chcesz zmienić ikonę wyświetlaną jako twój kursor, możesz użyć:

/* This cursor icon will be displayed normally */
html {
	/* Replace <URL> with URL of the cursor icon */
	cursor: url("<URL>"), default;
}

/* Zmiana kursora po najechaniu na link */
a:hover, a:active {
	/* Replace <URL> with URL of the cursor icon */
	cursor: url("<URL>"), pointer;
}

Wyróżnienie użyć szablonu USERNAME

Poniższy snippet CSS stworzony przez TheGoldenPatrik1 tworzy ramkę dookoła szablonu {{USERNAME}}, aby użytkownicy nie dali się oszukać:

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

Fix przycisku "Oznacz wszystko jako przeczytane"

Tylko osobisty CSS: Poniższy fragment CSS autorstwa Headquarter8302 naprawia błąd, w którym pływający pasek nawigacji wiki zakrywa górną część wyskakującego okienka powiadomień, a tym samym zakrywa przycisk "Oznacz wszystko jako przeczytane". Poniższy fragment kodu zmienia z-index wyskakującego okienka powiadomień i nagłówka:

.fandom-sticky-header.is-visible {
	z-index: 499;
}

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

Wymuszenie domyślnego kursora

Tylko osobisty CSS: Poniższy snippet CSS wymusza użycie domyślnego kursora na każdej wiki, ukrywając wszystkie niestandardowe kursory. JZastępuje również kursor dłoni po najechaniu na linki domyślnym kursorem..

body,
* {
	cursor: default !important;
}

a:hover {
	cursor: pointer !important;
}

Ukryj kategorie strony głównej

Tylko osobisty CSS: Poniższy fragment CSS stworzony przez JustLeafy'ego oraz KockaAdmiralac usuwa pasek z kategoriami na dole strony głównej wiki

.mainpage .article-categories, .mainpage .page-footer__categories {
	display: none;
}

Schowaj tytuł strony głównej

Tylko osobisty CSS: Poniższy fragment CSS stworzony przez DiegoFire Network usuwa nazwę strony głównej wiki.

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

Hide global sidebar

This personal-only CSS snippet by Headquarter8302 removes the global sidebar and allowing a larger view of the content page. If you'd like to completely remove the margins present on the main container, consider using MinutelyWider.

.global-explore-navigation#global-explore-navigation { display: none }

.main-container {
  margin-left: 0;
  width: initial
}

Kompaktowy nagłówek strony

Tylko osobisty CSS: Poniższy fragment CSS stworzony przez KurwaAntics modyfikuje nagłówek strony, usuwając listę kategorii i języków oraz zmniejszając wielkość czcionki tytułu strony..

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

Stary wygląd przycisków

Tylko osobisty CSS: Poniższy fragment CSS stworzony przez JustLeafy przywraca poprzedni wygląd przycisków, usuwając zaokrąglone rogi i zmniejszając rozmiar czcionki.

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

Styl retro edytora Ace

Tylko osobisty CSS: Poniższy fragment CSS stworzony przez Headquarter8302 dodaje efekt świecącego tekstu edytora ACE 2010, podobny do ustawienia retro terminala Windows Terminal.

.ace_line {
	text-shadow: 0 0 5px currentColor;
}

Modyfikacja zaznaczenia tekstu

Ten fragment CSS stworzony przez JustLeafy sprawia, że tło zaznaczenia tekstu jest pół-przezroczyste.

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

Płynne ładowanie strony

Example of the Smooth Page Load

Tylko osobisty CSS: Poniższy fragment CSS stworzony przez Cleverduck09 dodaje drobną animację podczas ładowania stron wiki.

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

Czytelniejsze wyróżnienie zmian między wersjami

Poniższy fragment CSS autorstwa RyaNayR dodaje czerwoną obwódkę do podświetlania zmian przy przeglądaniu różnic między wersjami. Znacznie zwiększa to widoczność małych, jednoznakowych zmian, jednocześnie pozostając przyjemnym dla oczu przy większych zmianach.

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

Usuń kanał informacji dla fanów

Tylko osobisty CSS: Poniższy snippet CSS usuwa kanał informacji dla fanów znajdujący się na dole każdej strony.

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

Kolor kursora

Caret color to prosty arkusz stylów, który nadaje karetce (lub kursorowi wskaźnika tekstu) inny kolor. Obecnie karetkę można jedynie pokolorować tylko za pomocą caret-color - szerokość i inne właściwości nie są jeszcze konfigurowalne, ponieważ te właściwości jeszcze nie istnieją. Ta niewielka wtyczka CSS będzie miała wpływ na kursor we wszystkich obszarach tekstowych. Zwróć uwagę, że w poniższym kodzie kolor karetki jest zmieniony na czerwony, ale możesz zmienić go na inny, zależnie od preferencji.

textarea {
	caret-color: red;
}

Ukryj przeczytane powiadomienia

Tylko osobisty CSS: Poniższy fragment CSS stworzony przez Andrewds1021 ukrywa przeczytane powiadomienia w menu powiadomień (dzwonek w globalnej nawigacji) dotyczące wątków na Dyskusjach oraz Ogłoszeń. Zmienia również sposób dodawania poziomych linii między powiadomieniami, tak aby po ostatnim nieprzeczytanym powiadomieniu nie następowała dodatkowa pozioma linia.

/* Hiding read notifications */
#notificationContainer .wds-notification-card:not(.wds-is-unread), .notifications li:not([class*="isUnread"]) {
	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;
}

Duże miniatury w dynamicznym widoku kategorii

Poniższy fragment CSS autorstwa HumansCanWinElves i częściowo oparty na arkuszu stylów Fandomu, zmienia wszystkie wpisy na stronach kategorii tak, by wyglądały jak sekcja "Popularne strony" na górze - cztery kolumny z dużymi miniaturami. Działa to dla użytkowników, którzy używają domyślnego widoku "Dynamiczne kategorie".

Niektóre obrazy mogą wyglądać na nieco rozmazane - poniższy kod powiększa miniatury o niskiej rozdzielczości dostępna na stronie zamiast generować nowych

Wpisy bez obrazka będą wyświetlać logo Fandomu, które można zastąpić zmieniając adres URL w środku kodu. W tym przypadku, zazwyczaj należy również zmienić definicję rozmiaru "80%" na "100%".

.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(auto-fill, minmax(160px, 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;
}

Ukrycie przyklejonego nagłówka społeczności

Tylko osobisty CSS: Poniższy snippet CSS autorstwa BlindCartographer zatrzymuje wyświetlanie przyklejonej górnej nawigacji przy przewijaniu strony.

.fandom-sticky-header {
	display: none !important;
}