coding help


Introduction

You can create scrolling boxes with WikiText, and with HTML and CSS as well using the "overflow:auto;" attribute. Scrolling boxes are mainly for lists or sections of a page. The way this works is you create a box, and as you type the box will create scroll bars so that all the text fits.

Here is an example of it:

This text will fill the box, and it creates a scroll bar. It's really useful for pages that you don't want getting too long, or long lists that would take up the whole page.


<center><div style="border:black 4px solid;width:200px;height:100px;overflow:auto;">Text goes here. Just fill up the box!</div></center>
<div style="overflow: scroll; height: 50px; width: 540px; border: 4px none; margin-center: 0px; border-radius: 0px;color:none;overflow-y: hidden">

NOTE: The above code often glitches in WikiText. However, it still works in HTML.

Scrolling boxes are great for columns, because the width and height adjustments give the columns a certain size, keeping them from overflowing.

You can also put images and GIFs in scrolling boxes, like below:

Forest1

The code for this: 

<center><div style="border:black 4px solid;width:200px;height:150px;overflow:auto;">[[File:Forest1.PNG|200px]]</div></center>

Additionally, those images can be linked, with a border or caption, etc.! Go to Image Modification to learn how.

Adding Attributes

You can also add backgrounds to scrolling boxes by adding this to your scrolling box: 

background: *insert color here*;

Like this:

Woah! Isn't this cool? The more text you put in it, the more it will scroll, now with a fancy background! You can have as much here as you want!

You can also change the font color by adding this to your code: 

color: *insert color here*;

Like shown above!

To add a cool font shadow, you can add this: 

text-shadow: insert 0px 3px 3px;

Example:

Woah! Isn't this cool? The more text you put in it, the more it will scroll, now with a fancy background and text shadow! You can have as much here as you want!

You can also change the background to a gradient, like this: 

background: linear-gradient(to right, color, color);

Example:

Woah! Isn't this cool? The more text you put in it, the more it will scroll, now with a fancy gradient background and text shadow! You can have as much here as you want!

To change the font, you can just add this: 

font-family: *insert font name here*;

Example:

It has to be the fonts that the wiki enabled, otherwise it would not work.

Woah! Isn't this cool? The more text you put in it, the more it will scroll, now with a fancy background and a cool font! You can have as much here as you want!

To change the border, you can just add this: 

border: *insert border styling here*

Example:

Woah! Isn't this cool? The more text you put in it, the more it will scroll, now with a fancy background and a cool font! You can have as much here as you want!

By adding all shown above, you can get this!

With all the codes combined, you can add more and more cool coding! This sentence will continue to fill up the box.
This sentence will continue to fill up the box.
This sentence will continue to fill up the box.
This sentence will continue to fill up the box.
<div style="border:3px double pink;border-radius:5px;background: linear-gradient(to right, purple, blue); color: white; overflow:hidden;width:432px;overflow:scroll;width:200px;height:100px;overflow:auto;font-family: Indie flower;text-shadow: white 0px 3px 3px">With all the codes combined, you can add more and more cool coding! This sentence will continue to fill up the box.<br>This sentence will continue to fill up the box.<br>This sentence will continue to fill up the box.<br>This sentence will continue to fill up the box.<br></div>


You can add many more attributes to your scrollbox!





With all the codes combined, you can add more and more cool coding! This sentence will continue to fill up the box.
This sentence will continue to fill up the box.
This sentence will continue to fill up the box.
This sentence will continue to fill up the box.