Scrolling help

options
Scrolling help written Jul 19, 2018 17:36:10 GMT
15written posts
GHOSTearned bits
offlinecurrently
GHOST
New Member
GHOST Avatar
Hi Guys,

Just wondering if anyone can help me with some bbcoding. So I looked into picking apart some templates to reverse engineer the coding (Not going to plagiarise dw lol). I think I've got the jist of adding scroll bars into a post but how would I go about doing numerous ones?

It's supposed to be for a shipper/plotter so it would have the following sections; About, Friends, Lovers and Enemies. Not after anything too snazzy just something basic to start with. 

e.g.

ABOUT
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan nibh pretium eros facilisis, eget interdum diam pellentesque. Aenean malesuada nibh et massa dignissim, non accumsan tellus tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec elit libero. Aliquam sed justo quis magna tincidunt ultricies. In hac habitasse.

FRIENDS: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan nibh pretium eros facilisis, eget interdum diam pellentesque. Aenean malesuada nibh et massa dignissim, non accumsan tellus tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec elit libero. Aliquam sed justo quis magna tincidunt ultricies. In hac habitasse.
LOVERS: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan nibh pretium eros facilisis, eget interdum diam pellentesque. Aenean malesuada nibh et massa dignissim, non accumsan tellus tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec elit libero. Aliquam sed justo quis magna tincidunt ultricies. In hac habitasse.

ENEMIES: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan nibh pretium eros facilisis, eget interdum diam pellentesque. Aenean malesuada nibh et massa dignissim, non accumsan tellus tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec elit libero. Aliquam sed justo quis magna tincidunt ultricies. In hac habitasse.
OTHERS: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan nibh pretium eros facilisis, eget interdum diam pellentesque. Aenean malesuada nibh et massa dignissim, non accumsan tellus tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec elit libero. Aliquam sed justo quis magna tincidunt ultricies. In hac habitasse.


Only used a table to show the layout without having to create a template just to show what I mean lol. The scrollbars would have to be for a small textbox so if someone could point out the variable to change that I'd be forever grateful <3
last edit on Jul 19, 2018 18:16:49 GMT by GHOST
options
Scrolling help written Jul 19, 2018 17:46:18 GMT
0written posts
Deletedearned bits
offlinecurrently
Deleted
Deleted Avatar
I'm not sure exactly what you're asking here, but I'm assuming you want a table-esque template where the sections are in a four-square pattern where each box scrolls? That'll be relatively simple! All you have to do to add multiple scrollbars is apply a height to each respective div and apply overflow:auto as well! Here's an example if you'd like.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan nibh pretium eros facilisis, eget interdum diam pellentesque. Aenean malesuada nibh et massa dignissim, non accumsan tellus tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec elit libero. Aliquam sed justo quis magna tincidunt ultricies. In hac habitasse. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan nibh pretium eros facilisis, eget interdum diam pellentesque. Aenean malesuada nibh et massa dignissim, non accumsan tellus tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec elit libero. Aliquam sed justo quis magna tincidunt ultricies. In hac habitasse. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan nibh pretium eros facilisis, eget interdum diam pellentesque. Aenean malesuada nibh et massa dignissim, non accumsan tellus tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec elit libero. Aliquam sed justo quis magna tincidunt ultricies. In hac habitasse.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan nibh pretium eros facilisis, eget interdum diam pellentesque. Aenean malesuada nibh et massa dignissim, non accumsan tellus tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec elit libero. Aliquam sed justo quis magna tincidunt ultricies. In hac habitasse. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan nibh pretium eros facilisis, eget interdum diam pellentesque. Aenean malesuada nibh et massa dignissim, non accumsan tellus tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec elit libero. Aliquam sed justo quis magna tincidunt ultricies. In hac habitasse. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan nibh pretium eros facilisis, eget interdum diam pellentesque. Aenean malesuada nibh et massa dignissim, non accumsan tellus tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec elit libero. Aliquam sed justo quis magna tincidunt ultricies. In hac habitasse.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan nibh pretium eros facilisis, eget interdum diam pellentesque. Aenean malesuada nibh et massa dignissim, non accumsan tellus tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec elit libero. Aliquam sed justo quis magna tincidunt ultricies. In hac habitasse. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan nibh pretium eros facilisis, eget interdum diam pellentesque. Aenean malesuada nibh et massa dignissim, non accumsan tellus tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec elit libero. Aliquam sed justo quis magna tincidunt ultricies. In hac habitasse. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan nibh pretium eros facilisis, eget interdum diam pellentesque. Aenean malesuada nibh et massa dignissim, non accumsan tellus tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec elit libero. Aliquam sed justo quis magna tincidunt ultricies. In hac habitasse.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan nibh pretium eros facilisis, eget interdum diam pellentesque. Aenean malesuada nibh et massa dignissim, non accumsan tellus tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec elit libero. Aliquam sed justo quis magna tincidunt ultricies. In hac habitasse. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan nibh pretium eros facilisis, eget interdum diam pellentesque. Aenean malesuada nibh et massa dignissim, non accumsan tellus tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec elit libero. Aliquam sed justo quis magna tincidunt ultricies. In hac habitasse. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan nibh pretium eros facilisis, eget interdum diam pellentesque. Aenean malesuada nibh et massa dignissim, non accumsan tellus tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec elit libero. Aliquam sed justo quis magna tincidunt ultricies. In hac habitasse.


If this isn't what you were looking for, let me know!
last edit on Jul 19, 2018 17:47:37 GMT by Deleted
options
Scrolling help written Jul 19, 2018 18:20:16 GMT
15written posts
GHOSTearned bits
offlinecurrently
GHOST
New Member
GHOST Avatar
Thank you for the quick replies guys ~<3

Sorry that it was vague I'm not the best at explaining myself D:

Same kind of thing Dippy but with each one being under the other with an icon next to each one. I just wasn't too sure how to get the scroll bars in for more than one text box.

i.e.

Icon 1 Text box 1

Text box 2 Icon 2

Icon 3 Text box 3

Text box 4 Icon 4

I don't know if that's any clearer?
options
Scrolling help written Jul 19, 2018 18:25:52 GMT
0written posts
Deletedearned bits
offlinecurrently
Deleted
Deleted Avatar
Ooh so sort of like this instead?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan nibh pretium eros facilisis, eget interdum diam pellentesque. Aenean malesuada nibh et massa dignissim, non accumsan tellus tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec elit libero. Aliquam sed justo quis magna tincidunt ultricies. In hac habitasse. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan nibh pretium eros facilisis, eget interdum diam pellentesque. Aenean malesuada nibh et massa dignissim, non accumsan tellus tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec elit libero. Aliquam sed justo quis magna tincidunt ultricies. In hac habitasse. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan nibh pretium eros facilisis, eget interdum diam pellentesque. Aenean malesuada nibh et massa dignissim, non accumsan tellus tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec elit libero. Aliquam sed justo quis magna tincidunt ultricies. In hac habitasse.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan nibh pretium eros facilisis, eget interdum diam pellentesque. Aenean malesuada nibh et massa dignissim, non accumsan tellus tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec elit libero. Aliquam sed justo quis magna tincidunt ultricies. In hac habitasse. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan nibh pretium eros facilisis, eget interdum diam pellentesque. Aenean malesuada nibh et massa dignissim, non accumsan tellus tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec elit libero. Aliquam sed justo quis magna tincidunt ultricies. In hac habitasse. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan nibh pretium eros facilisis, eget interdum diam pellentesque. Aenean malesuada nibh et massa dignissim, non accumsan tellus tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec elit libero. Aliquam sed justo quis magna tincidunt ultricies. In hac habitasse.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan nibh pretium eros facilisis, eget interdum diam pellentesque. Aenean malesuada nibh et massa dignissim, non accumsan tellus tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec elit libero. Aliquam sed justo quis magna tincidunt ultricies. In hac habitasse. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan nibh pretium eros facilisis, eget interdum diam pellentesque. Aenean malesuada nibh et massa dignissim, non accumsan tellus tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec elit libero. Aliquam sed justo quis magna tincidunt ultricies. In hac habitasse. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan nibh pretium eros facilisis, eget interdum diam pellentesque. Aenean malesuada nibh et massa dignissim, non accumsan tellus tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec elit libero. Aliquam sed justo quis magna tincidunt ultricies. In hac habitasse.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan nibh pretium eros facilisis, eget interdum diam pellentesque. Aenean malesuada nibh et massa dignissim, non accumsan tellus tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec elit libero. Aliquam sed justo quis magna tincidunt ultricies. In hac habitasse. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan nibh pretium eros facilisis, eget interdum diam pellentesque. Aenean malesuada nibh et massa dignissim, non accumsan tellus tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec elit libero. Aliquam sed justo quis magna tincidunt ultricies. In hac habitasse. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan nibh pretium eros facilisis, eget interdum diam pellentesque. Aenean malesuada nibh et massa dignissim, non accumsan tellus tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec elit libero. Aliquam sed justo quis magna tincidunt ultricies. In hac habitasse.
options
Scrolling help written Jul 19, 2018 18:41:38 GMT
sweet cherry bomb
aliasaddy
pronounsShe / Her
25written posts
☾ CHERRYearned bits
offlinecurrently
☾ CHERRY
New Member
☾ CHERRY Avatar
i think something like this!


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan nibh pretium eros facilisis, eget interdum diam pellentesque. Aenean malesuada nibh et massa dignissim, non accumsan tellus tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec elit libero. Aliquam sed justo quis magna tincidunt ultricies. In hac habitasse. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan nibh pretium eros facilisis, eget interdum diam pellentesque. Aenean malesuada nibh et massa dignissim, non accumsan tellus tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec elit libero. Aliquam sed justo quis magna tincidunt ultricies. In hac habitasse. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan nibh pretium eros facilisis, eget interdum diam pellentesque. Aenean malesuada nibh et massa dignissim, non accumsan tellus tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec elit libero. Aliquam sed justo quis magna tincidunt ultricies. In hac habitasse.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan nibh pretium eros facilisis, eget interdum diam pellentesque. Aenean malesuada nibh et massa dignissim, non accumsan tellus tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec elit libero. Aliquam sed justo quis magna tincidunt ultricies. In hac habitasse. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan nibh pretium eros facilisis, eget interdum diam pellentesque. Aenean malesuada nibh et massa dignissim, non accumsan tellus tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec elit libero. Aliquam sed justo quis magna tincidunt ultricies. In hac habitasse. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan nibh pretium eros facilisis, eget interdum diam pellentesque. Aenean malesuada nibh et massa dignissim, non accumsan tellus tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec elit libero. Aliquam sed justo quis magna tincidunt ultricies. In hac habitasse.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan nibh pretium eros facilisis, eget interdum diam pellentesque. Aenean malesuada nibh et massa dignissim, non accumsan tellus tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec elit libero. Aliquam sed justo quis magna tincidunt ultricies. In hac habitasse. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan nibh pretium eros facilisis, eget interdum diam pellentesque. Aenean malesuada nibh et massa dignissim, non accumsan tellus tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec elit libero. Aliquam sed justo quis magna tincidunt ultricies. In hac habitasse. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan nibh pretium eros facilisis, eget interdum diam pellentesque. Aenean malesuada nibh et massa dignissim, non accumsan tellus tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec elit libero. Aliquam sed justo quis magna tincidunt ultricies. In hac habitasse.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan nibh pretium eros facilisis, eget interdum diam pellentesque. Aenean malesuada nibh et massa dignissim, non accumsan tellus tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec elit libero. Aliquam sed justo quis magna tincidunt ultricies. In hac habitasse. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan nibh pretium eros facilisis, eget interdum diam pellentesque. Aenean malesuada nibh et massa dignissim, non accumsan tellus tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec elit libero. Aliquam sed justo quis magna tincidunt ultricies. In hac habitasse. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque accumsan nibh pretium eros facilisis, eget interdum diam pellentesque. Aenean malesuada nibh et massa dignissim, non accumsan tellus tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec elit libero. Aliquam sed justo quis magna tincidunt ultricies. In hac habitasse.


tbh i didnt have to use tables, i played with floats for this template! lol

last edit on Jul 19, 2018 18:42:47 GMT by ☾ CHERRY
options
Scrolling help written Jul 19, 2018 20:25:12 GMT
aliasvee, vivi
pronounsany / they
659written posts
valkaearned bits
offlinecurrently
valka
Administrator
valka Avatar
do u know... la-hee?


you'd have to use webkit scrollbars! at its most simple, you'd use the following code:

[newclass=.classname::-wekbit-scrollbar]width: 10px;[/newclass]
[newclass=.classname::-webkit-scrollbar-track]background-color: #ddd;[/newclass]
[newclass=.classname::-webkit-scrollbar-thumb]background-color: #444;[/newclass]

.classname would be the name of the div that contains the height and overflow code that makes the box scroll.

the first line dictates stuff for the whole scrollbar. i just use it for widths, honestly.
the second line, the track, styles the, well, track. the progress bar, i guess you could call it.
the third line, the thumb, is the draggable bit on every scrollbar!

it's important to note that you should include a class before ::-webkit-scrollbar (etc) because otherwise it'll affect all of the scrollbars on the page, which can be a pain for other templates.

i think that's about it, just let us know if you have more questions ;o
if you think i haven't been keeping up with pp, think again
options
Scrolling help written Sept 30, 2018 18:15:33 GMT
3,084written posts
Kitten4uearned bits
offlinecurrently
Kitten4u
Part of the Furniture
Kitten4u Avatar
[nospaces]

[attr="class","infoBG"]
[attr="class","infoBG2"]
[attr="class","infoBack"]
[attr="class","infoTitle"][attr="class","fa fa-star-o"] threadarchived
[attr="class","infoDiv"]

[attr="class","infoBody"]

To keep the forum clean and so people know that all threads in certain areas are current and that the OP is likely to still have interest, we archive threads that haven't gotten posts for 2 weeks. This thread is being archived for that reason. If you would like this thread reopened, contact a staff member.