MyBB Depo Forum
Windows 8 Stil ScrollBar - Baskı Önizleme

+- MyBB Depo Forum (https://mybbdepo.com)
+-- Forum: MyBB 1.6 Depo (https://mybbdepo.com/mybb-1-6-depo-forumu)
+--- Forum: MyBB 1.6 Modifikasyon & Eklenti Deposu (https://mybbdepo.com/mybb-1-6-modifikasyon-eklenti-deposu-forumu)
+---- Forum: Forum Görüntüleme (https://mybbdepo.com/forum-goruntuleme-forumu)
+---- Konu Başlığı: Windows 8 Stil ScrollBar (/windows-8-stil-scrollbar-konusu.html)

Sayfalar: 1 2

Windows 8 Stil ScrollBar - ßyßurak - 13-10-2013

Ekran Görüntüsü:
resim

Modifikasyonun Kurulumu:

1.Temalar&Şablonlar Kafası Karışmışag: Temalar Kafası Karışmışag: Global.css'ye Girip Aşağıdaki Kodları en Alta Ekleyin

Kod:
body {
    scrollbar-3dlight-color:#CDCDCD;
    scrollbar-arrow-color:#FFFFFF;
    scrollbar-base-color:#EFEFEF;
    scrollbar-darkshadow-color:#CDCDCD;
    scrollbar-face-color:#CDCDCD;
    scrollbar-highlight-color:#EFEFEF;
    scrollbar-shadow-color:#CDCDCD;
}
/* For Chrome or Safari */
/* Scrollbar background color */
::-webkit-scrollbar {
background-color: #fff;
padding:0;
border: 1px solid #ddd;
}
/* UP, DOWN, LEFT and RIGHT button styling */
::-webkit-scrollbar-button:hover {
background-color:#DBDBDB !important;
}
::-webkit-scrollbar-button:vertical:decrement {
background:url(images/up.png) no-repeat center;
}
::-webkit-scrollbar-button:vertical:increment {
background:url(images/down.png) no-repeat center;
}
::-webkit-scrollbar-button:horizontal:decrement {
background:url(images/left.png) no-repeat center;
}
::-webkit-scrollbar-button:horizontal:increment {
background:url(images/right.png) no-repeat center;
}
::-webkit-scrollbar-button:active:vertical:decrement {
background:url(images/up-active.png) no-repeat center #606060 !important;
}
::-webkit-scrollbar-button:active:vertical:increment {
background:url(images/down-active.png) no-repeat center #606060 !important;
}
::-webkit-scrollbar-button:active:horizontal:decrement {
background:url(images/left-active.png) no-repeat center #606060 !important;
}
::-webkit-scrollbar-button:active:horizontal:increment {
background:url(images/right-active.png) no-repeat center #606060 !important;
}
/* Scrollbar thumb */
::-webkit-scrollbar-thumb {
background: #0e87c6; //* ScroolBar Rengi */
background: -moz-linear-gradient(top, #0e87c6 0%, #0c67a5 100%); //* ScroolBar Rengi */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0e87c6), color-stop(100%,#0c67a5)); /* ScroolBar Rengi */
background: -webkit-linear-gradient(top, #0e87c6 0%,#0c67a5 100%); /* ScroolBar Rengi */
background: -o-linear-gradient(top, #0e87c6 0%,#0c67a5 100%); /* ScroolBar Rengi */
background: -ms-linear-gradient(top, #0e87c6 0%,#0c67a5 100%); /* ScroolBar Rengi */
background: linear-gradient(to bottom, #0e87c6 0%,#0c67a5 100%); /* ScroolBar Rengi */

}
::-webkit-scrollbar-thumb:hover {
background-color: #6db129; /* ScroolBar Üstüne Gelince Çıkacak Renk */
background: linear-gradient(to bottom, #6db129 0%,#6db129 100%); /* ScroolBar Üstüne Gelince Çıkacak Renk */

}
::-webkit-scrollbar-thumb:active {
background-color: #3b3b3b; /* ScroolBar Üstüne Basınca Çıkacak Renk */
background: linear-gradient(to bottom, #3b3b3b; 0%,#3b3b3b; 100%); /* ScroolBar Üstüne Basınca Çıkacak Renk */
}
/* Some unstyled stuff */
::-webkit-scrollbar-track {

}
::-webkit-scrollbar-track-piece {

}

::-webkit-scrollbar-corner {

}
::-webkit-resizer {

}

2. Ekdeki Dosyayı İndirip FTTP'nin Ana Dizinine (www v.b.) Atın

indir-download

[attachment=1158]

Alıntı Alıntı: MybbTurko.com

Cvp: Windows 8 Stil ScrollBar - NmDahmeT - 13-10-2013

css Kodları hatalı şu şekilde girin. Ama önce resimleri ftpye atın ve şu kodları ekleyin css 'nin en altına.

Kod:
body {
    scrollbar-3dlight-color:#CDCDCD;
    scrollbar-arrow-color:#FFFFFF;
    scrollbar-base-color:#EFEFEF;
    scrollbar-darkshadow-color:#CDCDCD;
    scrollbar-face-color:#CDCDCD;
    scrollbar-highlight-color:#EFEFEF;
    scrollbar-shadow-color:#CDCDCD;
}
/* For Chrome or Safari */
/* Scrollbar background color */
::-webkit-scrollbar {
background-color: #fff;
padding:0;
border: 1px solid #ddd;
}
/* UP, DOWN, LEFT and RIGHT button styling */
::-webkit-scrollbar-button:hover {
background-color:#DBDBDB !important;
}
::-webkit-scrollbar-button:vertical:decrement {
background:url(images/up.png) no-repeat center;
}
::-webkit-scrollbar-button:vertical:increment {
background:url(images/down.png) no-repeat center;
}
::-webkit-scrollbar-button:horizontal:decrement {
background:url(images/left.png) no-repeat center;
}
::-webkit-scrollbar-button:horizontal:increment {
background:url(images/right.png) no-repeat center;
}
::-webkit-scrollbar-button:active:vertical:decrement {
background:url(images/up-active.png) no-repeat center #606060 !important;
}
::-webkit-scrollbar-button:active:vertical:increment {
background:url(images/down-active.png) no-repeat center #606060 !important;
}
::-webkit-scrollbar-button:active:horizontal:decrement {
background:url(images/left-active.png) no-repeat center #606060 !important;
}
::-webkit-scrollbar-button:active:horizontal:increment {
background:url(images/right-active.png) no-repeat center #606060 !important;
}
/* Scrollbar thumb */
::-webkit-scrollbar-thumb {
background: #0e87c6; //* ScroolBar Rengi */
background: -moz-linear-gradient(top, #0e87c6 0%, #0c67a5 100%); //* ScroolBar Rengi */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0e87c6), color-stop(100%,#0c67a5)); /* ScroolBar Rengi */
background: -webkit-linear-gradient(top, #0e87c6 0%,#0c67a5 100%); /* ScroolBar Rengi */
background: -o-linear-gradient(top, #0e87c6 0%,#0c67a5 100%); /* ScroolBar Rengi */
background: -ms-linear-gradient(top, #0e87c6 0%,#0c67a5 100%); /* ScroolBar Rengi */
background: linear-gradient(to bottom, #0e87c6 0%,#0c67a5 100%); /* ScroolBar Rengi */

}
::-webkit-scrollbar-thumb:hover {
background-color: #6db129; /* ScroolBar Üstüne Gelince Çıkacak Renk */
background: linear-gradient(to bottom, #6db129 0%,#6db129 100%); /* ScroolBar Üstüne Gelince Çıkacak Renk */

}
::-webkit-scrollbar-thumb:active {
background-color: #3b3b3b; /* ScroolBar Üstüne Basınca Çıkacak Renk */
background: linear-gradient(to bottom, #3b3b3b; 0%,#3b3b3b; 100%); /* ScroolBar Üstüne Basınca Çıkacak Renk */
}
/* Some unstyled stuff */
::-webkit-scrollbar-track {

}
::-webkit-scrollbar-track-piece {

}

::-webkit-scrollbar-corner {

}
::-webkit-resizer {

}

Bu kodda ne değiştirdim ?

images/WMTR Falan diyor orada ama direk resimler images'e gidiyor.

images/ yaptım o kadar.

Cvp: Windows 8 Stil ScrollBar - Screwy - 13-10-2013

Tıkladığında scrollbar'a işlemiyor. Gülümseme
Burada da sıkıntı var... Yani kullanılıyor ama tıkladığında rengi değişmiyor... CSS de bir sıkıntı olmalı.

Cvp: Windows 8 Stil ScrollBar - Funny - 13-10-2013

Resul Hocamın Dediği Gibi İşlemiyor.Fakat Sitemde Kullanıyorum.Çok hoşuma gitti.Teşekkürler.

Cvp: Windows 8 Stil ScrollBar - ßyßurak - 13-10-2013

(13-10-2013, Saat:14:11)NmDahmeT Adlı Kullanıcıdan Alıntı: css Kodları hatalı şu şekilde girin. Ama önce resimleri ftpye atın ve şu kodları ekleyin css 'nin en altına.

Kod:
body {
    scrollbar-3dlight-color:#CDCDCD;
    scrollbar-arrow-color:#FFFFFF;
    scrollbar-base-color:#EFEFEF;
    scrollbar-darkshadow-color:#CDCDCD;
    scrollbar-face-color:#CDCDCD;
    scrollbar-highlight-color:#EFEFEF;
    scrollbar-shadow-color:#CDCDCD;
}
/* For Chrome or Safari */
/* Scrollbar background color */
::-webkit-scrollbar {
background-color: #fff;
padding:0;
border: 1px solid #ddd;
}
/* UP, DOWN, LEFT and RIGHT button styling */
::-webkit-scrollbar-button:hover {
background-color:#DBDBDB !important;
}
::-webkit-scrollbar-button:vertical:decrement {
background:url(images/up.png) no-repeat center;
}
::-webkit-scrollbar-button:vertical:increment {
background:url(images/down.png) no-repeat center;
}
::-webkit-scrollbar-button:horizontal:decrement {
background:url(images/left.png) no-repeat center;
}
::-webkit-scrollbar-button:horizontal:increment {
background:url(images/right.png) no-repeat center;
}
::-webkit-scrollbar-button:active:vertical:decrement {
background:url(images/up-active.png) no-repeat center #606060 !important;
}
::-webkit-scrollbar-button:active:vertical:increment {
background:url(images/down-active.png) no-repeat center #606060 !important;
}
::-webkit-scrollbar-button:active:horizontal:decrement {
background:url(images/left-active.png) no-repeat center #606060 !important;
}
::-webkit-scrollbar-button:active:horizontal:increment {
background:url(images/right-active.png) no-repeat center #606060 !important;
}
/* Scrollbar thumb */
::-webkit-scrollbar-thumb {
background: #0e87c6; //* ScroolBar Rengi */
background: -moz-linear-gradient(top, #0e87c6 0%, #0c67a5 100%); //* ScroolBar Rengi */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0e87c6), color-stop(100%,#0c67a5)); /* ScroolBar Rengi */
background: -webkit-linear-gradient(top, #0e87c6 0%,#0c67a5 100%); /* ScroolBar Rengi */
background: -o-linear-gradient(top, #0e87c6 0%,#0c67a5 100%); /* ScroolBar Rengi */
background: -ms-linear-gradient(top, #0e87c6 0%,#0c67a5 100%); /* ScroolBar Rengi */
background: linear-gradient(to bottom, #0e87c6 0%,#0c67a5 100%); /* ScroolBar Rengi */

}
::-webkit-scrollbar-thumb:hover {
background-color: #6db129; /* ScroolBar Üstüne Gelince Çıkacak Renk */
background: linear-gradient(to bottom, #6db129 0%,#6db129 100%); /* ScroolBar Üstüne Gelince Çıkacak Renk */

}
::-webkit-scrollbar-thumb:active {
background-color: #3b3b3b; /* ScroolBar Üstüne Basınca Çıkacak Renk */
background: linear-gradient(to bottom, #3b3b3b; 0%,#3b3b3b; 100%); /* ScroolBar Üstüne Basınca Çıkacak Renk */
}
/* Some unstyled stuff */
::-webkit-scrollbar-track {

}
::-webkit-scrollbar-track-piece {

}

::-webkit-scrollbar-corner {

}
::-webkit-resizer {

}

Bu kodda ne değiştirdim ?

images/WMTR Falan diyor orada ama direk resimler images'e gidiyor.

images/ yaptım o kadar.

Bilgi İçin Teşekkürler Konuda Düzenlenmiştir.

(13-10-2013, Saat:14:24)Screwy Adlı Kullanıcıdan Alıntı: Tıkladığında scrollbar'a işlemiyor. Gülümseme
Burada da sıkıntı var... Yani kullanılıyor ama tıkladığında rengi değişmiyor... CSS de bir sıkıntı olmalı.

Hangisi İşlemiyor Hover'mi(üstüne gelince Açık Ağızlı Gülümseme) yoksa Active'mi (tıklayınca Açık Ağızlı Gülümseme)

Cvp: Windows 8 Stil ScrollBar - SvMedeT - 13-10-2013

(13-10-2013, Saat:14:11)NmDahmeT Adlı Kullanıcıdan Alıntı: css Kodları hatalı şu şekilde girin. Ama önce resimleri ftpye atın ve şu kodları ekleyin css 'nin en altına.

Kod:
body {
    scrollbar-3dlight-color:#CDCDCD;
    scrollbar-arrow-color:#FFFFFF;
    scrollbar-base-color:#EFEFEF;
    scrollbar-darkshadow-color:#CDCDCD;
    scrollbar-face-color:#CDCDCD;
    scrollbar-highlight-color:#EFEFEF;
    scrollbar-shadow-color:#CDCDCD;
}
/* For Chrome or Safari */
/* Scrollbar background color */
::-webkit-scrollbar {
background-color: #fff;
padding:0;
border: 1px solid #ddd;
}
/* UP, DOWN, LEFT and RIGHT button styling */
::-webkit-scrollbar-button:hover {
background-color:#DBDBDB !important;
}
::-webkit-scrollbar-button:vertical:decrement {
background:url(images/up.png) no-repeat center;
}
::-webkit-scrollbar-button:vertical:increment {
background:url(images/down.png) no-repeat center;
}
::-webkit-scrollbar-button:horizontal:decrement {
background:url(images/left.png) no-repeat center;
}
::-webkit-scrollbar-button:horizontal:increment {
background:url(images/right.png) no-repeat center;
}
::-webkit-scrollbar-button:active:vertical:decrement {
background:url(images/up-active.png) no-repeat center #606060 !important;
}
::-webkit-scrollbar-button:active:vertical:increment {
background:url(images/down-active.png) no-repeat center #606060 !important;
}
::-webkit-scrollbar-button:active:horizontal:decrement {
background:url(images/left-active.png) no-repeat center #606060 !important;
}
::-webkit-scrollbar-button:active:horizontal:increment {
background:url(images/right-active.png) no-repeat center #606060 !important;
}
/* Scrollbar thumb */
::-webkit-scrollbar-thumb {
background: #0e87c6; //* ScroolBar Rengi */
background: -moz-linear-gradient(top, #0e87c6 0%, #0c67a5 100%); //* ScroolBar Rengi */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0e87c6), color-stop(100%,#0c67a5)); /* ScroolBar Rengi */
background: -webkit-linear-gradient(top, #0e87c6 0%,#0c67a5 100%); /* ScroolBar Rengi */
background: -o-linear-gradient(top, #0e87c6 0%,#0c67a5 100%); /* ScroolBar Rengi */
background: -ms-linear-gradient(top, #0e87c6 0%,#0c67a5 100%); /* ScroolBar Rengi */
background: linear-gradient(to bottom, #0e87c6 0%,#0c67a5 100%); /* ScroolBar Rengi */

}
::-webkit-scrollbar-thumb:hover {
background-color: #6db129; /* ScroolBar Üstüne Gelince Çıkacak Renk */
background: linear-gradient(to bottom, #6db129 0%,#6db129 100%); /* ScroolBar Üstüne Gelince Çıkacak Renk */

}
::-webkit-scrollbar-thumb:active {
background-color: #3b3b3b; /* ScroolBar Üstüne Basınca Çıkacak Renk */
background: linear-gradient(to bottom, #3b3b3b; 0%,#3b3b3b; 100%); /* ScroolBar Üstüne Basınca Çıkacak Renk */
}
/* Some unstyled stuff */
::-webkit-scrollbar-track {

}
::-webkit-scrollbar-track-piece {

}

::-webkit-scrollbar-corner {

}
::-webkit-resizer {

}

Bu kodda ne değiştirdim ?

images/WMTR Falan diyor orada ama direk resimler images'e gidiyor.

images/ yaptım o kadar.

WMTR benim önceki sitelerimden biriydi. Hatta alıntı yapılan sitede benim yaptığım temanın mybb'ye uyarlanmış hali. Görünce eski günler aklıma geldi Açık Ağızlı Gülümseme

Cvp: Windows 8 Stil ScrollBar - Screwy - 13-10-2013

(13-10-2013, Saat:15:27)ßyßurak Adlı Kullanıcıdan Alıntı: Hangisi İşlemiyor Hover'mi(üstüne gelince Açık Ağızlı Gülümseme) yoksa Active'mi (tıklayınca Açık Ağızlı Gülümseme)

Tıklayınca diyorum burak illa active mi diyeyim Açık Ağızlı Gülümseme Açık Ağızlı Gülümseme

Cvp: Windows 8 Stil ScrollBar - ßyßurak - 13-10-2013

(13-10-2013, Saat:15:27)SvMedeT Adlı Kullanıcıdan Alıntı:
(13-10-2013, Saat:14:11)NmDahmeT Adlı Kullanıcıdan Alıntı: css Kodları hatalı şu şekilde girin. Ama önce resimleri ftpye atın ve şu kodları ekleyin css 'nin en altına.

Kod:
body {
    scrollbar-3dlight-color:#CDCDCD;
    scrollbar-arrow-color:#FFFFFF;
    scrollbar-base-color:#EFEFEF;
    scrollbar-darkshadow-color:#CDCDCD;
    scrollbar-face-color:#CDCDCD;
    scrollbar-highlight-color:#EFEFEF;
    scrollbar-shadow-color:#CDCDCD;
}
/* For Chrome or Safari */
/* Scrollbar background color */
::-webkit-scrollbar {
background-color: #fff;
padding:0;
border: 1px solid #ddd;
}
/* UP, DOWN, LEFT and RIGHT button styling */
::-webkit-scrollbar-button:hover {
background-color:#DBDBDB !important;
}
::-webkit-scrollbar-button:vertical:decrement {
background:url(images/up.png) no-repeat center;
}
::-webkit-scrollbar-button:vertical:increment {
background:url(images/down.png) no-repeat center;
}
::-webkit-scrollbar-button:horizontal:decrement {
background:url(images/left.png) no-repeat center;
}
::-webkit-scrollbar-button:horizontal:increment {
background:url(images/right.png) no-repeat center;
}
::-webkit-scrollbar-button:active:vertical:decrement {
background:url(images/up-active.png) no-repeat center #606060 !important;
}
::-webkit-scrollbar-button:active:vertical:increment {
background:url(images/down-active.png) no-repeat center #606060 !important;
}
::-webkit-scrollbar-button:active:horizontal:decrement {
background:url(images/left-active.png) no-repeat center #606060 !important;
}
::-webkit-scrollbar-button:active:horizontal:increment {
background:url(images/right-active.png) no-repeat center #606060 !important;
}
/* Scrollbar thumb */
::-webkit-scrollbar-thumb {
background: #0e87c6; //* ScroolBar Rengi */
background: -moz-linear-gradient(top, #0e87c6 0%, #0c67a5 100%); //* ScroolBar Rengi */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0e87c6), color-stop(100%,#0c67a5)); /* ScroolBar Rengi */
background: -webkit-linear-gradient(top, #0e87c6 0%,#0c67a5 100%); /* ScroolBar Rengi */
background: -o-linear-gradient(top, #0e87c6 0%,#0c67a5 100%); /* ScroolBar Rengi */
background: -ms-linear-gradient(top, #0e87c6 0%,#0c67a5 100%); /* ScroolBar Rengi */
background: linear-gradient(to bottom, #0e87c6 0%,#0c67a5 100%); /* ScroolBar Rengi */

}
::-webkit-scrollbar-thumb:hover {
background-color: #6db129; /* ScroolBar Üstüne Gelince Çıkacak Renk */
background: linear-gradient(to bottom, #6db129 0%,#6db129 100%); /* ScroolBar Üstüne Gelince Çıkacak Renk */

}
::-webkit-scrollbar-thumb:active {
background-color: #3b3b3b; /* ScroolBar Üstüne Basınca Çıkacak Renk */
background: linear-gradient(to bottom, #3b3b3b; 0%,#3b3b3b; 100%); /* ScroolBar Üstüne Basınca Çıkacak Renk */
}
/* Some unstyled stuff */
::-webkit-scrollbar-track {

}
::-webkit-scrollbar-track-piece {

}

::-webkit-scrollbar-corner {

}
::-webkit-resizer {

}

Bu kodda ne değiştirdim ?

images/WMTR Falan diyor orada ama direk resimler images'e gidiyor.

images/ yaptım o kadar.

WMTR benim önceki sitelerimden biriydi. Hatta alıntı yapılan sitede benim yaptığım temanın mybb'ye uyarlanmış hali. Görünce eski günler aklıma geldi Açık Ağızlı Gülümseme

Açık Ağızlı Gülümseme Bende ScrollBarı o Tema Üzerinde Kullandım Saten Kodları Ordan Alıp Direk Buraya Yapıştırınca küçük bir hata Olmuş...


(13-10-2013, Saat:15:28)Screwy Adlı Kullanıcıdan Alıntı:
(13-10-2013, Saat:15:27)ßyßurak Adlı Kullanıcıdan Alıntı: Hangisi İşlemiyor Hover'mi(üstüne gelince Açık Ağızlı Gülümseme) yoksa Active'mi (tıklayınca Açık Ağızlı Gülümseme)

Tıklayınca diyorum burak illa active mi diyeyim Açık Ağızlı Gülümseme Açık Ağızlı Gülümseme

bütün kodlarda "background: linear-gradient(to bottom, #3b3b3b; 0%,#3b3b3b; 100%); " buna benzer olan kodları sil düzelir ama biraz kötü gözükür :d illa üstüne basınca rengi değişsin diyorsan yap bunu Açık Ağızlı Gülümseme