| ||||||||||||||||
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. |
|
div#mw-head-base
|
Kenar çubuğunun ve içeriğin üst konumunu etkileyen boş başlık öğesi. |
|
div#mw-head
|
Sayfa gezinme çubuğu için gerçek kapsayıcı. |
|
#left-navigation
|
İçerik ve tartışma sayfası için bağlantılar. |
|
#right-navigation
|
Sayfa işlemleri bağlantıları ve arama denetimleri için kapsayıcı. |
|
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. |
|
div.vectorTabs li
|
Tek sayfalık sekme bağlantısı için bir dış kapsayıcı. |
|
div.vectorTabs li.selected
|
Seçili tek sayfalık sekme bağlantısı için bir dış kapsayıcı. |
|
div.vectorTabs li span
|
Tek sayfalık sekme bağlantısı için iç kapsayıcı. |
|
div.vectorTabs li span a
|
Bir sayfa sekmesi bağlantısı. |
|
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ı. |
|
div.vectorMenu h3 span::after
|
Fareyle üzerine gelme menülerinde oku oluşturan öğe. |
|
div.vectorMenu div.menu
|
Fareyle üzerine gelindiğinde kullanılan menü (yalnızca okun üzerine geldiğinde görünen bölüm). |
|
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ı. |
|
.vectorTabs #ca-watch.icon a
|
İzleme düğmesi. |
|
.vectorTabs #ca-unwatch.icon a
|
İzlememe düğmesi. |
|
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. |
|
div#simpleSearch #searchInput
|
Arama kutusu. |
|
div#simpleSearch #searchInput::placeholder
|
Arama kutusunun içindeki yer tutucu metin ("Gamepedia Yardım Viki üzerinde ara"). |
|
#simpleSearch #searchButton
|
Büyüteç arama düğmesi. |
|
.suggestions
|
Arama önerileri açılır kutusu. |
|
.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ı. |
|
.mediawiki .suggestions-result
|
Her bir arama öneri öğesinin iç kabı. |
|
.mediawiki .suggestions-result-current
|
Vurgulanan tek arama öneri öğesi. |
|
.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ç[]
