Make sure you add the CSS code under the “Dynamic” Section so you can reuse the scrollable elements on all pages. Check the video scene from 6:02 8:32 to for reference.
php
ul.scroller {
list-style-type:none!important;
font-size:12px;
line-height: 15px;
}
ul.scroller li {
background:#5a5858;
margin:10px 5% 10px 0px;
padding:5px;
color:#fff;
border-radius:5px;
}
.scroller {
margin-top:1em;
display:block;
background: #F1F1F1;
width: 100%;
height: 150px;
overflow-y: scroll;
border: 1px solid #ccc;
}
Add the HTML code inside the widget to reflect the scrollable design (scene 4:25 – 6:03)
php
<ul class="scroller">
<li>Title 1</li>
<li>Title 2</li>
</ul>
I also created other tutorials specifically for Learnworlds, see the relevant blogs below.