Tutorial Fyuri's BBCode Tutorials

[Fable]

I'll make something fancy for this first post a bit later.

This thread will host my poorly written tutorials for others to use and learn from. They probably aren't the first of their kind nor will they probably be the last. I felt that offering these would help benefit those who wish to learn some of the nifty tricks that aren't really covered or explained regarding their functions.

 

[Fable]

Hidden/Minimal Scrollbars
Before you alter the scrollbars, please consider the affects of doing so. If you remove the visibility of the scrollbar, some viewers may not know they can actually scroll for more text and may miss out on information. I suggest clarifying somewhere that it is a scrollbox.

Firstly, to get a scrollbox we will be using the DIV bbcode tag.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed nisl lectus. Proin ultrices justo purus, ut luctus lacus convallis et. Sed velit arcu, maximus sit amet venenatis quis, scelerisque ut quam. In pulvinar scelerisque tellus a accumsan. Donec justo purus, porttitor et venenatis in, vestibulum eu lacus. Integer quis dui laoreet, elementum nulla eget, rutrum leo. Phasellus ultrices, nunc a molestie euismod, quam ligula pulvinar risus, at ornare sapien ex et ex. Nam id tristique nisi. Nullam maximus lorem augue, sit amet dictum nunc lobortis et. Sed a viverra sem, ut sollicitudin augue. Cras a pharetra mauris, a tempus purus. Aliquam erat volutpat.

Aliquam a porttitor lectus. Aliquam accumsan nulla fermentum ipsum maximus suscipit. In hac habitasse platea dictumst. In elementum urna vel sollicitudin placerat. In hac habitasse platea dictumst. Mauris mollis nisi magna, in mollis dui varius nec. Morbi luctus augue sodales, accumsan nunc id, faucibus magna. Sed dui lorem, imperdiet aliquet lacinia dapibus, tincidunt feugiat ex. Curabitur ultricies tincidunt quam, vitae posuere enim rutrum a. Vestibulum fringilla rutrum mi, malesuada tincidunt nisi maximus vel. Duis ornare fermentum leo, id viverra leo. Aliquam eleifend justo nec vulputate porta. Aenean eu elit faucibus, placerat ipsum sed, pharetra risus. Phasellus sit amet euismod dui, ut posuere purus. Integer non ornare orci.

Spoiler: CODE

[div=background: #add8e6; width:300px; height:400px; margin:auto; text-align:justify; overflow:hidden;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed nisl lectus. Proin ultrices justo purus, ut luctus lacus convallis et. Sed velit arcu, maximus sit amet venenatis quis, scelerisque ut quam. In pulvinar scelerisque tellus a accumsan. Donec justo purus, porttitor et venenatis in, vestibulum eu lacus. Integer quis dui laoreet, elementum nulla eget, rutrum leo. Phasellus ultrices, nunc a molestie euismod, quam ligula pulvinar risus, at ornare sapien ex et ex. Nam id tristique nisi. Nullam maximus lorem augue, sit amet dictum nunc lobortis et. Sed a viverra sem, ut sollicitudin augue. Cras a pharetra mauris, a tempus purus. Aliquam erat volutpat.

Aliquam a porttitor lectus. Aliquam accumsan nulla fermentum ipsum maximus suscipit. In hac habitasse platea dictumst. In elementum urna vel sollicitudin placerat. In hac habitasse platea dictumst. Mauris mollis nisi magna, in mollis dui varius nec. Morbi luctus augue sodales, accumsan nunc id, faucibus magna. Sed dui lorem, imperdiet aliquet lacinia dapibus, tincidunt feugiat ex. Curabitur ultricies tincidunt quam, vitae posuere enim rutrum a. Vestibulum fringilla rutrum mi, malesuada tincidunt nisi maximus vel. Duis ornare fermentum leo, id viverra leo. Aliquam eleifend justo nec vulputate porta. Aenean eu elit faucibus, placerat ipsum sed, pharetra risus. Phasellus sit amet euismod dui, ut posuere purus. Integer non ornare orci.[/div]

You can see that I've hidden the "overflow" so that the text that doesn't fit within the set dimensions of the DIV box is no longer visible. The overflow controls the content of the DIV box, such as if it clips or scrolls.

Now, to add a scrollbox to just this div, we would change the overflow:hidden to overflow: auto.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed nisl lectus. Proin ultrices justo purus, ut luctus lacus convallis et. Sed velit arcu, maximus sit amet venenatis quis, scelerisque ut quam. In pulvinar scelerisque tellus a accumsan. Donec justo purus, porttitor et venenatis in, vestibulum eu lacus. Integer quis dui laoreet, elementum nulla eget, rutrum leo. Phasellus ultrices, nunc a molestie euismod, quam ligula pulvinar risus, at ornare sapien ex et ex. Nam id tristique nisi. Nullam maximus lorem augue, sit amet dictum nunc lobortis et. Sed a viverra sem, ut sollicitudin augue. Cras a pharetra mauris, a tempus purus. Aliquam erat volutpat.

Aliquam a porttitor lectus. Aliquam accumsan nulla fermentum ipsum maximus suscipit. In hac habitasse platea dictumst. In elementum urna vel sollicitudin placerat. In hac habitasse platea dictumst. Mauris mollis nisi magna, in mollis dui varius nec. Morbi luctus augue sodales, accumsan nunc id, faucibus magna. Sed dui lorem, imperdiet aliquet lacinia dapibus, tincidunt feugiat ex. Curabitur ultricies tincidunt quam, vitae posuere enim rutrum a. Vestibulum fringilla rutrum mi, malesuada tincidunt nisi maximus vel. Duis ornare fermentum leo, id viverra leo. Aliquam eleifend justo nec vulputate porta. Aenean eu elit faucibus, placerat ipsum sed, pharetra risus. Phasellus sit amet euismod dui, ut posuere purus. Integer non ornare orci.

Spoiler: CODE

[div=background: #add8e6; width:300px; height:400px; margin:auto; text-align:justify; overflow:auto;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed nisl lectus. Proin ultrices justo purus, ut luctus lacus convallis et. Sed velit arcu, maximus sit amet venenatis quis, scelerisque ut quam. In pulvinar scelerisque tellus a accumsan. Donec justo purus, porttitor et venenatis in, vestibulum eu lacus. Integer quis dui laoreet, elementum nulla eget, rutrum leo. Phasellus ultrices, nunc a molestie euismod, quam ligula pulvinar risus, at ornare sapien ex et ex. Nam id tristique nisi. Nullam maximus lorem augue, sit amet dictum nunc lobortis et. Sed a viverra sem, ut sollicitudin augue. Cras a pharetra mauris, a tempus purus. Aliquam erat volutpat.

Aliquam a porttitor lectus. Aliquam accumsan nulla fermentum ipsum maximus suscipit. In hac habitasse platea dictumst. In elementum urna vel sollicitudin placerat. In hac habitasse platea dictumst. Mauris mollis nisi magna, in mollis dui varius nec. Morbi luctus augue sodales, accumsan nunc id, faucibus magna. Sed dui lorem, imperdiet aliquet lacinia dapibus, tincidunt feugiat ex. Curabitur ultricies tincidunt quam, vitae posuere enim rutrum a. Vestibulum fringilla rutrum mi, malesuada tincidunt nisi maximus vel. Duis ornare fermentum leo, id viverra leo. Aliquam eleifend justo nec vulputate porta. Aenean eu elit faucibus, placerat ipsum sed, pharetra risus. Phasellus sit amet euismod dui, ut posuere purus. Integer non ornare orci.[/div]

Now, right now the text is right up against the edges of the DIV box, however you can change this by adding a padding, such as padding:5px into the DIV code. However, we are focusing on making hidden/minimal scrollbars so we'll be skipping this. I just wanted to go over what overflow does before we really got into the tutorial.

Here is a scrollbox with a hidden/invisible scrollbar:

This box does scroll with a hidden scrollbar.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed nisl lectus. Proin ultrices justo purus, ut luctus lacus convallis et. Sed velit arcu, maximus sit amet venenatis quis, scelerisque ut quam. In pulvinar scelerisque tellus a accumsan. Donec justo purus, porttitor et venenatis in, vestibulum eu lacus. Integer quis dui laoreet, elementum nulla eget, rutrum leo. Phasellus ultrices, nunc a molestie euismod, quam ligula pulvinar risus, at ornare sapien ex et ex. Nam id tristique nisi. Nullam maximus lorem augue, sit amet dictum nunc lobortis et. Sed a viverra sem, ut sollicitudin augue. Cras a pharetra mauris, a tempus purus. Aliquam erat volutpat.

Aliquam a porttitor lectus. Aliquam accumsan nulla fermentum ipsum maximus suscipit. In hac habitasse platea dictumst. In elementum urna vel sollicitudin placerat. In hac habitasse platea dictumst. Mauris mollis nisi magna, in mollis dui varius nec. Morbi luctus augue sodales, accumsan nunc id, faucibus magna. Sed dui lorem, imperdiet aliquet lacinia dapibus, tincidunt feugiat ex. Curabitur ultricies tincidunt quam, vitae posuere enim rutrum a. Vestibulum fringilla rutrum mi, malesuada tincidunt nisi maximus vel. Duis ornare fermentum leo, id viverra leo. Aliquam eleifend justo nec vulputate porta. Aenean eu elit faucibus, placerat ipsum sed, pharetra risus. Phasellus sit amet euismod dui, ut posuere purus. Integer non ornare orci.

Spoiler: CODE

[div=background: #add8e6; width:300px; height:400px; margin:auto;overflow:hidden;][div=overflow:auto;width:307px; height:390px;padding:5px; text-align:justify;]This box does scroll with a hidden scrollbar.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed nisl lectus. Proin ultrices justo purus, ut luctus lacus convallis et. Sed velit arcu, maximus sit amet venenatis quis, scelerisque ut quam. In pulvinar scelerisque tellus a accumsan. Donec justo purus, porttitor et venenatis in, vestibulum eu lacus. Integer quis dui laoreet, elementum nulla eget, rutrum leo. Phasellus ultrices, nunc a molestie euismod, quam ligula pulvinar risus, at ornare sapien ex et ex. Nam id tristique nisi. Nullam maximus lorem augue, sit amet dictum nunc lobortis et. Sed a viverra sem, ut sollicitudin augue. Cras a pharetra mauris, a tempus purus. Aliquam erat volutpat.

Aliquam a porttitor lectus. Aliquam accumsan nulla fermentum ipsum maximus suscipit. In hac habitasse platea dictumst. In elementum urna vel sollicitudin placerat. In hac habitasse platea dictumst. Mauris mollis nisi magna, in mollis dui varius nec. Morbi luctus augue sodales, accumsan nunc id, faucibus magna. Sed dui lorem, imperdiet aliquet lacinia dapibus, tincidunt feugiat ex. Curabitur ultricies tincidunt quam, vitae posuere enim rutrum a. Vestibulum fringilla rutrum mi, malesuada tincidunt nisi maximus vel. Duis ornare fermentum leo, id viverra leo. Aliquam eleifend justo nec vulputate porta. Aenean eu elit faucibus, placerat ipsum sed, pharetra risus. Phasellus sit amet euismod dui, ut posuere purus. Integer non ornare orci.[/div][/div]

This is achieved using two DIV boxes with a set width and height. The trick to this is that your first div must hide any overflowing content. This is where overflow:hidden comes in. So, the first DIV - the container DIV - is coded as:

[div=background: #add8e6; width:300px; height:400px; margin:auto; overflow:hidden;]CONTENT[/div]

With the content of this container set to hide overflow content, anything within it will be hidden away. So when you put in your second DIV that will contain your scrolling content, it will not flow outside of the container DIV.

[div=overflow:auto;width:307px; height:390px; padding:5px; text-align:justify;]SCROLLBOX CONTENT[/div]

Look at the set width of the second DIV. It is 7 pixels wider than the container. Why? Because doing so will cause the scrollbar of the scrollbox to overflow and therefore be hidden by the container DIV. Nifty right?

The same principle of this hidden scrollbar can be used to simply reduced the size of a visible scrollbar. If I reduce the pixels of the width of the second DIV from 307 to 304 you can see a small sliver of the scrollbar that I've made visible now.

This box does scroll.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed nisl lectus. Proin ultrices justo purus, ut luctus lacus convallis et. Sed velit arcu, maximus sit amet venenatis quis, scelerisque ut quam. In pulvinar scelerisque tellus a accumsan. Donec justo purus, porttitor et venenatis in, vestibulum eu lacus. Integer quis dui laoreet, elementum nulla eget, rutrum leo. Phasellus ultrices, nunc a molestie euismod, quam ligula pulvinar risus, at ornare sapien ex et ex. Nam id tristique nisi. Nullam maximus lorem augue, sit amet dictum nunc lobortis et. Sed a viverra sem, ut sollicitudin augue. Cras a pharetra mauris, a tempus purus. Aliquam erat volutpat.

Aliquam a porttitor lectus. Aliquam accumsan nulla fermentum ipsum maximus suscipit. In hac habitasse platea dictumst. In elementum urna vel sollicitudin placerat. In hac habitasse platea dictumst. Mauris mollis nisi magna, in mollis dui varius nec. Morbi luctus augue sodales, accumsan nunc id, faucibus magna. Sed dui lorem, imperdiet aliquet lacinia dapibus, tincidunt feugiat ex. Curabitur ultricies tincidunt quam, vitae posuere enim rutrum a. Vestibulum fringilla rutrum mi, malesuada tincidunt nisi maximus vel. Duis ornare fermentum leo, id viverra leo. Aliquam eleifend justo nec vulputate porta. Aenean eu elit faucibus, placerat ipsum sed, pharetra risus. Phasellus sit amet euismod dui, ut posuere purus. Integer non ornare orci.

You will also need to adjust the height of the second DIV. You can see that the containers height is 400px and the scrollbox is 390px. Now, you don't have to do this, you could leave the height the same, but I always tend to adjust the height to ensure the scrollbox fills the container only as much as it should. If I made the height smaller, it would show the end of the scrollbox, and if it's bigger the overflow will clip off the scrollbox and could affect how your padding and text display as well.

 

[Fable]

"Colored" ScrollbarsUnfortunately with the limitations of the DIV tag we cannot change the color of the scrollbars directly. However, there is a way to put a "color filter" over the scrollbar to give it some color.

.

This box does scroll.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed nisl lectus. Proin ultrices justo purus, ut luctus lacus convallis et. Sed velit arcu, maximus sit amet venenatis quis, scelerisque ut quam. In pulvinar scelerisque tellus a accumsan. Donec justo purus, porttitor et venenatis in, vestibulum eu lacus. Integer quis dui laoreet, elementum nulla eget, rutrum leo. Phasellus ultrices, nunc a molestie euismod, quam ligula pulvinar risus, at ornare sapien ex et ex. Nam id tristique nisi. Nullam maximus lorem augue, sit amet dictum nunc lobortis et. Sed a viverra sem, ut sollicitudin augue. Cras a pharetra mauris, a tempus purus. Aliquam erat volutpat.

Aliquam a porttitor lectus. Aliquam accumsan nulla fermentum ipsum maximus suscipit. In hac habitasse platea dictumst. In elementum urna vel sollicitudin placerat. In hac habitasse platea dictumst. Mauris mollis nisi magna, in mollis dui varius nec. Morbi luctus augue sodales, accumsan nunc id, faucibus magna. Sed dui lorem, imperdiet aliquet lacinia dapibus, tincidunt feugiat ex. Curabitur ultricies tincidunt quam, vitae posuere enim rutrum a. Vestibulum fringilla rutrum mi, malesuada tincidunt nisi maximus vel. Duis ornare fermentum leo, id viverra leo. Aliquam eleifend justo nec vulputate porta. Aenean eu elit faucibus, placerat ipsum sed, pharetra risus. Phasellus sit amet euismod dui, ut posuere purus. Integer non ornare orci.

Spoiler: CODE

[div=background: #eee6ea; width:300px; height:400px; margin:auto;overflow:hidden;][div=position:relative;][div=position:absolute;background-color:rgba(94,8,51, 0.3);color:transparent;width:4px;height:400px;left:297px;top:0;].[/div][div=overflow:auto;width:304px; height:390px;padding:5px; text-align:justify;]This box does scroll.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed nisl lectus. Proin ultrices justo purus, ut luctus lacus convallis et. Sed velit arcu, maximus sit amet venenatis quis, scelerisque ut quam. In pulvinar scelerisque tellus a accumsan. Donec justo purus, porttitor et venenatis in, vestibulum eu lacus. Integer quis dui laoreet, elementum nulla eget, rutrum leo. Phasellus ultrices, nunc a molestie euismod, quam ligula pulvinar risus, at ornare sapien ex et ex. Nam id tristique nisi. Nullam maximus lorem augue, sit amet dictum nunc lobortis et. Sed a viverra sem, ut sollicitudin augue. Cras a pharetra mauris, a tempus purus. Aliquam erat volutpat.

Aliquam a porttitor lectus. Aliquam accumsan nulla fermentum ipsum maximus suscipit. In hac habitasse platea dictumst. In elementum urna vel sollicitudin placerat. In hac habitasse platea dictumst. Mauris mollis nisi magna, in mollis dui varius nec. Morbi luctus augue sodales, accumsan nunc id, faucibus magna. Sed dui lorem, imperdiet aliquet lacinia dapibus, tincidunt feugiat ex. Curabitur ultricies tincidunt quam, vitae posuere enim rutrum a. Vestibulum fringilla rutrum mi, malesuada tincidunt nisi maximus vel. Duis ornare fermentum leo, id viverra leo. Aliquam eleifend justo nec vulputate porta. Aenean eu elit faucibus, placerat ipsum sed, pharetra risus. Phasellus sit amet euismod dui, ut posuere purus. Integer non ornare orci.[/div][/div][/div]

The example above is using the minimal scrollbar code with two additional DIVs to create this effect. I will be using a full scrollbar for this tutorial for better visibility.

.

This box does scroll.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed nisl lectus. Proin ultrices justo purus, ut luctus lacus convallis et. Sed velit arcu, maximus sit amet venenatis quis, scelerisque ut quam. In pulvinar scelerisque tellus a accumsan. Donec justo purus, porttitor et venenatis in, vestibulum eu lacus. Integer quis dui laoreet, elementum nulla eget, rutrum leo. Phasellus ultrices, nunc a molestie euismod, quam ligula pulvinar risus, at ornare sapien ex et ex. Nam id tristique nisi. Nullam maximus lorem augue, sit amet dictum nunc lobortis et. Sed a viverra sem, ut sollicitudin augue. Cras a pharetra mauris, a tempus purus. Aliquam erat volutpat.

Aliquam a porttitor lectus. Aliquam accumsan nulla fermentum ipsum maximus suscipit. In hac habitasse platea dictumst. In elementum urna vel sollicitudin placerat. In hac habitasse platea dictumst. Mauris mollis nisi magna, in mollis dui varius nec. Morbi luctus augue sodales, accumsan nunc id, faucibus magna. Sed dui lorem, imperdiet aliquet lacinia dapibus, tincidunt feugiat ex. Curabitur ultricies tincidunt quam, vitae posuere enim rutrum a. Vestibulum fringilla rutrum mi, malesuada tincidunt nisi maximus vel. Duis ornare fermentum leo, id viverra leo. Aliquam eleifend justo nec vulputate porta. Aenean eu elit faucibus, placerat ipsum sed, pharetra risus. Phasellus sit amet euismod dui, ut posuere purus. Integer non ornare orci.

Spoiler: CODE

[div=background: #eee6ea; width:300px; height:400px; margin:auto;overflow:hidden;][div=position:relative;][div=position:absolute;background-color:rgba(94,8,51, 0.3);color:transparent;width:14px;height:400px;left:285px;top:0;pointer-events:none;].[/div][div=overflow:auto;width:291px; height:390px;padding:5px; text-align:justify;]This box does scroll.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed nisl lectus. Proin ultrices justo purus, ut luctus lacus convallis et. Sed velit arcu, maximus sit amet venenatis quis, scelerisque ut quam. In pulvinar scelerisque tellus a accumsan. Donec justo purus, porttitor et venenatis in, vestibulum eu lacus. Integer quis dui laoreet, elementum nulla eget, rutrum leo. Phasellus ultrices, nunc a molestie euismod, quam ligula pulvinar risus, at ornare sapien ex et ex. Nam id tristique nisi. Nullam maximus lorem augue, sit amet dictum nunc lobortis et. Sed a viverra sem, ut sollicitudin augue. Cras a pharetra mauris, a tempus purus. Aliquam erat volutpat.

Aliquam a porttitor lectus. Aliquam accumsan nulla fermentum ipsum maximus suscipit. In hac habitasse platea dictumst. In elementum urna vel sollicitudin placerat. In hac habitasse platea dictumst. Mauris mollis nisi magna, in mollis dui varius nec. Morbi luctus augue sodales, accumsan nunc id, faucibus magna. Sed dui lorem, imperdiet aliquet lacinia dapibus, tincidunt feugiat ex. Curabitur ultricies tincidunt quam, vitae posuere enim rutrum a. Vestibulum fringilla rutrum mi, malesuada tincidunt nisi maximus vel. Duis ornare fermentum leo, id viverra leo. Aliquam eleifend justo nec vulputate porta. Aenean eu elit faucibus, placerat ipsum sed, pharetra risus. Phasellus sit amet euismod dui, ut posuere purus. Integer non ornare orci.[/div][/div][/div]

This effect is achieved by the use of two additional DIVS; a new container DIV with position:relative, a color 'filter' overlay DIV that uses position:absolute to go over the scrollbar.

The position:relative DIV serves as a container for the position:absolute DIV. Without it, you'll find that your element position "absolutely" will go outside of the post (a big no-no).

Here is the container DIV:

[div=position:relative;]CONTENT[/div]

Here is the absolute DIV:

[div=position:absolute;background-color:rgba(94,8,51, 0.3);color:transparent;width:14px;height:400px;left:285px;top:0;pointer-events:none;].[/div]

Now, that period (.) in the absolute DIV is so that it actually appears. Any DIVs without any content inside of the tag will not show up. So to hide that period I made the text color transparent. The period is still there, but is no longer visible, leaving only the color overlay.

Depending on what you set your width, height, and scrollbar size, you will have to alter the absolute DIV to fit your needs. You can change the position of an absolute DIV with the use of left, right, top, bottom. You can increase or decrease the width/height of the overlay to match your scrollbar width by just changing the value.

Important: You'll notice that I do not use a standard hexadecimal color code for the overlay color and instead use RGBA. The reason for this is that RGBA allows me to set the opacity of the color.

background-color:rgba(94,8,51, 0.3);

RGBA stands for Red, Blue, Green, Alpha. The first three numbers are basically the RGB and the A is the opacity which can be a value of 0.0 (completely transparent) to 1.0 (opaque). You can use sites like color-hex to find out a color's RGB values.

You can see I set my alpha value (the opacity) to 0.3. You can always play around with this value to see what appears best for your design. Minimal scrollbars will work best with less opacity.

Important: As the color is just an overlay, you cannot set different parts of the scrollbar to different colors unless you add more overlay DIVs. Due to the scrollbar itself moving, you'd not be able to change the scrollbar color itself as when it moves, the overlay div will not move with it.

Important: This type of scrollbar works best to scroll with a mouse with a scroll wheel, otherwise you would have to find the "sweet spot" to click the arrows to scroll (on the edges of the scrollbar).

Back to these two new DIVs and explaining where exactly they go in the overall code. As this overlay is connected to the scrollbaox DIV, the position:relative; container DIV and position:absolute; DIV would both go before the scrollbox DIV. However, the absolute DIV is 'closed' immediately and the position:relative; DIV is closed at the end of the code as per the order of the DIVs themselves.

Once you look at the raw code itself, you'll see how these DIVs are ordered.