Gamepedia Yardım Viki
Advertisement

VectorTabs her viki başlığında "sayfa", "tartışma", "görüntüle", "düzenle" ve "geçmiş" bağlantıları, "paylaş" ve "diğer" açılır menüler ve arama çubuğu. Kullanıcıların sayfa düzenleme bağlantısı sağladığından, wiki gezinmesinin en önemli öğelerinden biridir.

Styling the VectorTabs can be challenging because they are made up of many different elements, so this is a guide to styling them.

Seçim kılavuzu[]

Üstbilgi alanı, VectorTabs ve VectorMenu[]

Seçim Açıklama Öneriler
div#mw-page-base
Kenar çubuğunun ve içeriğin üst konumunu etkileyen boş başlık öğesi.
  • Bu, başlık için bir arka plan için kullanılabilir seçeneklerden biridir. İstenen arka plan boyutu #mw-head'dan farklıysa kullanışlıdır.
  • Yüksekliğin, dikey kenar boşluklarının veya dikey dolgunun ayarlanması kenar çubuğunun ve içeriğin üst konumunu ayarlayacaktır.
div#mw-head-base
Kenar çubuğunun ve içeriğin üst konumunu etkileyen boş başlık öğesi.
  • Kenar çubuğunun ve tarayıcılar arasındaki içeriğin tutarsız olarak dikey konumlandırılmasını önlemek için display: none; seçeneğini ayarlayın ve #mw-page-base öğesine ekstra yükseklik ekleyin. Mükemmel piksel konumlandırmaya ihtiyacınız varsa önemlidir.
div#mw-head
Sayfa gezinme çubuğu için gerçek kapsayıcı.
  • Bu normal akışta değildir ve içeriği veya kenar çubuğu konumunu etkilemez.
  • Bunu #mw-page-base ile aynı yüksekliğe ayarlamak en kolay yöntemdir, ancak tüm sayfa eylemleri çubuğunda kenarlık, arka planlar veya diğer efektler isteniyorsa kenar boşlukları veya konumlandırma kullanılabilir.
  • Standart olmayan içerik genişliği kullanıyorsanız, büyük olasılıkla buna uygun bir genişlik ayarlamanız gerekir. Bazı durumlarda, doğru etkiyi elde etmek için konumlandırma, kenar boşlukları, dolgu ve / veya genişliğin bir kombinasyonunu gerektirebilir.
#left-navigation
İçerik ve tartışma sayfası için bağlantılar.
  • Konum #mw-head ile ilişkilidir.
  • Konumu ayarlamak için top ve left tuşlarını kullanın.
  • #mw-head'in konumunu veya kenar boşluklarını ayarlamayı seçmediğiniz sürece, sol genellikle kenar çubuğunun genişliğine veya daha büyük bir değere ayarlanır.
#right-navigation
Sayfa işlemleri bağlantıları ve arama denetimleri için kapsayıcı.
  • Kenar boşluklarını kullanarak konumu ayarlayın.
div.vectorTabs
Kapsayıcılar: içerik ve tartışma sayfası bağlantıları; ve görüntüleme, düzenleme ve geçmiş bağlantılarını içerir.
  • Bu öğelerdeki kenar boşluklarında, dolgularda veya yazı tipi boyutlarında ayarlamalar yaparken dikkatli olun, çünkü tarayıcı penceresi dar olduğunda çakışabilirler.
  • Vector uzantısı, yeterli genişlik olmadığında bağlantıları fareyle üzerine gelebilecek JavaScript ekler, ancak kenar boşluklarını veya dolguları dikkate almaz. Daraltma komut dosyasının tam işlevini korumak için istenen dolgulama div.VectorTabs span öğesine uygulanmalıdır.
  • Varsayılan olarak arka planı vardır. Büyük olasılıkla kaldırmanız veya geçersiz kılmanız gerekir.
div.vectorTabs li
Tek sayfalık sekme bağlantısı için bir dış kapsayıcı.
  • Varsayılan olarak arka planı vardır. Büyük olasılıkla kaldırmanız veya geçersiz kılmanız gerekir.
div.vectorTabs li.selected
Seçili tek sayfalık sekme bağlantısı için bir dış kapsayıcı.
  • Varsayılan olarak arka planı vardır. Büyük olasılıkla kaldırmanız veya geçersiz kılmanız gerekir.
div.vectorTabs li span
Tek sayfalık sekme bağlantısı için iç kapsayıcı.
  • Varsayılan olarak arka planı vardır. Büyük olasılıkla kaldırmanız veya geçersiz kılmanız gerekir.
div.vectorTabs li span a
Bir sayfa sekmesi bağlantısı.
  • Göreceli birimlerde yükseklik ayarlanmış. Başlığın yüksekliğine bağlı olarak, bunun mutlak birimlerle değiştirilmesi gerekebilir.
div.vectorTabs li.new span a
Var olmayan bir sayfanın sayfa sekmesi bağlantısı.
div.vectorMenu
Üst çubuktaki fareyle üzerine gelme menüsü sekmeleri için kapsayıcı.
  • Sekme bağlantılarının yüksekliği ayarlanmışsa, buradaki yükseklik genellikle eşleşecek şekilde ayarlanmalıdır.
div.vectorMenu h3 span::after
Fareyle üzerine gelme menülerinde oku oluşturan öğe.
  • Ok bir arka plan görüntüsü kullanılarak oluşturulur, böylece okun görünümü arka plan görüntüsü olarak farklı bir ok görüntüsü kullanılarak değiştirilebilir.
div.vectorMenu div.menu
Fareyle üzerine gelindiğinde kullanılan menü (yalnızca okun üzerine geldiğinde görünen bölüm).
  • Fareyle üzerine gelindiğinde menü sekmelerinin yüksekliği ayarlandıysa, sekmenin ve düğmenin arasında boşluk kalmaması için menünün konumunu left ve top ile ayarlamak gerekebilir.
  • Fare imleci hala üzerindeyken menü kapanıyorsa, z-index artırmanız gerekebilir. 3000 gibi gerçekten yüksek bir değer, isterseniz başka bir yerde z-index'i ayarlamanız için bolca alan sağlar.
div#p-sharing
Paylaşma gezinme menüsü sekmesi için kapsayıcı.
div#p-sharing div#socialIconImages
Paylaşma vurgusu menüsündeki paylaşım simgeleri için kapsayıcı.
div#p-sharing div#socialIconImages a
Paylaşım faresi menüsündeki bireysel paylaşım simgeleri.
div#p-cactions
Fareyle üzerine gelindiğinde, sayfa işlemlerini içeren (silme gibi) gezinme menüsü sekmesi.
div#p-cactions div.menu ul li a
Fareyle üzerine gelme menüsündeki bir bağlantı.
  • Bağlantılar arasındaki boşluk dikey dolguyla veya kenar boşluklarıyla ayarlanabilir.
.vectorTabs #ca-watch.icon a
İzleme düğmesi.
  • Yıldızın görünümü, bu öğenin arka plan görüntüsü değiştirilerek değiştirilebilir.
.vectorTabs #ca-unwatch.icon a
İzlememe düğmesi.
  • Yıldızın görünümü, bu öğenin arka plan görüntüsü değiştirilerek değiştirilebilir.

Arama kutusu ve arama önerileri[]

Seçim Açıklama Öneriler
#p-search
Arama kutusu ve düğmeler için dış kap.
#p-search form
Arama kutusu ve düğmeler için iç konteyner.
  • Arama kutusunun ve düğmelerin dikey konumunu ayarlamaya çalışıyorsanız, line-height ayarlayarak başlayın. Bu, line-height dikey merkezleme efekti nedeniyle tarayıcılar arasındaki konumlandırmayı iyileştirmeye yardımcı olabilir.
  • Bazen div.vectorTabs daha uzun yapmak, #left-navigation ve #right-navigation değerlerini aynı miktarda yukarı taşımak, eklemek bu sekme üst kenar boşluğunu gerçek sekmelere getirin ve #p-search öğesinin dikey kenar boşluğu veya dolgu olmadan div.vectorTabs ile aynı yükseklikte olmasına izin verin. Arama kutusunu aşağı değil yukarı genişletmek için daha büyük yazı tipi boyutlarını tercih ediyorsanız bu yararlı olur.
div#simpleSearch #searchInput
Arama kutusu.
  • Arama kutusunun diğer metin kutularından farklı bir görünüme sahip olmasını istiyorsanız kullanışlıdır. Aksi takdirde, yalnız bırakmak en iyisidir.
div#simpleSearch #searchInput::placeholder
Arama kutusunun içindeki yer tutucu metin ("Gamepedia Yardım Viki üzerinde ara").
  • Bu seçici, yer tutucu metnin yazı tipini ve rengini ayarlamak için kullanılabilir.
#simpleSearch #searchButton
Büyüteç arama düğmesi.
  • Arama düğmelerinin diğer düğmelerden farklı bir görünüme sahip olmasını istiyorsanız kullanışlıdır. Aksi takdirde, bunu yalnız bırakmak en iyisidir.
.suggestions
Arama önerileri açılır kutusu.
  • Bu muhtemelen herhangi bir stil gerektirmez. Arama önerileri listesinin arka planını veya kenarlıklarını değiştirmek isterseniz, bunun yerine .mediawiki .suggestions-results kullanın.
.mediawiki .suggestions-results
Arama önerilerinin listesi.
.suggestions a.mw-searchSuggest-link, .suggestions a.mw-searchSuggest-link:hover, .suggestions a.mw-searchSuggest-link:active, .suggestions a.mw-searchSuggest-link:focus
Tek bir arama önerisi öğesi ve çeşitli bağlantı durumları.
  • Yazı tipi rengi varsayılan olarak siyahtır, bu nedenle koyu renkli tema vikileri için rengin değiştirilmesi gerekebilir.
.mediawiki .suggestions-result
Her bir arama öneri öğesinin iç kabı.
  • Varsayılan olarak bir arka plan rengi ayarlanmıştır. Arama önerilerini şekillendiriyorsanız muhtemelen geçersiz kılmanız gerekir.
.mediawiki .suggestions-result-current
Vurgulanan tek arama öneri öğesi.
  • Vurgu, vurgu rengini değiştirmek için değiştirilebilen bir arka plan rengiyle uygulanır.
  • Vurgu rengi değiştirilirse değiştirilmesi gereken bir yazı tipi rengine sahiptir.
.mediawiki .suggestions-result .highlight
Arama önerisinde, arama dizesinin sonuçların sayfa başlıklarıyla nerede eşleştiğini göstermek için vurgulanan harfler.

Örnek CSS[]

VectorTabs ve arama kutusu için bazı basit kusursuz stiller için örnek kod aşağıdadır. CSS'deki renkleri viki temanıza uyacak şekilde değiştirmek isteyebilirsiniz.

/**** VECTOR SEKMELERİ & VECTOR MENÜSÜ ****/
/* varsayılan arka planı sıfırla ve yazı tipi boyutunu eşit yap */
#p-search,
div.vectorMenu,
div.vectorTabs {
	background: transparent;
	font-size: 80%;
}

/* etkin olmayan sekmeler için boyutlandırma ve yazı tipi stilleri */
div#mw-head div.vectorMenu h3 span,
div#mw-head div.vectorTabs span a {
	font-weight: bold;
	text-transform: uppercase;
	color: #af6de8;
	height: 1em;
	padding: 0;
	font-size: 100%;
}

/* vektör menüsü okları için yer bırak */
div#mw-head div.vectorMenu h3 span {
	padding-right: 16px;
	vertical-align: top;
}

div#mw-head div.vectorMenu h3 span:after {
	top: 0;
}

/* tırnakların arka planı için dolgu/boyutlandırma ve estetik stiller */
div#mw-head div.vectorMenu h3,
div#mw-head div.vectorTabs ul li span {
	background: #000;
	border-radius: 2px;
	padding: 0.5em;
	margin: 0 0.25em;
	height: 1em;
	line-height: 1;
	overflow: visible;
}

/* seçili sekme ve fareyle üzerine gelindiğinde açılan menüler için stiller */
div#mw-head div.vectorMenu:hover h3 span,
div#mw-navigation div.vectorMenu div.menu li a,
div#pageWrapper div#mw-navigation li.selected a {
	color: #fff;
}

div#mw-head div.vectorMenu:hover h3,
div#mw-head div.vectorTabs ul li.selected span,
div.vectorMenu div.menu {
	background: #777;
}

/* fareyle üzerine gelindiğinde açılır menünün altındaki kenarlık yarıçapını temizle */
div#mw-head div.vectorMenu:hover h3 {
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}

/* Özel stillerin gösterilmesine izin vermek için açılır menünün çeşitli bölümlerindeki arka planları sıfırlayın */
div.vectorMenu:hover ul,
div.vectorTabs ul,
div.vectorTabs ul li,
div.vectorTabs ul li.selected {
	background: transparent;
}

/* açılır menüyü sekmelerin alt kısmıyla doğru hizalanacak şekilde konumlandırın */
div.vectorMenu div.menu {
	top: 2em;
	border: 0;
	padding: 0.25em;
}

/* açılır menüdeki bağlantıları temizle */
div#mw-navigation div.vectorMenu div.menu li a {
	padding: 0.3em;
	font-size: 90%;
	display: block;
	height: auto;
	margin: auto;
}

/* sekmelere sığacak şekilde stil izleme düğmesi */
div#mw-head #p-views #ca-unwatch.icon a,
div#mw-head #p-views #ca-watch.icon a {
	background-size: 1.5em;
	height: 0;
	margin: -0.25em 0;
	padding-top: 1.5em;
	background-position: center center;
}

/**** ARAMA KUTUSU ****/
/* diğer sekmelerle eşleşmek için arama kutusunun çevresindeki boşluğu eşleştir */
#p-search {
	margin: 0 1.25em 0 0.25em;
}

#p-search form {
	margin: 0;
}

/* arama kutusu için boyutlandırma ve estetik stiller */
div#simpleSearch {
	background: #000;
	height: 2em;
	border: 0;
	margin: 0;
	padding-left: 0.5em;
}

/* arama girişi için boyutlandırma ve estetik stiller */
div#simpleSearch #searchInput {
	color: #fff;
	padding: 0.5em 0;
	height: 1em;
	box-sizing: content-box;
	text-overflow: ellipsis;
}

/* arama yer tutucu metni için stil */
div#simpleSearch #searchInput::placeholder {
	color: #ddd;
	opacity: 0.7;
	font-style: italic;
}

/**** ARAMA ÖNERİLERİ ****/
/* öneriler menüsünü arama kutusunun alt kısmıyla doğru hizalanacak şekilde konumlandırın */
.mediawiki .suggestions {
	margin-top: -2.5em;
}

/* özel stillerin gösterilmesine izin vermek için varsayılan arka plan renklerini sıfırla */
.mediawiki .suggestions a,
.mediawiki .suggestions-result {
	background: transparent;
}

/* öneriler kutusu için arka plan, kenarlık ve metin rengi */
.mediawiki .suggestions-results,
.mediawiki .suggestions-special {
	background: #000;
}

.mediawiki .suggestions-results,
.mediawiki .suggestions-special {
	border-color: #303030;
}

.suggestions a.mw-searchSuggest-link,
.suggestions a.mw-searchSuggest-link:active,
.suggestions a.mw-searchSuggest-link:focus,
.suggestions a.mw-searchSuggest-link:hover,
.suggestions-result,
.suggestions-special .special-label,
.suggestions-special .special-query {
	color: #fff;
}

/* vurgulu vurgulanan öneri için arka plan ve metin rengi */
.mediawiki .suggestions-result-current,
.mediawiki .suggestions-result-current .special-label,
.mediawiki .suggestions-result-current .special-query {
	background: #303030;
	color: #fff;
}

/* arama önerilerinde eşleşen karakterler için vurgu rengi */
.mediawiki .suggestions-result .highlight {
	color: #af6de8;
}

Sonuç[]

Vectortabs example.png

Advertisement