Kenar çubuğunu şekillendirme

Sayfa, viki kenar çubuğunu ve logo alanını şekillendirmek için bir kılavuz sağlar. Bazı vikiler, vikinin kaplamasına daha iyi uyması için bu alan sayfasını yeniden şekillendirmek isteyebilir.

Kenar çubuğunu şekillendirmeyle ilgili önemli bir not, hem katlanabilir hem de katlanamayan kenar çubuğu ayarları için biçimlendirilmesi gerektiğidir. Ayar, tercihlerinize giderek ve "Vector kaplamasındaki kenar çubuğundaki öğelerin daraltılmasını etkinleştir" ayarını değiştirerek değiştirilebilir. Her iki mod da ayrı olarak değiştirilmesi gerekebilecek farklı varsayılan stillerle gelir.

Seçim kılavuzu

Seçim	Açıklama	Öneriler
div#mw-panel	Logo dahil tüm kenar çubuğu.
#p-logo	Logo bağlantısı için kapsayıcı. div # mw-panel'in üzerinden bulunur.	Logo görüntüsüyle aynı genişliğe ve yüksekliğe ayarlayın. top ve left tuşlarını kullanarak yeniden konumlandırın.
#p-logo a	Logoyu arka plan olarak içeren logo bağlantısı.	Logo görüntüsüyle aynı genişliğe ve yüksekliğe ayarlayın.
div#mw-panel div.portal	Kenar çubuğu bağlantılarının bölümü için kap.
div#mw-panel div.portal h3	Kenar çubuğundaki her bağlantı listesi için başlık.
.skin-hydradark #mw-panel.collapsible-nav .portal h3	Liste daraltılabilir kenar çubuğu modunda açık olduğunda kenar çubuğundaki her bir bağlantı listesinin başlığı.
.skin-hydradark #mw-panel.collapsible-nav .portal.collapsed h3	Liste daraltılabilir kenar çubuğu modunda kapatıldığında kenar çubuğundaki her bağlantı listesinin başlığı.
.mediawiki div#mw-panel div.portal div.body, #mw-panel.collapsible-nav .portal .body	Üstbilgi dahil değil, kenar çubuğundaki her bağlantı listesi için kapsayıcı.
div#mw-panel div.portal div.body ul li, #mw-panel.collapsible-nav .portal .body ul li	Kenar çubuğundaki her bir bağlantı için kap.
div#mw-panel div.portal div.body ul li a	Kenar çubuğundaki her gerçek iç bağlantı.	Kenar çubuğu bağlantılarının metin rengini değiştirmek için bu seçiciyi kullanın.
div#mw-panel div#p-socialProfiles	Kenar çubuğundaki sosyal simgeler için "portal".
div#mw-panel div#p-socialProfiles h3	Sosyal portalın başlığı normalde boş.	display: none ayarlamak önerilir.
div.socialSidebar	Sosyal simgeler etrafında bir kapsayıcı.
div.socialLink	Bireysel sosyal bağlantılar.

Örnek CSS

Bitmiş sonuç

Aşağıda, hem daraltılabilir hem de daraltılmış kenar çubuğu modlarında çalışan kenar çubuğunun basit bir yeniden renklendirilmesi için örnek kod verilmiştir. CSS'deki renkleri wiki temanıza uyacak şekilde değiştirmek isteyebilirsiniz.

/**** SIDEBAR ****/
/* kenar çubuğu bölüm başlıklarının arka planını biçimlendirme */
.mediawiki div#mw-panel div.portal h3 {
	font-size: 80%;
	padding: 0.5em;
	background-color: #777;
	border-radius: 2px;
}

/* kenar çubuğu başlıkları için metin stilleri */
.mediawiki div#mw-panel div.portal h3,
div#pageWrapper div#mw-panel h3 a {
	text-transform: uppercase;
	font-weight: bold;
	color: #fff;
}

/* daraltılmış kenar çubuğu başlıklarının üzerine gelindiğinde alt çizgiyi kaldır */
#mw-panel.collapsible-nav .portal.collapsed h3:hover {
	text-decoration: none;
}

/* daraltılabilir kenar çubuğu başlıklarında ok resmi değiştir */
.mediawiki div#mw-panel.collapsible-nav div.portal h3 {
	padding-left:calc(16px + 0.5em);
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E %3Cpath d=%22M11.05 3.996l-.965-1.053-4.035 3.86-3.947-3.86L1.05 3.996l5 5 5-5%22 fill=%22%23fff%22/%3E %3C/svg%3E");
	background-position: 0.5em center;
}

/* daraltılmış üstbilgiler için ok resmi değiştir */
.mediawiki #mw-panel.collapsible-nav .portal.collapsed h3 {
background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E %3Cpath d=%22M11.05 3.996l-.965-1.053-4.035 3.86-3.947-3.86L1.05 3.996l5 5 5-5%22 transform=%22rotate(-90 6 6)%22 fill=%22%23fff%22/%3E %3C/svg%3E");
}

/* kenar çubuğu bölümlerindeki bazı varsayılan stilleri sıfırla */
#mw-panel.collapsible-nav .portal .body,
.mediawiki div#mw-panel div.portal div.body {
	background: transparent;
	margin-left: 0;
}

#mw-panel.collapsible-nav .portal .body ul,
div#mw-panel div.portal div.body ul {
	padding-top: 0;
}

/* kenar çubuğu bağlantılarının arka planını biçimlendirme */
#mw-panel.collapsible-nav .portal .body ul li,
div#mw-panel div.portal div.body ul li {
	padding: 0.35em 0.5em;
	margin: 0.25em 0;
	background: #000;
	border-radius: 2px;
}

/* kenar çubuğu bağlantıları için metin stilleri */
.mediawiki div#mw-panel div.portal div.body ul li a,
div#mw-panel.collapsible-nav div.portal div.body ul li a {
	color: #af6de8;
}

/* sosyal düğme bölümü için çeşitli temizlik işlemleri */
div#mw-panel div.portal#p-socialProfiles h3 {
	display: none;
}

.socialSidebar {
	width: 100%;
}

div#mw-panel.collapsible-nav div.portal#p-socialProfiles {
	margin: 0.25em;
}