Gamepedia Yardım Viki
Advertisement

Sayfa, Uzantı:WikiEditor tarafından eklenen viki kaynak düzenleyicisini şekillendirmek için bir kılavuz sunar (tüm Gamepedia vikilerinde varsayılan). Bazı vikiler, vikinin görünüme daha iyi uyması için düzenleyiciyi yeniden şekillendirmek isteyebilir.

Bu sayfa ayrıca Uzantı:MsUpload tarafından eklenen MsUploader'ı biçimlendirmek için bir kılavuz içerir (tüm Gamepedia vikilerinde varsayılan).

Seçim kılavuzu[]

Editör alanı[]

Seçim Açıklama Öneriler
form#editform
Kaydet/önizle/değiştir düğmeleri ve ayrıştırıcı profil oluşturma veri tablosu dahil olmak üzere tüm düzenleyicinin dış kabı.
div.wikiEditor-ui
Ana düzenleme arayüzü için kapsayıcı.
  • Özelleştirilecek varsayılan özellikler: background, border
div.wikiEditor-ui-controls
Düzenleyicinin üzerinde boş bir öğe.
  • Düzenleyicinin üzerinde neden olduğu ince kenarlığı kaldırmak için bu öğeye background:transparent;border:0; uygulayın.
div.wikiEditor-ui .wikiEditor-ui-view
Üst araç çubukları ve metin alanı dahil gerçek düzenleme arayüzü.
  • Özelleştirilecek varsayılan özellikler: border
div.wikiEditor-ui .wikiEditor-ui-top
MsUpload çubuğu da dahil olmak üzere düzenleyicinin üstündeki tüm araç çubukları için kapsayıcı.
  • Özelleştirilecek varsayılan özellikler: border
#wikiEditor-ui-toolbar
Temel wiki düzenleyici araç çubukları için kapsayıcı.
  • Özelleştirilecek varsayılan özellikler: background, border
  • Bu öğedeki arka planlar, hem üst araç çubuğunun hem de gelişmiş/özel karakterler/yardım menülerinin açtığı alt araç çubuklarının arkasında gösterilir.
form#editform .ve-init-mw-editSwitch .oo-ui-popupToolGroup
Görsel düzenleyici düğmesine geç.
  • Özelleştirilecek varsayılan özellikler: background
form#editform .ve-init-mw-editSwitch .oo-ui-popupToolGroup .oo-ui-popupToolGroup-handle:hover{
Görsel düzenleyici düğmesine geçmek için fareyle üzerine gelindiğinde görüntülenen stiller.
  • Özelleştirilecek varsayılan özellikler: background
div.wikiEditor-ui-toolbar .group
Araç çubuklarındaki her araç alt kümesi (örn. Kalın ve İtalik düğmeler birlikte bir alt kümedir).
  • Özelleştirilecek varsayılan özellikler: border-right
div.wikiEditor-ui-toolbar .group-search
Gelişmiş araç çubuğundaki arama aracı.
  • Bu, araç çubuğundaki border-left kullanan tek .group (yukarıya bakın). Diğer grupların kenarlıklarını özelleştirirseniz, bunu ayrı ayrı özelleştirmeniz gerekir.
div.wikiEditor-ui-toolbar .sections .section
Gelişmiş/özel karakterler/yardım menüleri tarafından açılan alt araç çubukları için kapsayıcı.
  • Özelleştirilecek varsayılan özellikler: background, border
div.wikiEditor-ui-toolbar .group .label
Gelişmiş alt araç çubuğundaki "Biçim" ve "Ekle" etiketleri.
  • Özelleştirilecek varsayılan özellikler: color
.wikiEditor-ui-toolbar .group .tool-select
Gelişmiş alt araç çubuğundaki "Başlık" açılır menüsü.
  • Özelleştirilecek varsayılan özellikler: background, border
div.wikiEditor-ui-toolbar .group .tool-select .label
Başlık açılır menüsünde "Başlık" yazan metin.
  • Özelleştirilecek varsayılan özellikler: color
.wikiEditor-ui-toolbar .group .tool-select .menu .options
Başlık menüsündeki gerçek açılır menü.
  • Özelleştirilecek varsayılan özellikler: background, border
.wikiEditor-ui-toolbar .group .tool-select .options .option
Başlık açılır menüsündeki her giriş.
  • Özelleştirilecek varsayılan özellikler: color
.wikiEditor-ui-toolbar .group .tool-select .options .option:hover
Başlık açılır menüsündeki her giriş için fareyle üzerine gelindiğinde stiller.
  • Özelleştirilecek varsayılan özellikler: background
div.wikiEditor-ui-toolbar .booklet .index div
Özel karakterlerin kenar çubuğundaki her sekme ve yardımcı araç çubukları.
  • Özelleştirilecek varsayılan özellikler: color
div.wikiEditor-ui-toolbar .booklet .index .current
Özel karakterler ve yardım alt araç çubuklarında seçili olan sekme.
  • Özelleştirilecek varsayılan özellikler: background, color
div.wikiEditor-ui-toolbar .booklet .pages
Özel karakterlerin ana içeriği ve yardımcı araç çubukları.
  • Özelleştirilecek varsayılan özellikler: background
div.wikiEditor-ui-toolbar .page-characters div span
Özel karakterler alt araç çubuğundaki her özel karakter düğmesi.
  • Özelleştirilecek varsayılan özellikler: color, border
div.wikiEditor-ui-toolbar .page-table th
Yardım alt araç çubuğundaki bilgi tablosunun başlıkları.
  • Özelleştirilecek varsayılan özellikler: color
  • Arka plan rengi eklemek de netlik açısından faydalı olabilir.
div.wikiEditor-ui-toolbar .page-table td
Yardım alt aracındaki bilgi tablosunun her bir hücresi.
  • Özelleştirilecek varsayılan özellikler: color, border-top
.wikiEditor-ui-bottom
Editör metin kutusu için kapsayıcı.
.mw-editform #wpTextbox1
Editör metin kutusunun kendisi.
  • Bu öğenin background ve color metin kutusunu yeniden renklendirmek için değiştirilebilir.
div.editOptions
Özet kutusunun ve kaydet/önizle/değiştir düğmelerini içeren metin kutusunun altındaki alan.
  • Özelleştirilecek varsayılan özellikler: background, color, border
#wikiPreview
"Önizlemeyi göster" düğmesine basarak düzenleyicinin altındaki önizleme alanı.
#wikiDiff
"Değişiklikleri göster" düğmesine basarak, düzenleyicinin altındaki değişiklik farkı alanı.

MsUpload[]

Seçim Açıklama Öneriler
#msupload-div
MsUpload araç çubuğunun ana kapsayıcısı.
  • Özelleştirilecek varsayılan özellikler: background, border
  • Araç çubuğunun etrafındaki kenarlığı kaldırmak istiyorsanız, alanın bazı tarayıcılarda daralmasını önlemek için bunun yerine border:1px solid transparent kullanın.
#msupload-dropzone
Varsayılan olarak açık gri kesik kenarlıkla çevrili MsUpload bırakma alanı.
  • Özelleştirilecek varsayılan özellikler: color, border
#msupload-list
Bekleyen dosyaların listesi için kapsayıcı.
#msupload-div #msupload-list .file
Bekleyen dosyalar listesindeki her dosya.
  • Özelleştirilecek varsayılan özellikler: background, border-top, border-bottom
#msupload-list .green
Dosya başarıyla yüklendi.
  • Özelleştirilecek varsayılan özellikler: background
#msupload-list .file .file-cancel
Her dosyadaki iptal "x" düğmesi.
  • Düğme, filter özelliği kullanılarak okunabilirlik için koyulaştırılabilir veya parlaklaştırılabilir.
#msupload-list .file .file-size
Listedeki her dosyadaki dosya boyutu.
  • Özelleştirilecek varsayılan özellikler: color
#msupload-list .file .file-warning
Her dosyaya yükleme uyarıları için kapsayıcı (yinelenen dosya, yükleme başarısız, vb.).
  • Özelleştirilecek varsayılan özellikler: color
#msupload-bottom a
Dosya listesinin altındaki "tüm dosyaları yükle", "listeyi temizle" vb. bağlantıları.
  • Özelleştirilecek varsayılan özellikler: color

Örnek CSS[]

Aşağıda, viki düzenleyicisinin basit bir şekilde yeniden renklendirilmesi için örnek kod verilmiştir. CSS'deki renkleri viki temanıza uyacak şekilde değiştirmek isteyebilirsiniz.

/**** VİKİ EDİTÖRÜ ****/
/* bazı varsayılan stilleri sıfırla */
div.wikiEditor-ui,
div.wikiEditor-ui-controls,
div.wikiEditor-ui-toolbar .booklet .pages {
	background: transparent;
	border: 0;
}

/* editör ve araç çubukları etrafındaki kenarlık */
div.wikiEditor-ui div.wikiEditor-ui-view {
	border: 1px solid #4f3169;
	margin-bottom: 0.5em;
}

div.wikiEditor-ui .wikiEditor-ui-top {
	border-bottom: 1px solid #4f3169;
}

/* ana araç çubuğuna stil ver */
div.wikiEditor-ui-toolbar {
	background: #1c1c1c;
	border-bottom: 1px solid #4f3169;
}

div.wikiEditor-ui-toolbar .group {
	border-right: 1px solid #4f3169;
}
/* arama aracı için özel kenarlık */
div.wikiEditor-ui-toolbar .group-search {
	border-left: 1px solid #4f3169;
	border-right: none;
}
/* ve düğmesine geç */
form#editform .ve-init-mw-editSwitch .oo-ui-popupToolGroup {
	background: #4f3169;
}

form#editform .ve-init-mw-editSwitch .oo-ui-popupToolGroup .oo-ui-popupToolGroup-handle:hover {
	background: #AF6DE8;
}
/* başlık açılır menüsü */
.wikiEditor-ui-toolbar .group .tool-select {
	background: #282a36;
	border: 1px solid #4f3169;
}
/* başlık açılır menü metni */
div.wikiEditor-ui-toolbar .group .tool-select .label {
	color: #fff;
}
/* başlık açılır menü menüsü */
.wikiEditor-ui-toolbar .group .tool-select .menu .options {
	background: #282a36;
	border: 1px solid #4f3169;
}

/* başlık açılır menü girişleri */
.wikiEditor-ui-toolbar .group .tool-select .options .option {
	color: #fff;
}

.wikiEditor-ui-toolbar .group .tool-select .options .option:hover {
	background: #4f3169;
}

/* alt araç çubukları */
div.wikiEditor-ui-toolbar .sections .section {
	background: #222;
	border-top: 1px solid #4f3169;
}

/* özel karakterler ve yardım alt araç çubukları sekmeleri */
div.wikiEditor-ui-toolbar .booklet .index div {
	color: #fff;
}
/* geçerli sekme */
div.wikiEditor-ui-toolbar .booklet .index .current {
	background-color: #4f3169;
	color: #fff;
}

/* özel karakterler listesi */
div.wikiEditor-ui-toolbar .page-characters div span {
	border: 1px solid #4f3169;
	color: #fff;
}

div.wikiEditor-ui-toolbar .page-characters div span:hover {
	background: #4f3169;
	color: #fff;
	border: 1px solid #4f3169;
}

/* yardım tablosu */
div.wikiEditor-ui-toolbar .page-table {
	padding: 0;
}

/* yardım tablosu başlıkları */
div.wikiEditor-ui-toolbar .page-table th {
	background: #4f3169;
	color: #fff;
}

/* yardım tablosu hücreleri */
div.wikiEditor-ui-toolbar .page-table td {
	border-top: 1px solid #4f3169;
	color: #fff;
}

/* metin kutusu renkleri */
.mw-editform #wpTextbox1 {
	background: #282a36;
	color: #f8f8f2;
}

/* editoptions alanını editörle eşleştir */
div.editOptions {
	background-color: #1c1c1c;
	border: 1px solid #4f3169;
}

/**** MSUPLOAD ****/
/* ana msupload alanı */
#msupload-div {
	background: #7f4fa8;
	border: 1px solid transparent;
}

/* msupload bırakma alanı rengi ve kenarlığı */
#msupload-dropzone {
	border: 1px dotted #fff;
	color: #fff;
}

/* msupload dosya listesi */
#msupload-div #msupload-list .file {
	background: #4f3169;
	border: 0;
}

/* msupload dosya listesi metni */
#msupload-div #msupload-list .file .file-size,
#msupload-div #msupload-list .file .file-title,
#msupload-div #msupload-list .file .file-warning {
	color: #fff;
}

Sonuç[]

Editor style example.png

Advertisement