PDA

Orijinalini görmek için tıklayınız : Temanızda Scrollbarin Rengini Değiştirmek ve Oval Yapmak..

Leydihan
21 Ocak 2025, 21:26
[Only Registered Users Can See Links]


Merhabalar,
Temanızda bulunan sayfayı aşağı ve yukarı hareket ettirmek için scroolbarı temanıza göre rengini değiştirebilir, ovallik verebilirsiniz..



[Only Registered Users Can See Links]

Öncelikle değiştirmek istediğimiz temanın genel ayarlarına gelip temanın alt kısmında bulunan İlave CSS-yazılımında bulunan en alta aşağıdaki kodları ekliyoruz.


::-webkit-scrollbar {
width: 10px; /*genislik 10px olsun*/
background-color: #eaeaea; /*scrollbar arkaplan renk*/
border-left: 1px solid #f1f1f1; /*arkaplan sol tarafa cizgi cek*/
}
::-webkit-scrollbar-thumb {
background-color: #a0a0a0; /*scrollbar renk*/
border-radius:15px /*oval olsun*/
}
::-webkit-scrollbar-thumb:hover { /*tiklandiginda*/
background-color: #7d7d7d;
}

Ben rengini temaya uygun olsun diye mavi yaptım..

::-webkit-scrollbar-thumb {
background-color: #a0a0a0;


background-color: #a0a0a0; Olan yeri açık mavi

::-webkit-scrollbar-thumb:hover { /*tiklandiginda*/
background-color: #7d7d7d;

background-color: #7d7d7d; olan yeri de bir ton koyu mavi yaptım..

::-webkit-scrollbar {
width: 10px; /*genislik 10px olsun*/
background-color: #eaeaea; /*scrollbar arkaplan renk*/
border-left: 1px solid #f1f1f1; /*arkaplan sol tarafa cizgi cek*/
}
::-webkit-scrollbar-thumb {
background-color: #8a96f4; /*scrollbar renk*/
border-radius:15px /*oval olsun*/
}
::-webkit-scrollbar-thumb:hover { /*tiklandiginda*/
background-color: #3f54ef;
}

Kodlarım böyle.. Siz isterseniz bu alanları temanızda bulunan renk kodlarına göre değiştirebilirsiniz.
Asrevya
21 Ocak 2025, 22:30
Çok güzel olmuş, emeklerinize sağlık.[Only Registered Users Can See Links]
Ben de deniyorum.:)
Elif
21 Ocak 2025, 23:49
Emeğine sağlık OkyanusunKalbi güzel olmuş
Asrevya
23 Ocak 2025, 20:32
Nihayet yapabildim.:)
İlave CSS-yazılımı alanına eklemiştim, ama olmamıştı.
Bu kodları ayrıca header <style>... </style> Tag´larının arasına da ekleyince gösterdi. Bundan sonra sık sık değiştiririm.
Estetik güzelliği paylaştım sayenizde. Teşekkür ederim OkyanusunKalbi.[Only Registered Users Can See Links]
Leydihan
23 Ocak 2025, 20:39
Nihayet yapabildim.:)
İlave CSS-yazılımı alanına eklemiştim, ama olmamıştı.
Bu kodları ayrıca header <style>... </style> Tag´larının arasına da ekleyince gösterdi. Bundan sonra sık sık değiştiririm.
Estetik güzelliği paylaştım sayenizde. Teşekkür ederim OkyanusunKalbi.[Only Registered Users Can See Links]

Sevindim yapmışsınız hocam. Elinize sağlık. Asıl ben teşekkür ederim. Sayenizde ben de düzenlemiş oldum. :)
Asrevya
23 Ocak 2025, 20:44
Sevindim yapmışsınız hocam. Elinize sağlık. Asıl ben teşekkür ederim. Sayenizde ben de düzenlemiş oldum. :)

Buraya çok yakıştı, çok şık oldu. [Only Registered Users Can See Links] arada bu kodlar edge ve chrome'da işe yarıyor. Firefoxta göstermiyor.
Güle güle kullanalım inşallah.:)
Leydihan
23 Ocak 2025, 20:57
Buraya çok yakıştı, çok şık oldu. [Only Registered Users Can See Links]
Bu arada bu kodlar edge ve chorme'da işe yarıyor. Firefoxta göstermiyor.
Güle güle kullanalım inşallah.:)

Evet chrome tabanlı tüm tarayıcılar da işe yarar ancak mozilla'ya bazı kodlar uyumlu değil maalesef..