FANDOM


Bu cookbook, istediğiniz şekilde kullanılacak faydalı bir CSS pasajı koleksiyonudur.

CSS öğretimi

Arkaplan fotoğrafları

Wikinizin arka plan resmini CSS kullanarak değiştirmek istiyorsanız, başka yere bakmayın. Genellikle bunu kullanarak başarabilirsiniz.

body {
    background-image: url(<bunu arka planın olmasını istediğiniz resmin bağlantıyla değiştirin>);
    background-color: <arka planın rengini değiştirir, bir altıgen kod veya renk adı kullanın (ör. "red" sadece İngilizce sözlerde olabilir)>;
    background-blend-mode: <iki veya daha fazla arka plan katmanını farklı karışım modlarıyla birlikte 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-attachment: <sayfayla ilerlemesini sağlamak için kaydırmaya ayarlamak veya konumunu sabit tutmak için sabitlemek için>;
    background-position: <Resmin başlatılacağı yönlerden birine ayarlayın. (ör. "top left", "left center", "right center", vb.), yüzdeler (x% y%), ve ya pozisyon (xpos ypos). (Not:% ve pos karıştırılabilir)>
    background-repeat: <varsayılan ayar, görüntüyü hem dikey hem de yatay olarak tekrarlamaktır, yineleme-y ayarı sadece görüntüyü dikey olarak tekrarlar, yineleme-x yapmak sadece yatay olarak tekrar eder ve tekrarlamama olarak ayarlanması, yinelemenin engellenmesini önler.>;
}

Bazı ince ayar gerekli olabilir, ancak bunlar temeldir.

Belirli CSS

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

  • .ns
    • Ad alanına özgü sınıf
    • Bu sayfanın .ns-0'dır
/* Kullanıcı ad alanındaki metin rengini değiştirme */
.ns-2 {
    color: black;
}
  • .oasis-dark-theme
    • Sınıf otomatik olarak koyu bir temayla wikilere eklendi
/* Koyu wikide bağlantı rengini değiştirme ancak açık wikide ışık */
.oasis-dark-theme a {
    color: white;
}
  • .page
    • Sayfaya özel sınıf
    • Bu sayfanın .page-CSS_Cookbook'dur
/* Belirli bir sayfaya biraz stil ekleme */
.page-CSS_Cookbook h2 {
    font-weight: bold;
}
  • .user
    • Kullanıcıya özel sınıf
    • Giriş yapan kullanıcılar .user-loged ve adsız kullanıcılar .user-anon
/* Adsızlar için kategori toplayıcıyı gizle */
.user-anon .CategorySelect.articlePage .last {
    display: none;
}
  • .wiki
    • Wiki'ye özel sınıf
    • Bu wikinın .wiki-dev'dir
/* Yalnızca dev wiki'ye stil ekleme */
.wiki-dev .portable-infobox {
    padding: 1px;
}

Site geliştirmeleri

Karartma özelleştirme

Blackout

Bir açık kutuya bir görüntüyü görüntülerken ortaya çıkan karartmayı özelleştirmek için aşağıdaki CSS kod parçasını kullanın:

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

#84dcff arkaplanının rengini istenen renge ve karışım tipi overlay'ı istenen karıştırma moduna getirin.

Bulanık arka plan

BlurBackground

Bu CSS pasajı arka plana bulanıklık ekler.

Not: Tarayıcı desteği IE-Edge tarafında nispeten zayıf, ancak muhtemelen her şeyin çalışmasını beklememelisiniz. Yine de IE kullanıyoruz. Sadece bulanık olmayan bir görüntü gösterecektir.

body::before {
    content: '';
    background-image: url(image-url);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    -webkit-filter: blur(5px);
    filter: blur(5px);
}

Bulanıklaştırma efekti genellikle 2-5 piksel ile sınırlı olmalıdır. body zaten tanımlanmış bir arka plana sahipse, bunu her zaman kaldırabilirsiniz:

body {
    background-image: none !important;
}

İmleç özelleştirme

CustomCursor

İmleç olarak görüntülenen simgeyi değiştirmek istiyorsanız, aşağıdakileri kullanabilirsiniz:

/* Bu imleç simgesi normal olarak gösterilecektir */
body {
    cursor: url("<imleç simgesine URL ekle>");
}
 
/* Bu imleç simgesi, yönlendirmelere getirildiğinde veya tıklandığında görüntülenecektir */
a:hover, a:active {
    cursor: url("<imleç simgesine URL ekle>");
}

FixAceHighlightingUnits

Sophie tarafından yapılan bu CSS parçacığı, sözcüklerin vb. İçindeki as vurgulama birimlerini düzeltir.

#theme-solarized-light .kw2 > .re3,
#theme-solarized-light .re1 > .re3,
#theme-solarized-dark .kw2 > .re3,
#theme-solarized-dark .re1 > .re3 {
    color: unset;
}

Görsel Düzenleyici'de araç çubuğu genişliğini düzeltin

VEfixed

JustLeafy tarafından yapılan bu CSS parçacığı, düzenleme alanı kadar geniş olması için VisualEditor araç çubuğunun genişliğini düzeltir.

.ve-init-mw-viewPageTarget-toolbar {
    border-top: none;
}
.oo-ui-toolbar.ve-ui-toolbar.ve-ui-dir-inline-ltr.ve-ui-dir-block-ltr.ve-init-mw-viewPageTarget-toolbar {
    margin-left: -10px;
    margin-right: -10px;
}

"Makale metni yok" arka planı

ArticleNoTextBG

Bu site genelinde yalnızca Master Ceadeus 27 CSS kod parçasını eksik makale iletisine arka plan resmi ekler:

#mw-content-text .noarticletext {
    background-image: url('<hata resmi URL’si ekleyin>');
    background-blend-mode: normal;
    background-size: cover;
}

Profil arka planı

CustomMastheadImage

Kullanıcıların profillerin sağ alt köşesine bir arka plan resmi eklemek istiyorsanız, şunları kullanabilirsiniz:

.UserProfileMasthead .masthead-info {
    background-image: url("<profil arka plan resmine URL ekle>");
    background-repeat: no-repeat;
    background-blend-mode: normal;
    background-position: right bottom;
}

Not: Arka plan görüntüsünün koyu renkli bir arka planı varsa, color: white; ekleyin.

Duyarlı Modal

Responsive Modal

Noreplyz tarafından hazırlanan bu CSS parçacığı, bir mobil cihazdaki masaüstü sitesi kullanıldığında tüm modacıların konumunu düzelterek bu modalların kullanımını kolaylaştırır.

/* Duyarlı modal */
@media only screen and (max-width: 700px) {
  .modalWrapper {
    box-sizing:border-box;
    width:calc(100% - 20px) !important;
    left:auto !important;
    margin-left:10px !important;
  }
}

Yuvarlak div köşeleri

DivRoundedCorners

PhilippL tarafından gönderilen bu CSS pasajı köşeleri <div>'de yuvarlar.

#WikiaPage div,
#WikiaPage .avatar,
#WikiaPage section,
#WikiaPage table,
#WikiaPage .WikiaMenuElement,
#WikiaPage .widget-box,
#WikiaPage .preview_mobile.preview_icon,
#WikiaPage #wpPreviewMobile,
#WikiaPage #articleCategories {
    border-radius: 5px;
}

Kaydırma çubuğu özelleştirme

MinimalScrollbar

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

/* 8px kaydırma çubuğunu genişler */
::-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ğu çubuğunun yeşil bir arka plana sahip olmasını sağlar. */
::-webkit-scrollbar-thumb {
    background: #228B22;
}
 
/* Kaydırma çubuğu çubuğunun arka planını, gezdirildiğinde daha koyu yeşil bir gölge yapar */
::-webkit-scrollbar-thumb:hover {
    background: #222;
}

Not: Kaydırma çubuğu özelleştirmesi, yalnızca Chrome, Opera ve Safari gibi bazı tarayıcılarda desteklenir.

Kaynak Düzenleyici başlığı iyileştirmeleri

EditorSourceHeaderImprovements

JustLeafy tarafından yapılan bu CSS parçacığı, klasik bir düzenleyicinin başlığına farklı bir renk, kutu gölgesini kaldırma ve bazı opaklıklar dahil olmak üzere küçük geliştirmeler ekler.

/* Kaynak Düzenleyici Başlık İyileştirmeleri*/
.EditPageHeader {
    opacity: .95;
    background-color: darkgreen;
    border-bottom: none;
    box-shadow: none;
    color: #fff;
}
 
/* Yanlış renkli bağlantıları düzelt */
.EditPageHeader > .wordmark,
.EditPageHeader > h2,
.EditPageHeader > h1 a,
.HelpLink,
.HelpLink > a,
.NotificationsLink,
.NotificationsLink > a {
    color: inherit;
}

Gösterge Işık Kutusu Makale Düğmesine Ekle

A2A

JustLeafy tarafından gönderilen bu CSS parçacığı, makaleye ekle seçeneğini ışık kutusundan kaldırır. Makaleye ekle seçeneği, kullanıcının makalede görüntülemekte olduğu görüntüyü "Makaleye Ekle" düğmesini tıkladıktan sonra görüntülenecek olan giriş kutusuna yazarak adını bir makaleye eklemek için kullanılır.

.LightboxModal .lightbox-add-to-article {
    display: initial;
}

Sohbette kalan karakter miktarını göster

UnhideRemainingCharacters

Bu CSS eklentisi JustLeafy, kaç karakter yazıldığına bakılmaksızın kalan karakterlerin kullanılmamasını sağlar.

/** Kalan Karakterleri Göster **/
 
/* İstediğiniz zaman "kalan karakter" özelliğini görüntüleyin */
 
body .remaining {
    display: initial;
    font-weight: bold;
    margin-right: 5px;
    margin-top: 30px;
    z-index: 1;
}
 
/* Bu özelliğe yer açmak için sohbet mesajı giriş kutusunun genişliğini sınırlama */
 
.Write [name="message"] {
    width: 96%;
}

Kullanıcı adı vurgulama

HighlightUsername

Bu CSS pasajı, bir yöneticinin kullanıcı sayfasına, İleti Duvarı, katkılar ve blog listesine bağlantılar sunar:

a[href$=":Admin's_Username"],
a[href$="/Admin's_Username"] {
    /* kullanıcı adının rengini değiştirir */
    color: #006600 !important;
    /* kullanıcı adını kalınlaştırır */
    font-weight: bold !important;
    /* kullanıcı adının yazı tipini değiştirir */
    font-family: Arial !important;
    /* diğer CSS buraya gidiyor*/
}

Vurgulamak istediğiniz yöneticinin kullanıcı adına "Yönetici Kullanıcı Adı"nı, #006600 vurgulamanın rengini, vurgulamak için istenen yazı tipini Arial olarak değiştirin. Vurgulamaya gerek duymuyorsanız, bazı bölümleri de çıkarabilirsiniz.

Dosya geçmişi tablosunun rengini düzeltme

FFHTC

Bu küçük CSS eklentisi, dosya geçmişi tablolarının arka plan rengini düzelterek beyazdan siyaha dönüştürür.

/* Fix File History Table Color */
.oasis-dark-theme table.wikitable.filehistory > tbody > tr > td,
.oasis-dark-theme table.wikitable.filehistory > tbody > tr > th {
    background: black !important;
    color: white !important;
}
 
.oasis-dark-theme table.wikitable.filehistory > tbody > tr > td {
    border-bottom: 1px #222 solid !important;
}

Anahat stilini değiştir

DifferentOutlineStyle

Bu küçük CSS eklentisi, anahat stilini özelleştirir. Anahat, sekme sırasında görünen mavi kenarlık anlamına gelir (bir sayfada gezinmek için Tab kullanarak). border ile karıştırılmaması gereken bir stildir. Bir taslak, öğenin "öne çıkmasını" sağlamak için öğelerin etrafına (sınırların dışında) çizilen bir çizgidir. Anahat özelliklerinin ve tanımlarının bir listesi aşağıdadır.

  • outline-color: Anahatın rengini ayarlar. (ör. red outline).
  • outline-style: Anahat stilini ayarlar. (ör. dotted, dashed, solid etc.)
  • outline-width: Anahatın genişliğini ayarlar. (ör. 3-pixel wide outline)
  • outline-offset: Bir anahat ile bir öğenin kenarı veya kenarlığı arasındaki boşluk miktarını ayarlar. (ör. Anahat, 3 piksel genişliğinde bir kayma ile)
/* Anahat rengini, genişliğini, stilini ve ofsetini özelleştirin (bunun bir örnek olduğunu unutmayın ve özellikleri tercihlerinize göre değiştirebilirsiniz.) */
a:focus {
    outline-color: green;
    outline-offset: 1px;
    outline-style: solid;
    outline-width: 2px;
}

SyntaxHighlight Düzenleme Uzantısı

Andrewds1021 tarafından eklenen bu CSS parçacığı, <syntaxhighlight> etiket öğesini kullanırken bazı ekran sorunlarını düzeltir (yanı sıra <source> etiketinin diğer adı). Özellikle 2 basamaktan daha uzun olan satır numaralarının kesilmesini önler ve satır vurgulama kullanıldığında, tek tek satırlar yerine tüm kod bloğunu kaydırır.

.mw-geshi > div {
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
}
 
.WikiaArticle .mw-geshi ol,
.SpeechBubble .speech-bubble-message .mw-geshi ol {
    list-style-position: inside;
    margin-left: 0;
    display: inline-block;
}
 
.mw-geshi li {
    white-space: nowrap;
}
 
.mw-geshi pre {
    overflow: visible;
    display: inline-block;
}

Örnek Etiket Kullanımı:

<syntaxhighlight lang="css" line start="1234" highlight="3" style="width: 200px; height: 100px;">
table {
    padding: 25px;
    background-image: url("https://vignette.wikia.nocookie.net/shadows-lionking/images/5/50/Wiki-background/revision/latest");
}
</syntaxhighlight>

Örnek Etiket Sonucu:

  1. table {
  2.     padding: 25px;
  3.     background-image: url("https://vignette.wikia.nocookie.net/shadows-lionking/images/5/50/Wiki-background/revision/latest");
  4. }

Kullanıcı özelleştirmeleri

Özel topluluk başlığı

Screenshot 51ByAnon

Bu kişisel sadece CSS pasajı Anonminati tarafından tam resim grafik başlığı yapar.

header.wds-community-header {
        background-image: url(URL resminizi buraya ekleyin...) !important;
        background-position: right center !important;
        background-size: auto !important;
}
 
.wds-community-header::before {
    background: linear-gradient(to right,rgba(255, 217, 0, 0),rgba(240, 133, 12, 0),rgba(51, 24, 0, 0.7),rgba(51, 27, 30, 0)),linear-gradient(to left,rgba(0, 0, 0, 0) 200px,#0000 430px) !important
}

Kullanıcı Adı Şablonunu Algıla

DetectUsername

TheGoldenPatrik1 tarafından yapılan bu CSS parçacığı, kullanıcıların kandırmasını önlemek için {{USERNAME}} şablon etrafına bir sınır koyar:

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

Varsayılan imleci zorla

ForceDefaultCursor

Bu kişisel sadece CSS pasajı tüm imleçleri varsayılan hale getirmeye zorlar. Bu, özel wiki imleçlerinin varsayılan ayarlara geri döndürüleceği anlamına gelir. Ayrıca, varsayılan imleç ile bağlantılar üzerinde gezerken el imlecinin yerini alır.

body,
a:hover,
* {
    cursor: default !important;
}

Öne Çıkan Videoları Gizle

HideFeaturedVideos

Normalde, w:c:spongebob:Spongebob Squarepants (Character) özel bir videoya sahip, ancak bu CSS pasajını uygulamak onu kaldırıyor.

Bu kişisel sadece CSS pasajı Sophiedp tarafından öne çıkan videoyu makaleler üzerinde gizler.

/* Öne Çıkan Videoları Gizle */
.featured-video__wrapper {
    display: none;
}

Ana sayfa kategorilerini gizle

NoCat

Bu sadece kişisel CSS pasajı JustLeafy tarafından alt kategori çubuğunun ana sayfada görünmesini önler:

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

Bildirimleri gizle

HideNotifications

Bu kişisel-sadece CSS pasajı KnazO tarafından sağ alt kısımda, konuşma sayfası bildirimleri görünmeyen tüm bildirimlerin görünmesini engeller:

#WikiaNotifications li div[data-type="2"], /* topluluk mesajı bildirimleri */
#WikiaNotifications li div[data-type="5"], /* genel bildirimler */
#WikiaArticle #WikiaNotifications { /* kullanıcıların sayfalarına koydukları bildirimler */
    display: none !important;
}

Ray modüllerini gizle

HideRail

Bu sadece kişisel CSS pasajı Monochromatic Bunny tarafından belirli modülleri Demiryolundan gizler:

.WikiaRail .chat-module, /* Sohbet Modülünü Kaldırır */
.community-page-rail-module, /* Wiki Etkinliği modülünün Topluluk bölümünü kaldırır */
.insights-module, /* Anlayışlar Modülünü Kaldırır */
#recirculation-rail, /* Trend Makaleleri Modülünü Kaldırır */
#wikia-recent-activity { /* Wiki Etkinlik Modülünü Kaldırır */
    display: none;
}

Not: Makale genişliğini artırmak ve sağdaki rayda boş alan bırakmamak için aşağıdaki kodu ekleyin.

#WikiaMainContent {
    width: 100%;
}

Trend Fandom Makalelerini Gizle

AnonSnippet2

Bu kişisel sadece CSS pasajı Anonminati tarafından gönderilen Fandom makalelerini gizlemektedir.

#WikiaAdInContentPlaceHolder.rail-sticky-module {
    visibility: hidden;
}

Görsel Düzenleyici odağını öldür

Kill visual editor focus-before

Before

Kill visual editor focus-after

After

Bu küçük CSS eklentisi iynque, Görsel Düzenleyici'deki odağı öldürür.

/* UI—blocking VisualEditor "focus" temizle */
body.ve .WikiaMainContent {
    box-shadow: initial;
    z-index: 1;
    border: 1px dashed rgba(230, 126, 34, 0.35);
}
 
body.ve {
    pointer-events: auto;
}

Minyatür PPH

MinifiedPPH

Bu sadece kişisel CSS pasajı, KurwaAntics tarafından Fandom'un yeni makale başlığını, başlığın üstündeki kategori listesini ve dil açılır düğmesini kaldırarak ve makalenin başlığının yazı tipi boyutunu küçülterek küçültür.

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

Önceki WDS Düğme tasarımı

OldWDSButtons

Bu küçük CSS eklentisi JustLeafy, köşeleri yuvarlatılmış ve daha büyük bir font boyutuna sahip olmadan önceki stillere benziyor.

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

Seçim özelleştirme

CustomSelection

Bu CSS pasajı JustLeafy seçim arkaplan rengini yarı saydam yapar.

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

Kaydırma gölge düğmesi

Readmore

Anonminati tarafından yapılan bu CSS parçacığı, kaydırıcıdaki "Daha fazla oku" düğmesini alt gölge yapıyor.

.wikiaPhotoGallery-slider-body {
    --mst-icon: none;    
}
 
.wikiaPhotoGallery-slider-body .wikia-button.secondary {
    background-color: #2193d7 !important;
    border-radius: 0px !important;
    color: black;
    font-size: 15px;
    font-weight: normal !important;
    text-transform: none;
    box-shadow: 4px 4px black;
    font-family: rubik;
}
 
.wikiaPhotoGallery-slider-body a:not(.wds-button).wikia-button.secondary:hover {
    background-color: #DDDDDD !important;
    filter: brightness(80%);
}

Statik TFA ray modülü

StaticTFA

Bu kişisel sadece JustLeafy CSS pasajı, "Kaydırıldığında Fandom Makaleleri" modülünü statik hale getirir:

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

Çirkin modüller

UglyModules

KurwaAntics tarafından hazırlanan bu CSS pasajı, Fandom'un yeni ray modüllerinin çirkin sınırlarını düzeltir.

.WikiaRail .rail-module {
    margin: 0 0 20px;
}
.WikiaRail .rail-module h2 {
    align-items: center;
    display: flex;
}

Farkı vurgulamaları değiştir

RyaNayR tarafından yapılan bu CSS parçacığı, vurgulanan renk şemasını değiştirmek için kırmızı bir anahat-sınır ekler. Bu, muhtemelen küçük, tek karakterli değişikliklerin görünürlüğünü büyük ölçüde artırırken, wikinizdeki herhangi birinin düzenleme farklarını gözden geçirdiği zaman daha büyük farklara sahip gözlerin tadında kalmasını sağlar.

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

İlgili Hikayeleri Gizle

Screenshot 46

Bu kişisel sadece CSS pasajı Anonminati ile ilgili hikayeleri gizler.

.side-articles .side-article {
    border-top: 2px solid #333333;
    margin-bottom: 0;
    min-height: 90px;
    padding-bottom: 8px;
    display: none;
}
 
.side-articles .side-articles-header {
    border: 0;
    margin: 0 0 19px;
    padding: 0;
    display: none;
}

Hayran Yayınları Kaldırma

Remove Fan Feed

Bu ana sayfanın, makale sayfalarının ve dosya sayfalarının altında bulunan hayran Yayınların kaldıran basit bir CSS pasajıdır.

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

Düzeltme Rengi

CaretColor

Düzeltme Rengi düzeltme işareti (veya metin göstergesi imlecine) farklı bir renk veren basit bir stil sayfasıdır. Şu anda, düzeltme kodu yalnızca caret-color ile renklendirilebilir, ancak bu özellikler henüz mevcut olmadığından genişlik ve diğer özellikler henüz özelleştirilemez. Bu küçük CSS eklentisi, tüm metin alanları etkileyecektir. Buradaki şapka rengi kırmızıdır, ancak kesinlikle farklı bir renge dönüştürülebilir.

textarea {
    caret-color: red;
}
Community content is available under CC-BY-SA unless otherwise noted.

Fandom may earn an affiliate commission on sales made from links on this page.

Stream the best stories.

Fandom may earn an affiliate commission on sales made from links on this page.

Get Disney+