CSS Cookbook/tr

Bu yemek kitabı, istediğiniz gibi kullanabileceğiniz basit ancak kullanışlı CSS parçacıklarının bir koleksiyonudur.

CSS eğitimi

Arka plan resimleri

Vikinizin arka plan resmini CSS kullanarak değiştirmek istiyorsanız, başka yere bakmayın. Genel olarak, bunu kullanarak başarabilirsiniz:

body.mediawiki {
	/* Bunu, arka planın olmasını istediğiniz resmin URL'si ile değiştirin. */
	background-image: url("<URL>");
	/* Arka planın rengini değiştirir, bir onaltılık kod veya renk adı kullanın (yani "red"). */
	background-color: red;
	/* İki veya daha fazla arka plan katmanını farklı karışım modlarıyla birleştirir, elde edilen arka plan görünümünü değiştirmek için karışım modunun adlarından birini kullanın (örnekler: "color-dodge", "screen", "multiply", "hard-light", "difference", "luminosity"). */
	background-blend-mode: normal;
	/* Sayfayla birlikte kaydırmasına izin vermek için "scroll" veya konumunu sabit tutmak için "fixed" olarak ayarlayın */
	background-attachment: scroll; 
	/* Resmini başlatmak için yönlerden birini (yani "top left", "left center", "right center" vb.), yüzdeleri (x% y%) veya konumu (xpos ypos) ayarlayın (Not: % ve pos karıştırılabilir). */
	background-position: top left; 
	/* Varsayılan ayar, resmini hem dikey hem de yatay olarak tekrarlamaktır, "repeat-y" olarak ayarlamak resmini yalnızca dikey olarak tekrarlayacaktır, "repeat-x" olarak ayarlamak yalnızca yatay olarak tekrarlayacaktır ve "no-repeat" olarak ayarlamak hiç tekrar etmekten resmini engeller. */
	background-repeat: repeat;
}

Bazı ince ayarlar gerekebilir, ancak bunlar temel bilgilerdir.

Mesaj Duvarı kullanıcı etiketleri

Caburum tarafından hazırlanan bu pasaj, belirli bir kullanıcı tarafından mesajlara ve forum gönderilerine özelleştirilebilir bir "etiket" eklemenize olanak tanır. Hizmetlileri, bürokratları, vikinin kurucusunu vb. ayırt etmek için kullanılabilir. Herhangi bir amaç için kullanılabilir.

[class^='EntityHeader_name__'][href$="Kullanıcı Adı"]::after {
	content: " (Etiket)";
	color: var(--theme-page-text-color);
}

Kullanıcı Adı olarak kullanıcı adıyla değiştirin (boşlukları %20 ile değiştirdiğinizden emin olun veya ad özel karakterler kullanıyorsa, URL Kodlayıcı'ya dönüştürebilir ve sonucunu kullanabilirsiniz) ve (Etiket) ile daha sonra göstermek istediğiniz şeyle değiştirebilirsiniz. Etiketin görünümünü özelleştirmek için diğer CSS kurallarını yazabilirsiniz. Yukarıdaki örnek, etiketi eklemeye ek olarak, metin rengini diğer metinlerle aynı renkte yapar, ancak bu değiştirilebilir.

Belirli CSS

Fandom'un birkaç özel yerleşik sınıfı vardır.

• .ns
  • Ad alanına özel sınıf
  • Bu sayfanın adı .ns-0

/* Kullanıcı ad alanındaki metin rengini değiştirin */
.ns-2 {
	color: black;
}

• .theme-fandomdesktop-light and .theme-fandomdesktop-dark
  • Açık ve koyu temaya özel sınıflar

/* Koyu wikilerde bağlantı rengini değiştirin, ancak açık vikilerde değil */
.theme-fandomdesktop-dark a {
	color: white;
}

• .page
  • Sayfaya özel sınıf
  • Bu sayfanın adı .page-CSS_Cookbook

/* Belirli bir sayfaya biraz stil ekleyin */
.page-CSS_Cookbook h2 {
	font-weight: bold;
}

• .wiki
  • Vikiye özel sınıf
  • Bu vikinin adı .wiki-dev

/* Yalnızca geliştirici vikiye biraz stil ekleyin */
.wiki-dev .portable-infobox {
	padding: 1px;
}

Site geliştirmeleri

Image styling

This CSS manipulates the appearance of a specific image on your wiki, use this CSS snippet below, replacing Filename.ext with an image on your wiki (for example: Example.jpg):

img[src*="Filename.ext"] {
	/* Apply filters to manipulate image color */
	filter: none;
	/* 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;
	/* Set the opacity, to make the image opaque, or transparent. */
	opacity: 1;
	/* More CSS attributes */
}

/* 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;
	/* More CSS attributes */
}

#file img:hover {
	filter: revert !important;
	mix-blend-mode: revert !important;
	opacity: revert !important;
	/* More CSS attributes */
}

To apply CSS image manipulation for light and dark skins, place .theme-fandomdesktop- (for desktop), and .theme-fandommobile- (for mobile), with the class suffix light or dark before img.

Karartma özelleştirmesi

Bir açık kutusunda bir görüntü görüntülerken görünen karartmayı özelleştirmek için aşağıdaki CSS pasajını kullanın:

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

#84dcff arka planının rengini istenen renge ve overlay karıştırma türünü istenen karıştırma moduna değiştirin.

Gallery styling

This CSS snippet by ValleyMaster will change the default appearance of galleries.

/* Alters the whole gallery */
.wikia-gallery {
	/* CSS Attributes */
}

/* 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;
	/* More CSS Attributes */
}

/* Removes the default border of the images */
.wikia-gallery-item .thumb .gallery-image-wrapper {
	border-style: none;
}

If you want a custom image border, remove border-style: none and replace it with border: _px solid color.
You may also apply a border-radius if you'd like, and this works even with border-style: none active.

/* Changes the default position of the images to center */
.wikia-gallery-position-left {
	text-align: center;
}

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

.theme-fandomdesktop-light .lightbox-caption {
	border-top: 1px solid #cecece;
	border-bottom: 1px solid #cecece;
	/* More CSS Attributes */
}

Expand/Collapse toggle button design

This CSS snippet will allow you to design the expand/collapse toggle button.

/* Alters the appearance of the toggle button. */
.mw-collapsible-text {
	/* CSS Attributes */
}

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

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

Sometimes, the toggle button may not be better on the left side. This CSS snippet by ValleyMaster will allow you to change the position back to right.

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

To apply this, close the tag with mw-collapsible with <div class="float-right"></div>.
For example:

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

Table example:

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

Blok tarzı başlık

JustLeafy tarafından hazırlanan bu CSS parçacığı, sayfa başlığının düz bir arka plan rengine sahip bir blok stili gibi görünmesini sağlar. Oasis stili başlığın stilini dolaylı olarak döndürür.

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

.page {
	margin-top: 0;
}

Yoğunlaştırılmış başlık açılır listeleri

JustLeafy tarafından hazırlanan bu CSS parçacığı, sayfa başlığının açılır menülerinin stilini daha yoğun gösteriyor.

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

Satır yüksekliği özelleştirme

Satır yüksekliğini özelleştirme, mātrās (örneğin, ि, ी, ु ve ू) nedeniyle Devanagari, Bengal, Kannada, Odiya vb. belirtilen dillerdeki tüm vikilerin bunu kullanması önerilir:

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

Bağlantı özelleştirmesi

Bu CSS pasajı Cleverduck09 tarafından, viki çapındaki bağlantıların üzerine gelindiğinde, ziyaret edildikten sonra ve ziyaret edilmediğinde veya üzerine gelinmediğinde aşağıdaki kodu girin:

/* Tıklamadığınızda/üzerine gelmediğinizde bağlantı nasıl görünür */
a:link {
	color: KOD;
	background-color: KOD;
	text-decoration: KOD;
	text-shadow: KOD;
	/* More CSS Attributes */
}

/* Ziyaret ettiğinizde bağlantı nasıl görünür */
a:visited {
	color: KOD;
	background-color: KOD;
	text-decoration: KOD;
	text-shadow: KOD;
	/* More CSS Attributes */
}

/* Fareyle üzerine geldiğinizde bağlantı nasıl görünür */
a:hover { 
	color: KOD;
	background-color: KOD;
	text-decoration: KOD;
	text-shadow: KOD;
	/* More CSS Attributes */
}

/* Tıkladığınızda bağlantı nasıl görünür */
a:active { 
	color: KOD;
	background-color: KOD;
	text-decoration: KOD;
	text-shadow: KOD;
	/* More CSS Attributes */
}

Profil arka planı

Kullanıcı profillerine yayılan bir arka plan resmi eklemek istiyorsanız, şunları kullanabilirsiniz:

#userProfileApp {
	/* profil arka plan resmine URL ekleyin */
	background-image: url("<URL>");
}

Not: Daha geniş bir resim eklediyseniz, background-repeat: no-repeat; ekleyin. Uygun olmayabilirler ve tekrar eden bir arka plana neden olurlar.

Print/PDF sanitisation

This stylesheet by 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 not your 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;
}

Kaydırma çubuğu özelleştirmesi

Vikinizin kaydırma çubuğunu özelleştirmek istiyorsanız, ona çeşitli özellikler uygulamak için bu CSS seçicilerini kullanabilirsiniz:

/* Kaydırma çubuğunu 8 piksel genişliğinde yapar */
::-webkit-scrollbar {
	width: 8px;
}

/* Kaydırma çubuğu izinin siyah bir arka plana sahip olmasını sağlar */
::-webkit-scrollbar-track {
	background: black;
}

/* Kaydırma çubuğunun yeşil bir arka plana sahip olmasını sağlar */
::-webkit-scrollbar-thumb {
	background: #228B22;
}

/* Üzerine gelindiğinde kaydırma çubuğu çubuğunun arka planını daha koyu yeşil bir gölge yapar */
::-webkit-scrollbar-thumb:hover {
	background: #222;
}

Not: Kaydırma çubuğu özelleştirmesi yalnızca Chrome, Safari ve Opera gibi WebKit tabanlı tarayıcılarda desteklenir. Ancak, Firefox kullanıcıları bunun yerine scrollbar-width ve scrollbar-color gibi diğer özellikleri kullanabilir.

• scrollbar-width: Kaydırma çubuğunun genişliğini değiştirir. Bu özelliğin değerinin piksel cinsinden ölçülmediğini unutmayın, bu nedenle örneğin birkaç piksel yapmak yerine ince yapmak için değerin "ince" olması gerekir.
• scrollbar-color: Kaydırma çubuğunun renklerini değiştirir. Bu özellikte iki renk değeri olduğuna dikkat edin: ilk renk değeri kaydırma çubuğunun kendisine ve ikinci renk değeri kaydırma çubuğunun arka planına uygulanır. Üzerine gelindiğinde/etkin/odak durumunda kaydırma çubuğunun rengi otomatik olarak ayarlanır.

/* Firefox tarayıcıları için desteklenen özellikleri kullanarak tüm kaydırma çubuklarını değiştirin */
* {
	scrollbar-color: #888 transparent;
	scrollbar-width: thin;
}

Kullanıcı adı vurgulama

Bu CSS pasajı, bir hizmetlinin kullanıcı sayfasına, Mesaj Duvarı, katkılar ve blog listesine bağlantılar sunar:

a[href$=":Hizmetlinin_Kullanıcı_Adı"],
a[href$="/Hizmetlinin_Kullanıcı_Adı"] {
	/* Kullanıcı adının rengini değiştirir */
	color: #006600 !important;
	/* Kullanıcı adını kalın yapar */
	font-weight: bold !important;
	/* Kullanıcı adının yazı tipini değiştirir */
	font-family: Arial !important;
	/* More CSS Attributes */
}

Hizmetlinin_Kullanıcı_Adı ile vurgulamayı düşündüğünüz hizmetlinin kullanıcı adına, vurgulamak için #006600 ile istenen vurgulama rengine ve Arial ile istenen yazı tipine değiştirin. Vurgulamada bunlara ihtiyacınız yoksa belirli bölümleri de kaldırabilirsiniz.

Not: İçinde boşluk bulunan kullanıcı adları için mesaj duvarları boşlukları %20 ile kodlarken, MediaWiki kısmı boşlukları alt çizgi ile kodlar. Dolayısıyla her ikisini de vurgulamak için her iki versiyonun da CSS kuralına dahil edilmesi gerekir. Örneğin:

a[href$=":Hizmetlinin_Kullanıcı_Adı"],
a[href$="/Hizmetlinin_Kullanıcı_Adı"],
a[href$=":Hizmetlinin%20Kullanıcı%20Adı"],
a[href$="/Hizmetlinin%20Kullanıcı%20Adı"]	{
	/* CSS Attributes */
}

Kullanıcı adında başka özel karakterler olması durumunda (& veya ' gibi), bunların da uygun kodlamaya ihtiyacı vardır.

Anahat stilini değiştirin

Bu küçük CSS pasajı, anahat stilini özelleştirir. Anahat, sekme yapılırken görünen mavi kenarlık anlamına gelir (bir sayfada gezinmek için ↹ Tab kullanılarak). border ile karıştırılmaması gereken bir stildir. Anahat, ögeyi "ön plana çıkarmak" için ögelerin etrafına (sınırların dışında) çizilen bir çizgidir. İşte anahat özelliklerinin ve tanımlarının bir listesi.

• outline-color - Anahat rengini ayarlar. (ör. kırmızı anahat).
• outline-style - Anahat stilini ayarlar. (ör. noktalı, kesikli, katı vb.)
• outline-width - Anahat genişliğini ayarlar. (ör. 3 piksel geniş anahat)
• outline-offset - Bir anahat ile bir ögenin kenarı veya sınırı arasındaki boşluk miktarını ayarlar. (ör. 3 piksel büyüklüğünde bir öteleme ile anahat)

a:focus {
	/* Sets the color of the outline */
	outline-color: green;
	/* Sets the amount of space between an outline and the edge or border of an element */
	outline-offset: 1px;
	/* Sets the style of the outline (e.g. dotted, dashed, solid etc.) */
	outline-style: solid;
	/* Sets the width of the outline */
	outline-width: 2px;
}

Note: Do not remove that outline as it is vital for making your wiki accessible to users who only use their keyboards.

Special:Community sayfasında yuvarlak köşeler

Louky tarafından hazırlanan bu pasaj, Topluluk Sayfası modüllerinin köşelerini yuvarlar:

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

Pikselleştirilmiş resimler

Rail tarafından hazırlanan bu pasaj, Fandom'un resim işleme hizmeti tarafından uygulanan kenar yumuşatma olmadan düşük çözünürlüklü piksel resimlerinin görüntülenmesini sağlar.

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

Azaltılmış hareket

Bu CSS pasajı, tüm CSS animasyonlarının ve geçişlerinin süresini, artık farkedilmeyecek kadar kısa bir sürede, animasyonlara ve/veya geçişlere bağlı betikleri olması durumunda çalışır durumda tutar. Bu, animasyonları sevmeyen, hareketle tetiklenen vestibüler spektrum bozuklukları olan veya sayfa performansını iyileştirmek isteyen kişiler için faydalı olabilir. Kod, yalnızca kullanıcının sisteminde prefers-reduced-motion tercihine true olarak ayarlamaya sahip olması durumunda geçerli olacaktır. web.dev adresinden pasaj.

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

Kullanıcının tercihi ne olursa olsun, vikiye uygulamak için medya sorgusunu da kaldırabilirsiniz.

Erişilebilir gezinme düğmeleri

Gezinme çubuklarındaki bağlantıların klavyeyle gezilebilir olmasını sağlar (klavye kullanıcılarının içeriğe ulaşmadan önce her sayfada gezinmesi gereken bağlantıların miktarını önemli ölçüde artırabileceğinden, JumpToContent ile birlikte uygulanması şiddetle önerilir).

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

Bölümleri düzenleme

Gizli düzenleme bölümleri

Александр III tarafından hazırlanan bu CSS pasajı, bölüm başlıklarının yanındaki tüm düzenleme bağlantılarını gizler.

.mw-editsection {
	display: none;
}

Düzenleme bölümleri için simgeyi değiştirin

Laclale ve KockaAdmiralac tarafından hazırlanan bu CSS pasajı, bölüm başlıklarının yanındaki tüm düzenleme bağlantılarının simgesini değiştirir. Resme bağlanan URL'yi değiştirebilirsiniz.

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

Şeffaf alt çizgileri

Leslie1289 tarafından hazırlanan bu CSS pasajı, <s> ve ilgili ögeleri yarı saydam yapar. Örnek.

strike, s, del {
	opacity: 0.5;
}

Yarı şeffaf sayfa arka planı

İçerik alanının arka planı şu anda opaktır, yani arkasındaki viki arka plan resmini görünmez. Tema Tasarımcısı aracılığıyla seçilen rengi korurken bu arka planı yarı saydam olarak ayarlamak için şunu kullanın:

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

0,96 değeri opaklıktır ve artırılabilir veya azaltılabilir, ancak arka plan resmini metnin okunmasını zorlaştırabileceğinden çok fazla düşürülmesi önerilmez.

Yukarıdaki kod hala sağ rayı ve alt Hayran Beslemeyi opak bırakacaktır. Bunları da yarı şeffaf hâle getirmek için, bunun yerine aşağıdaki genişletilmiş sürüm kullanılabilir:

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

Special:Search sayfasında sabit arama çubuğu

User:SuperDragonXD1 tarafından hazırlanan bu basit pasaj, Special:Search ve Special:SearchCommunity üzerindeki ilgili viilerin ve filtrelerin yanında arama çubuğunu oluşturur.

/* Arama çubuklarının yapışkan olması */
.mw-special-Search form.unified-search__form, .mw-special-SearchCommunity form.unified-search__form {
	position: sticky;
	top: 42px;
	z-index: 1;
}

/* Soldaki sekmeler yapışkan */
.mw-special-Search .unified-search__layout__left-rail {
	position: sticky;
	top: 100px;
	align-self: flex-start;
}

/* İlgili topluluk bölümünün yapışkan olması */
.mw-special-Search .unified-search__layout__right-rail {
	position: sticky;
	top: 85px;
	align-self: flex-start;
}

/* Genel kural */
.mw-special-Search div#content, .mw-special-SearchCommunity div#content {
	overflow: unset;
}

/* Daha fazla CSS özelleştirmesi varsa arama çubuğunun çakışmasını önleyin */
.mw-special-SearchCommunity .unified-search__result {
	margin: 8px;
}

Yalnızca FAB TOC

Bu CSS pasajı, maddedki TOC'yi gizleyerek ancak sayfanın sol üst köşesindeki Kayan Eylem Düğmesi'nde (FAB) tutarak tüm İçindekiler Tablosunu (TOC) gösterme ve bunların hiçbirini göstermeme arasında bir orta yol belirler (veya mobildeyseniz sağ üstte). Sayfa içi TOC'ye yine klavye gezintisi yoluyla erişilebilir.

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

FAB olarak ray geçiş düğmesi

Ray geçiş düğmesi, sol taraftaki düğmeler gibi sizinle birlikte kaymaz, bu da yan çubuğu değiştirmek için sayfanın en üstüne kaydırmanızı gerektirir, bu nedenle bu kişisel CSS pasajı bu özelliği verir. diğer Kayan Eylem Düğmeleri (FAB'ler) ile aynı stile sahip düğmelere basın, böylece kaydırdığınızda sizi takip eder.

/* Ray geçiş düğmesine FAB stili ekler */
.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);
}

/* Rayın orijinal konumunu ve genişliğini geri yükler */
.right-rail-wrapper {
	transform: translateY(-63px);
	width: 100%;
}

HTML tema rengi

Bu pasaj, kaydırma çubuğunun yanı sıra bazı varsayılan HTML ögeleri tarafından oluşturulan kullanıcı arabirimi kontrolleri için vurgu rengini ayarlar. accent-color ögesinin yalnızca son tarayıcı sürümlerinde varsayılan olarak etkinleştirildiğini ve color-scheme daha geniş tarayıcı desteğine sahiptir.

Aşağıdaki pasaj, vikinizin varsayılan olarak açık tema olduğunu varsayar, ancak vikiniz varsayılan olarak koyu temalıysa, color-scheme değerini dark light değerine çevirebilirsiniz, ayrıca açık teması için renk şemasını düzgün bir şekilde güncellemek için .theme-fandomdesktop-dark sınıfını .theme-fandomdesktop-light olarak değiştirmek isteyebilirsiniz.

/* Tanımsız/açık tema */
:root {
	accent-color: var(--theme-link-color);
	color-scheme: light dark;
}

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

Yapışkan tablo başlıkları

Kullanıcıların her bir sütunun ne hakkında olduğunu kalıcı olarak görebilmeleri için tablo başlığı hücrelerinin ekranınızı takip etmesini sağlayabilirsiniz. Bunu yapmak için aşağıdaki CSS'yi kullanırsınız:

/* Yapışkan ögelerin sayfa içeriğinin içinde çalışmasına izin verir. */
#content {
	overflow: initial;
}

Sonra başlık hücrelerini yapışkan yapabilirsiniz. Burada iki yöntem göstereceğiz: biri yalnızca tablo sınıfını kontrol eden ve diğeri her hücrenin sınıfını kontrol eden.

/* Yöntem 1: tablonun sınıfını kontrol edin. Bu tablonun tüm başlık hücreleri yapışkan olacaktır. */
table.sticky-header th {
	position: sticky;
	top: 45px;
}

/* Yöntem 2: Yalnızca "sticky-header" sınıfına sahip tablo başlığı hücrelerini kontrol edin. */
table th.sticky-header {
	position: sticky;
	top: 45px;
}

Mobil alt bilgiyi hizala

Aşağıdaki kod parçası, etkileşimli haritalar ve gezinme kutuları ile çakışabileceğinden, mobildeki altbilgi bölümünü yukarıdaki herhangi bir ögeyi engellemeyecek şekilde hizalar.

Not: Bu parça yalnızca kişisel CSS'nize veya yerel FandomMobile.css dosyanıza eklenmelidir. Başka bir yere eklenirse veya topluluğunuz için mobil CSS etkinleştirilmemişse çalışmaz.

.article-footer {
	transform: unset;
}

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

Mobil ana sayfa ögelerini kaldır

Aşağıdaki kod parçası Sky Children of the Light Wiki'den gelir ve yalnızca üstte göstermek için burada vikinin ana sayfasına sahip olmak için mobilde yerel ana sayfadan öğeleri kaldırır.

Not: Bu parça yalnızca kişisel CSS'nize veya yerel FandomMobile.css dosyanıza eklenmelidir. Başka bir yere eklenirse veya topluluğunuz için mobil CSS etkinleştirilmemişse çalışmaz.

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

Kullanıcı özelleştirmeleri

WikiEditor Syntaxhighlight Extensions

Personal CSS only: This CSS extension pack by 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 — handy for debugging nested parser functions

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

Arama İpucunu Kaldır

Yalnızca kişisel CSS: Bu, belirli, vurgulanmış metin arama seçeneklerini gösteren sarı araç ipucunu kaldıran çok basit bir kullanıcı özelleştirmesidir.

#highlight__main-container {
	display: none;
}

İmleç özelleştirmesi

Yalnızca kişisel CSS: site genelinde kullanım, özelleştirme politikasını ihlal ediyor.

İmleciniz olarak görüntülenen simgeyi değiştirmek isterseniz, şunları kullanabilirsiniz:

/* This cursor icon will be displayed normally */
html {
	/* imleç simgesine URL ekleyin */
	cursor: url("<URL>"), default;
}

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

Kullanıcı adı şablonunu algıla

TheGoldenPatrik1 tarafından hazırlanan bu CSS pasajı, kullanıcıların buna kanmasını önlemek için {{USERNAME}} şablonu etrafına bir kenarlık yerleştirir:

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

"Tümünü Okundu Olarak İşaretle" düğmesini düzelt

Headquarter8302 tarafından hazırlanan bu yalnızca kişisel CSS pasajı, kayan viki gezinme çubuğunun bildirimler açılır penceresinin üst kısmını kaplaması ve böylece "Tümünü Okundu Olarak İşaretle" düğmesini kapatması sorununu düzeltir. Aşağıdaki pasaj, bildirimler açılır penceresinin ve başlığın z-index ile değiştirir:

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

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

Varsayılan imlecini zorla

Bu yalnızca kişisel CSS pasajı, tüm imleçleri varsayılan olmaya zorlar. Bu, özel viki imleçlerinin varsayılana geri döndürüleceği anlamına gelir. Ayrıca, varsayılan imleçle bağlantıların üzerine gelindiğinde el imlecini değiştirir.

body,
* {
	cursor: default !important;
}

a:hover {
	cursor: pointer !important;
}

Ana sayfa kategorilerini gizle

JustLeafy ve KockaAdmiralac tarafından hazırlanan bu yalnızca kişisel CSS pasajı, alt kategori çubuğunun ana sayfada görünmesini engeller:

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

Ana sayfa başlığını gizle

DiegoFire Network ve KockaAdmiralac tarafından hazırlanan bu yalnızca kişisel CSS pasajı bir vikinin ana sayfasının başlığını kaldırır.

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

Küçültülmüş PPH

KurwaAntics tarafından hazırlanan bu yalnızca kişisel CSS pasajı, başlığın üst kısmındaki kategori listesini ve dil açılır düğmesini kaldırarak ve makale başlığının yazı tipi boyutunu küçülterek Fandom'un yeni madde başlığını küçültür:

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

Önceki WDS Düğme tasarımı

JustLeafy tarafından sunulan bu küçük CSS eklentisi, düğmelerin köşeleri yuvarlatılmış ve daha büyük bir yazı tipi boyutuna sahip olmadan önceki stile benzemesini sağlar.

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

Retro 2010 ACE Düzenleyicisi

Headquarter8302 tarafından hazırlanan bu CSS pasajı, 2010 ACE Düzenleyici metninin Windows Terminal'in retro terminal ayarına benzer şekilde parlak bir metin efektine sahip olmasını sağlar.

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

Seçim özelleştirmesi

JustLeafy tarafından hazırlanan bu CSS pasajı, seçim arka plan rengini yarı saydam yapar.

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

Düzgün sayfa yükleme

Cleverduck09 tarafından hazırlanan bu yalnızca kişisel CSS kodu, viki sayfalarında kısa bir solma animasyonu oluşturur.

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

Fark vurgularını değiştir

RyaNayR tarafından hazırlanan bu CSS pasajı, vurgu renk şemasını farklılaştırmak için kırmızı bir anahat çerçevesi ekler. Bu, muhtemelen küçük, tek karakterlik değişikliklerin görünürlüğünü büyük ölçüde artırırken, vikinizdeki herhangi biri düzenleme farklılıklarını incelerken daha büyük farklarda göze hoş gelmeye devam eder.

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

Hayran Beslemesini Kaldır

Bu, ana sayfanın, madde sayfalarının ve dosya sayfalarının altında bulunan Hayran Beslemesi'ni kaldıran basit kişisel bir CSS pasajıdır.

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

Şapka rengi

Şapka rengi, şapkaya (veya metin gösterge imlecine) farklı bir renk veren basit bir stil sayfasıdır. Şu anda, şapka işareti yalnızca caret-color ile renklendirilebilir, ancak genişlik ve diğer özellikler henüz özelleştirilemez çünkü bu özellikler henüz mevcut değildir. Bu küçük CSS pasajı, tüm metin alanlarındaki şapka işaretini etkileyecektir. Buradaki şapka renginin kırmızı olduğunu, ancak kesinlikle farklı bir renge değiştirilebileceğini unutmayın.

textarea {
	caret-color: red;
}

Okuma beslemelerini/duyuru bildirimlerini gizle

Andrewds1021 ve KockaAdmiralac tarafından eklenen bu CSS pasajı, Beslemeler/Duyurular bildirimi açılır menüsünde (genel gezinme başlığındaki zil simgesi) okunan bildirimleri gizler. Ayrıca, son okunmamış bildirimin ardından yabancı bir yatay kuralın gelmemesi için yatay kuralların bildirimler arasına nasıl eklendiğini yeniden çalışır. Bu sadece kişisel kullanım içindir.

/* Okuma bildirimlerini gizleme */
#notificationContainer .wds-notification-card:not(.wds-is-unread), .notifications li:not([class*="isUnread"]) {
	display: none;
}

/* Yatay kurallar yeniden işleme */
#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;
}

Dinamik Kategorilerde büyük küçük resimler

HumansCanWinElves tarafından hazırlanan ve kısmen Fandom'un kendi stil sayfasına dayanan bu CSS pasajı, kategori sayfalarındaki tüm girişleri en üstteki "Trend sayfaları" gibi görünecek şekilde döndürür; büyük küçük resimlerle dört sütun. Bu, varsayılan "Dinamik Kategoriler" görünümünü kullanan kullanıcılar için çalışır.

Resimler, CSS tarafından büyütülmüş düşük çözünürlüklü küçük resimler olduğundan biraz bulanık görünüyor.

Resim içermeyen girişler Fandom logosunu gösterecek ve bu, kodun ortasındaki URL değiştirilerek değiştirilebilir. Bu durumda, genellikle "%80" boyut tanımını da "%100" olarak değiştirmek isteyeceksiniz. hsn = StickyNav'ı gizle

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

Hide StickyNav

Bu kısa, yalnızca kişisel, BlindCartographer tarafından yazılan pasaj, sabitlenmiş üst navigasyonun görünmesini engeller.

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