Scrollbar albo Scrollbox to po prostu pasek przewijania. Dokładnie taki sam, jaki widzisz w każdej przeglądarce internetowej po prawej stronie. Niby nic nadzwyczajnego, a mimo wszystko wiele osób ma problem z jego stworzeniem, kiedy zachodzi potrzeba wykorzystania go w jakimkolwiek module, w motywach Elegant Themes. Dzisiaj pokażę Wam, jak dodać taki pasek przewijania w module obraz, oraz w module tekst, oraz jak o go trochę podreperować, żeby wyglądał bardziej nowocześnie i estetycznie.

Dodanie paska przewijania do modułu obraz

W zależności od tego czy będziesz chciał stworzyć pasek przewijania dla obrazu czy dla tekstu Twój kod CSS będzie się nieznacznie różnił. Ale widząc jego budowę z łatwością wykorzystasz go w innych modułach, kiedy tylko będziesz chciał dodać pasek przewijania.

Ustawienia:

  • Dodaj standardową sekcję.
  • Dodaj  wiersz zawierający dwie kolumny o tej samej szerokości.
  • Dodaj moduł obraz.
  • W wybranym module obraz, na zakładce Zaawansowane dodaj dowolną Klasę CSS (moja klasa to cq_scroll_img).

Dodany kod sprawi, że utworzysz scrollbar. Będzie on wyglądał dokładnie tak jak ten na obrazie po lewej stronie. Operując wartościami height i width możesz zwiększać lub zmniejszać szerokość i wysokość. Poniższy kod CSS Kod wklej w ustawieniach strony, w polu Niestandardowy CSS lub w Opcjach szablonów graficznych w polu Niestandardowy CSS:

[css]
.cq_scroll_img .et_pb_image_wrap {
float: left;
height: 400px;
width: 500px;
overflow-y: scroll;
}
[/css]

Dodanie paska przewijania do modułu tekst

Ustawienia i kod CSS potrzebny do utworzenia paska przewijania dla tekstu będzie bardzo podobny jak ten, który zastosowaliśmy powyżej, dla modułu obraz.

Ustawienia:

  • Dodaj standardową sekcję.
  • Dodaj  wiersz zawierający dwie kolumny o tej samej szerokości.
  • Dodaj moduł tekst.
  • W wybranym module tekst, na zakładce Zaawansowane dodaj dowolną Klasę CSS (moja klasa to cq_scroll_txt).

Lorem ipsum dolor sit amet metus. Curabitur feugiat pede. Fusce interdum. Proin ornare a, urna. Nunc mollis, purus lorem, pretium wisi. Morbi augue sit amet, sollicitudin fringilla. Phasellus hendrerit purus. Sed porta sapien magna ornare a, lacinia scelerisque, diam. In metus. Maecenas nec dui. Pellentesque fringilla sed, vestibulum ligula. Vivamus tincidunt tellus. Maecenas arcu congue risus. Sed gravida at, metus. Maecenas vitae ante. Duis blandit id, adipiscing dui dolor, porttitor odio. Donec libero nec adipiscing quam eget tortor. Etiam commodo pulvinar vitae, dolor. Aliquam nulla. Curabitur est ultrices posuere eget, orci. Suspendisse sollicitudin. Fusce porttitor, lacus vestibulum faucibus quis, accumsan vitae, lorem. Cras vitae arcu faucibus lorem. In lacinia dignissim. Etiam dapibus vitae, imperdiet id, wisi. Mauris ut felis. Nam diam. Aliquam fringilla, justo non purus. Praesent est eu sodales dui sodales pretium eu, ligula. Sed tristique eget, congue eu, faucibus et, felis. Maecenas sapien eget dolor sed ipsum primis in lacus magna, at nulla. Suspendisse in dolor in massa sit amet, massa. Vestibulum dolor sit amet nibh. Quisque iaculis, dui vitae pede convallis libero. Maecenas id lorem. Mauris auctor.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque habitant morbi tristique senectus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dictum vel, viverra vel, adipiscing elit. Mauris leo. Suspendisse potenti. Morbi egestas, dui tellus, volutpat quam risus, commodo pede convallis consequat. Integer at urna eget sem ipsum, tempor interdum viverra. Proin justo. Vestibulum non arcu. Suspendisse eu dui ornare nisl, a purus fringilla massa metus feugiat ac, vulputate tempus arcu. Nam pellentesque vel, sapien. Fusce vitae erat lacus, faucibus volutpat, libero laoreet iaculis leo. Donec accumsan et, felis. Pellentesque mattis id, semper facilisis faucibus gravida ullamcorper tellus tristique pede. Fusce tempor nisl urna tortor, pretium felis non nunc. Nulla cursus consequat, orci ipsum, ultricies a, hendrerit feugiat sit amet mauris. Donec tortor. Sed placerat id, imperdiet neque. Pellentesque habitant morbi tristique bibendum, urna fringilla vel, eros. Suspendisse ac erat. Aliquam interdum viverra. Ut eget enim. Phasellus pulvinar ut, nunc. Vivamus est. Quisque urna. Aenean tincidunt est sem, lobortis quis, vestibulum vel, orci. In nec nibh vel laoreet venenatis augue sed enim. Sed placerat. Duis.

Vivamus nibh eu ligula tempor pede turpis metus sed justo. Praesent ac lacus. Nunc id diam eu magna lorem eu ligula tempor lorem. Pellentesque eget metus. Nulla vitae velit tristique congue. Proin non purus. Class aptent taciti sociosqu ad litora torquent per inceptos hymenaeos. Sed faucibus, quam. Pellentesque tincidunt scelerisque. Duis a nunc. Etiam at eros. Fusce tempor magna urna felis, vestibulum nec, imperdiet faucibus, justo at orci pellentesque adipiscing elit. Lorem ipsum pharetra elementum. Aenean nonummy condimentum tempor, dolor in nonummy tempus arcu. Cras nonummy consequat. Cum sociis natoque penatibus et ultrices condimentum enim sapien faucibus et, nonummy diam justo, condimentum interdum faucibus, tortor augue, rhoncus tempor. Quisque placerat fringilla, massa. Proin non dui. Aenean aliquet. Praesent quis libero. In metus nisl, blandit sem urna mauris, rutrum laoreet. Nam sed orci viverra ligula. Lorem ipsum dolor eu ligula quis enim. Phasellus facilisis nisl urna vitae libero malesuada aliquet, diam a nulla. Mauris viverra luctus, purus et ultrices posuere laoreet, purus et tortor. Proin adipiscing elit. Donec accumsan quam, lobortis volutpat. Nam sit amet, consectetuer adipiscing sed, dapibus dui, porta.

Nunc justo vulputate lectus. Ut eget lacus magna, scelerisque lorem nec adipiscing justo nibh, mollis tincidunt, risus tortor, pretium eu, luctus elit, sit amet interdum ligula turpis, et tortor. Morbi eget sem in vestibulum lectus rhoncus purus, consectetuer adipiscing elit. Proin dui lectus, eu urna quam, dictum accumsan. In justo quis turpis. Duis luctus. Sed lobortis semper. Sed sagittis lectus est et purus et interdum wisi ultricies vehicula, dui a leo ultrices urna, id nonummy commodo pulvinar vitae, dapibus imperdiet nunc, fringilla enim, id nulla sem condimentum nunc. Phasellus consequat. Aliquam orci. Cum sociis natoque penatibus et lacus nibh, imperdiet faucibus, nulla eu nulla sit amet ligula. Suspendisse eu lectus rhoncus vel, luctus diam. Nam tempor varius, scelerisque eu, ligula. Sed eu lorem sit amet eleifend vel, ipsum. Suspendisse sed leo. Cras consectetuer adipiscing vitae, dictum quis, auctor non, vehicula erat. Vestibulum vestibulum, dolor sit amet magna. Sed vel tortor. Quisque rutrum, lorem eget arcu erat volutpat. Nam dictum accumsan augue pulvinar semper quis, pellentesque facilisis. Fusce mollis, purus convallis turpis. Duis gravida, erat volutpat. Nullam sed laoreet risus. Vivamus.

Do kodu zostały dodane dwie nowe wartości: Backround – czyli tło dla tekstu, oraz Padding, czyli wewnętrzny margines. Wszystkie wartości w kodzie możesz ustawić dowolnie. Poniższy kod CSS wklej w ustawieniach strony, w polu Niestandardowy CSS lub w Opcjach szablonów graficznych w polu Niestandardowy CSS:

[css]

.cq_scroll_txt .et_pb_text_inner {
float: left;
height: 400px;
width: 400px;
background: #ffffff;
overflow-y: scroll;
padding: 15px;
}
[/css]

Zmiana wylądu paska przewijania

Poniższym kodem zmienimy wygląd paska przewijania dla modułu tekst, żeby był nieco bardziej przyjazny dla oka, bardziej estetyczny i nowoczesny. Na pewno lepiej wpasuje się we współczesne strony, niż ten klasyczny 😉

[css]

/*Dodanie cienia wewnatrz paska przewijania*/
.cq_scroll_img.et_pb_image_wrap::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.1);
background-color: #fbfbfb;
}
/*Ustawienie szerokości suwaka i koloru paska przewijania*/
.cq_scroll_img .et_pb_image_wrap::-webkit-scrollbar
{
width: 6px;
background-color: #dbdbdb;
}
/*Ustawienie koloru suwaka*/
.cq_scroll_img .et_pb_image_wrap::-webkit-scrollbar-thumb
{
background-color: #3cadad;
}

[/css]

W podobny sposób zmienimy wygląd paska przewijania dla modułu tekst.

Lorem ipsum dolor sit amet metus. Curabitur feugiat pede. Fusce interdum. Proin ornare a, urna. Nunc mollis, purus lorem, pretium wisi. Morbi augue sit amet, sollicitudin fringilla. Phasellus hendrerit purus. Sed porta sapien magna ornare a, lacinia scelerisque, diam. In metus. Maecenas nec dui. Pellentesque fringilla sed, vestibulum ligula. Vivamus tincidunt tellus. Maecenas arcu congue risus. Sed gravida at, metus. Maecenas vitae ante. Duis blandit id, adipiscing dui dolor, porttitor odio. Donec libero nec adipiscing quam eget tortor. Etiam commodo pulvinar vitae, dolor. Aliquam nulla. Curabitur est ultrices posuere eget, orci. Suspendisse sollicitudin. Fusce porttitor, lacus vestibulum faucibus quis, accumsan vitae, lorem. Cras vitae arcu faucibus lorem. In lacinia dignissim. Etiam dapibus vitae, imperdiet id, wisi. Mauris ut felis. Nam diam. Aliquam fringilla, justo non purus. Praesent est eu sodales dui sodales pretium eu, ligula. Sed tristique eget, congue eu, faucibus et, felis. Maecenas sapien eget dolor sed ipsum primis in lacus magna, at nulla. Suspendisse in dolor in massa sit amet, massa. Vestibulum dolor sit amet nibh. Quisque iaculis, dui vitae pede convallis libero. Maecenas id lorem. Mauris auctor.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque habitant morbi tristique senectus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dictum vel, viverra vel, adipiscing elit. Mauris leo. Suspendisse potenti. Morbi egestas, dui tellus, volutpat quam risus, commodo pede convallis consequat. Integer at urna eget sem ipsum, tempor interdum viverra. Proin justo. Vestibulum non arcu. Suspendisse eu dui ornare nisl, a purus fringilla massa metus feugiat ac, vulputate tempus arcu. Nam pellentesque vel, sapien. Fusce vitae erat lacus, faucibus volutpat, libero laoreet iaculis leo. Donec accumsan et, felis. Pellentesque mattis id, semper facilisis faucibus gravida ullamcorper tellus tristique pede. Fusce tempor nisl urna tortor, pretium felis non nunc. Nulla cursus consequat, orci ipsum, ultricies a, hendrerit feugiat sit amet mauris. Donec tortor. Sed placerat id, imperdiet neque. Pellentesque habitant morbi tristique bibendum, urna fringilla vel, eros. Suspendisse ac erat. Aliquam interdum viverra. Ut eget enim. Phasellus pulvinar ut, nunc. Vivamus est. Quisque urna. Aenean tincidunt est sem, lobortis quis, vestibulum vel, orci. In nec nibh vel laoreet venenatis augue sed enim. Sed placerat. Duis.

Vivamus nibh eu ligula tempor pede turpis metus sed justo. Praesent ac lacus. Nunc id diam eu magna lorem eu ligula tempor lorem. Pellentesque eget metus. Nulla vitae velit tristique congue. Proin non purus. Class aptent taciti sociosqu ad litora torquent per inceptos hymenaeos. Sed faucibus, quam. Pellentesque tincidunt scelerisque. Duis a nunc. Etiam at eros. Fusce tempor magna urna felis, vestibulum nec, imperdiet faucibus, justo at orci pellentesque adipiscing elit. Lorem ipsum pharetra elementum. Aenean nonummy condimentum tempor, dolor in nonummy tempus arcu. Cras nonummy consequat. Cum sociis natoque penatibus et ultrices condimentum enim sapien faucibus et, nonummy diam justo, condimentum interdum faucibus, tortor augue, rhoncus tempor. Quisque placerat fringilla, massa. Proin non dui. Aenean aliquet. Praesent quis libero. In metus nisl, blandit sem urna mauris, rutrum laoreet. Nam sed orci viverra ligula. Lorem ipsum dolor eu ligula quis enim. Phasellus facilisis nisl urna vitae libero malesuada aliquet, diam a nulla. Mauris viverra luctus, purus et ultrices posuere laoreet, purus et tortor. Proin adipiscing elit. Donec accumsan quam, lobortis volutpat. Nam sit amet, consectetuer adipiscing sed, dapibus dui, porta.

Nunc justo vulputate lectus. Ut eget lacus magna, scelerisque lorem nec adipiscing justo nibh, mollis tincidunt, risus tortor, pretium eu, luctus elit, sit amet interdum ligula turpis, et tortor. Morbi eget sem in vestibulum lectus rhoncus purus, consectetuer adipiscing elit. Proin dui lectus, eu urna quam, dictum accumsan. In justo quis turpis. Duis luctus. Sed lobortis semper. Sed sagittis lectus est et purus et interdum wisi ultricies vehicula, dui a leo ultrices urna, id nonummy commodo pulvinar vitae, dapibus imperdiet nunc, fringilla enim, id nulla sem condimentum nunc. Phasellus consequat. Aliquam orci. Cum sociis natoque penatibus et lacus nibh, imperdiet faucibus, nulla eu nulla sit amet ligula. Suspendisse eu lectus rhoncus vel, luctus diam. Nam tempor varius, scelerisque eu, ligula. Sed eu lorem sit amet eleifend vel, ipsum. Suspendisse sed leo. Cras consectetuer adipiscing vitae, dictum quis, auctor non, vehicula erat. Vestibulum vestibulum, dolor sit amet magna. Sed vel tortor. Quisque rutrum, lorem eget arcu erat volutpat. Nam dictum accumsan augue pulvinar semper quis, pellentesque facilisis. Fusce mollis, purus convallis turpis. Duis gravida, erat volutpat. Nullam sed laoreet risus. Vivamus.

[css]

/*Dodanie cienia wewnatrz paska przewijania*/
.cq_scroll_txt .et_pb_text_inner::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.1);
background-color: #fbfbfb;
}
/*Ustawienie szerokości suwaka i koloru paska przewijania*/
.cq_scroll_txt .et_pb_text_inner::-webkit-scrollbar
{
width: 6px;
background-color: #dbdbdb;
}
/*Ustawienie koloru suwaka*/
.cq_scroll_txt .et_pb_text_inner::-webkit-scrollbar-thumb
{
background-color: #3cadad;
}

[/css]

I to właściwie wszystko. Kodów CSS trochę jest, ale bardzo łatwo je dodać i nie trzeba w nich wiele modyfikować. Dodany scrollbar działa poprawnie również na urządzenia mobilnych, więc śmiało możesz z niego skorzystać 🙂

by Paulina Kanak

właścicielka domen Canaq.net | Canaq.pl

© Copyright 2014 | Wszelkie prawa zastrzeżone
cq.canaq@gmail.com