Viki düzenleyiciyi şekillendirme

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ç