Div Guide™

[Reyn]

Hello. This is a much-requested guide on how to effectively use the [div] code on RPF. Bear in mind that this guide will not 100% cover absolutely everything you can do with div, rather it will serve to display a bunch of stuff that myself and others have found to work currently. It is entirely possible for other things to be achievable with div, and I recommend sites like w3schools and css-tricks if you want to take this further (although they are for general CSS, so you might have to do some digging to find things that work with just div). If you'd rather stay on-site, then check out some of the active threads in the Testing Forum, although do be sure to ask people before copying any code from there.

If you have any questions or fun additions to this guide, feel free to post them below.

NOTE: if you use RPF dark theme, the background image section might be hard to read. I didn't want to alter the colour to fit the image because I didn't want to make the div code more complicated in a tutorial. Switch to light theme for that bit or highlight the text.

What even is a Div?
It's a fun little bit of BBCode that allows you to put in pretty much any CSS formatting that you want, and applies it to whatever's inside. If you don't know what that means... you will.

How do I use them?
The basic syntax for a div is [div=" "]TEXT[/div] with the formatting being placed between the "s. Each bit of formatting should be separated by a semicolon ; . You can put literally anything inside a div: other BBCode, images, even whole other div elements.

What can I do with them?
All of the below. You can combine them as well.

BASIC THINGS

---

The following works with hex colours (e.g. #FF0000) and colour words (e.g. red).
.

This changes the text colour.

.

This changes the background colour.

.

This changes the border colour. More on borders later.

.

Here, all 3 have been changed.

.

---

[div="color:red;"]This changes the text colour.[/div]

[div="background-color:red;"]This changes the background colour.[/div]

[div="border:red 1px solid"]This changes the border colour. More on borders later.[/div]

[div="color:blue; background-color:yellow; border:red 1px solid"]Here, all 3 have been changed.[/div]

---

You can add an image to the background of a div.

.

The background image will repeat by default, but you can turn off repeat by adding background-repeat:no-repeat. To see this in action, open the spoiler below and notice how the background doesn't repeat- it cuts off towards the end.

---

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac justo quis lectus consectetur molestie. Praesent congue eleifend mauris, vel dignissim felis posuere sed. Nullam sed hendrerit neque. Vivamus luctus tellus ullamcorper, tempus sapien vitae, lacinia lorem. Aenean facilisis nec diam ut rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque eleifend aliquet vestibulum. Fusce imperdiet lobortis molestie. Morbi eget erat velit. Nullam tristique urna nisi, ac ultrices sem aliquam id. Vestibulum nec lacus ullamcorper, ultricies ante vel, eleifend dui. Nunc condimentum pellentesque mauris in bibendum.

Quisque enim lectus, luctus et ultricies sit amet, placerat nec sapien. Duis eu ex lectus. Donec blandit eleifend orci sit amet egestas. Sed sodales massa dui, a suscipit magna dignissim ac. Phasellus sed lacus vel arcu semper commodo. Nunc non nulla rutrum turpis vulputate tempus. Aliquam congue elit a orci laoreet, ac tincidunt ipsum auctor. Quisque hendrerit purus libero, at posuere urna interdum at. Aenean convallis, nisl quis aliquam bibendum, mi orci finibus sem, nec finibus dolor dolor viverra est. Duis vulputate purus vitae erat congue, eget ultricies mi maximus. Integer luctus mauris ipsum, ut pretium odio blandit nec.

Ut placerat bibendum ex, in condimentum odio blandit eget. Curabitur vitae mauris nec justo sagittis accumsan vitae vitae erat. Maecenas aliquet tortor at ullamcorper pharetra. Donec luctus elit eget commodo ultrices. In quis sodales massa. Integer malesuada elit lacus, et gravida nulla luctus vitae. Vivamus ante ligula, accumsan quis tortor et, bibendum gravida augue. Nunc fermentum tellus a est viverra lobortis. Integer leo augue, scelerisque at aliquet vel, ullamcorper condimentum ligula.

Mauris nec tristique urna. Cras ullamcorper orci at sem tempus, in congue arcu molestie. Pellentesque luctus urna eu maximus sodales. Curabitur commodo orci metus, id maximus dolor ullamcorper non. Donec gravida aliquam justo vitae cursus. Fusce laoreet ultrices dolor, in tempor nulla tempus eu. Aliquam fringilla dui non elementum pretium. Donec ornare lorem vitae eleifend ornare. Ut rutrum massa non lectus convallis, vitae laoreet magna commodo. Aliquam erat volutpat. Vivamus pretium enim non dolor porta, a lacinia mauris hendrerit. Suspendisse venenatis neque hendrerit tempus porttitor.

Suspendisse lectus velit, ultricies quis nisl ut, volutpat vestibulum magna. Vestibulum vel rutrum justo. Pellentesque in ornare metus, pellentesque imperdiet lorem. Etiam et nulla augue. Nunc libero eros, pellentesque eget metus at, auctor ornare massa. Fusce aliquet bibendum imperdiet. Duis ac faucibus tortor, in malesuada mi. Quisque congue enim sem, quis ullamcorper nibh porttitor vel. Etiam a nisl a leo pellentesque ultricies vel sed nibh.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac justo quis lectus consectetur molestie. Praesent congue eleifend mauris, vel dignissim felis posuere sed. Nullam sed hendrerit neque. Vivamus luctus tellus ullamcorper, tempus sapien vitae, lacinia lorem. Aenean facilisis nec diam ut rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque eleifend aliquet vestibulum. Fusce imperdiet lobortis molestie. Morbi eget erat velit. Nullam tristique urna nisi, ac ultrices sem aliquam id. Vestibulum nec lacus ullamcorper, ultricies ante vel, eleifend dui. Nunc condimentum pellentesque mauris in bibendum.

Quisque enim lectus, luctus et ultricies sit amet, placerat nec sapien. Duis eu ex lectus. Donec blandit eleifend orci sit amet egestas. Sed sodales massa dui, a suscipit magna dignissim ac. Phasellus sed lacus vel arcu semper commodo. Nunc non nulla rutrum turpis vulputate tempus. Aliquam congue elit a orci laoreet, ac tincidunt ipsum auctor. Quisque hendrerit purus libero, at posuere urna interdum at. Aenean convallis, nisl quis aliquam bibendum, mi orci finibus sem, nec finibus dolor dolor viverra est. Duis vulputate purus vitae erat congue, eget ultricies mi maximus. Integer luctus mauris ipsum, ut pretium odio blandit nec.

Ut placerat bibendum ex, in condimentum odio blandit eget. Curabitur vitae mauris nec justo sagittis accumsan vitae vitae erat. Maecenas aliquet tortor at ullamcorper pharetra. Donec luctus elit eget commodo ultrices. In quis sodales massa. Integer malesuada elit lacus, et gravida nulla luctus vitae. Vivamus ante ligula, accumsan quis tortor et, bibendum gravida augue. Nunc fermentum tellus a est viverra lobortis. Integer leo augue, scelerisque at aliquet vel, ullamcorper condimentum ligula.

Mauris nec tristique urna. Cras ullamcorper orci at sem tempus, in congue arcu molestie. Pellentesque luctus urna eu maximus sodales. Curabitur commodo orci metus, id maximus dolor ullamcorper non. Donec gravida aliquam justo vitae cursus. Fusce laoreet ultrices dolor, in tempor nulla tempus eu. Aliquam fringilla dui non elementum pretium. Donec ornare lorem vitae eleifend ornare. Ut rutrum massa non lectus convallis, vitae laoreet magna commodo. Aliquam erat volutpat. Vivamus pretium enim non dolor porta, a lacinia mauris hendrerit. Suspendisse venenatis neque hendrerit tempus porttitor.

Suspendisse lectus velit, ultricies quis nisl ut, volutpat vestibulum magna. Vestibulum vel rutrum justo. Pellentesque in ornare metus, pellentesque imperdiet lorem. Etiam et nulla augue. Nunc libero eros, pellentesque eget metus at, auctor ornare massa. Fusce aliquet bibendum imperdiet. Duis ac faucibus tortor, in malesuada mi. Quisque congue enim sem, quis ullamcorper nibh porttitor vel. Etiam a nisl a leo pellentesque ultricies vel sed nibh.

.

You can change the position of the background as well. Available directions are top, bottom, left, right, center, and you can combine these (e.g. bottom left). You can also position the background using X% and Y% (e.g. 40% 20%).

.

You can also change the size of the background image, which is useful if you're using a huge image or a tiny image as a background.

.

---

[div="background-image:url(https://i.imgur.com/spcurXT.jpg);"]You can add an image to the background of a div.[/div]

[div="background-image:url(https://i.imgur.com/spcurXT.jpg);background-repeat: no-repeat;"]The background image will repeat by default, but you can turn off repeat by adding background-repeat:no-repeat.[/div]

[div="background-image:url(https://i.imgur.com/spcurXT.jpg);background-position: bottom left;"]You can change the position of the background as well. Available directions are top, bottom, left, right, center, and you can combine these (e.g. bottom left). You can also position the background using X% and Y% (e.g. 40% 20%).[/div]

[div="background-image:url(https://i.imgur.com/spcurXT.jpg);background-size:100%;"]You can also change the size of the background image, which is useful if you're using a huge image or a tiny image as a background.[/div]

---

You can align text like you can with the [align] tag. Options are left, right, center.

.

You can change the font as well. Don't ask me for a list of fonts that work, I don't know. This is a good place to start, if you want fonts that work on most devices.

.

You can change the font style. Available styles are normal, italic, oblique.

.
It is possible for you to change the font size using div... but don't. It doesn't work and it's shit. Just use the [size] tags.
.

---

[div="text-align:center;"]You can align text like you can with the [align] tag. Options are left, right, center.[/div]

[div="font-family:comic sans ms;"]You can change the font as well. Don't ask me for a list of fonts that work, I don't know.[/div]

[div="font-style: oblique;"]You can change the font style. Available styles are normal, italic, oblique.[/div]

---

This creates a border around the div.

.

The thickness of the border can be altered by changing the number in front of 'px'.

.

The border is now blue and is a dotted line.

.

You can alter the different lines on the border separately. Available lines are border-top, border-bottom, border-left, border-right.

.
The following border types are available (to my knowledge): solid, dotted, dashed, double, groove, ridge, inset, outset, hidden. To use them, write the border type after the px (e.g. [div="border: green 1px inset;"]TEXT[/div].
.

---

[div="border: 1px solid;"]This creates a border around the div.[/div]

[div="border: 3px solid;"]The thickness of the border can be altered by changing the number in front of 'px'.[/div]

[div="border: blue 3px dotted;"]The border is now blue and is a dotted line.[/div]

[div="border-top: black 1px solid; border-bottom: blue 3px dotted; border-left: yellow 2px double; border-right: red 3px dashed;"]You can alter the different lines on the border separately. Available lines are border-top, border-bottom, border-left, border-right.[/div]

---

You can make the div force a space between the border and where the text starts.

.

You can alter the amount of padding for each edge. Available edges are padding-top, padding-bottom, padding-left, padding-right.

.

---

[div="padding: 15px;"]You can make the div force a space between the border and where the text starts.[/div]

[div="padding-left:10px; padding-top: 3px; padding-bottom: 2px; padding-right: 5px;"]You can alter the amount of padding for each edge. Available edges are padding-top, padding-bottom, padding-left, padding-right.[/div]

LESS BASIC THINGS

---

You can alter the width of a div box using either % or px. It is advised that you use %, as not all monitors display px the same. This one is at 50%.

.

---

[div="width:50%;"]You can alter the width of a div box using either % or px. It is advised that you use %, as not all monitors display px the same. This one is at 50%.[/div]

---

You can float divs next to each other, if they're the right width.

This is sometimes unreliable, though.

.
Also, text wraps kinda strangely around them. I tend to use things like [color=transparent].[/color] as padding if it breaks for me.
.

---

[div="width:50%; float:left; background-color:yellow;display: inline-block;"]You can float divs next to each other, if they're the right width.[/div]
[div="width:50%; float:right; background-color:red;display: inline-block;"]This is sometimes unreliable, though.[/div]
Also, text wraps kinda strangely around them. I tend to use things like [color=transparent].[/color] as padding if it breaks for me.[/spoiler]

---

This creates a glow/shadow/blurry fucker around the outside of the div.

.

This does the same but with text.

.
Both box-shadow and text-shadow use 4 values (e.g. 0px 0px 10px red). The first 2 px values are the horizontal and vertical offset- set these to 0 if you want your shadow to be perfectly centred. The last px value is the blur radius- the higher the value, the more blurred the shadow. The final value is the colour. You can use hex or colour names.
.

---

[div="box-shadow: 0px 0px 10px #ff0080;"]This creates a glow/shadow/blurry fucker around the outside of the div.[/div]

[div="text-shadow: 0px 0px 10px #ff0080;"]This does the same but with text.[/div]

---

You can make a gradient as the background! This works with rgba and colour names.

They can go whichever way you please.

For your sake and for mine, please refer to this website (ww3schools) for more information on gradients. There's a lot of stuff there and I don't wanna make this section needlessly long.
.

---

[div="background: linear-gradient(red, orange, yellow, green, blue, purple);"][color=#FFFFFF][b]You can make a gradient as the background! This works with rgba and colour names.[/b][/color][/div]
[div="background: linear-gradient(to right, red, yellow, green);"][color=#FFFFFF][b]They can go whichever way you please.[/b][/color][/div]

---

You can use margins to align a div if you use the width thing as well..

margin-left:auto aligns it right, and vice versa.

.

---

[div="margin:auto;width:50%;"]You can use margins to align a div if you use the width thing as well..[/div]

[div="margin-left:auto;width:50%;"][align=right]margin-left:auto aligns it right, and vice versa.[/align][/div]

---

Using border-radius, you can make your divs have nice rounded corners. Isn't this pretty?

.

---

[div="background-color:#AAFFAA;border-radius:20px;"]Using border-radius, you can make your divs have nice rounded corners. Isn't this pretty?[/div]

---

This is an image with an invert filter.

This is an image with a grayscale filter.

This is an image with brightness and contrast filters.

All the filters you can use are: blur(10px) hue-rotate(90deg) brightness(100%) contrast(100%) grayscale(100%) invert(100%) opacity(100%) saturate(100%) sepia(100%) . Change the thing in brackets to any number you want to decrease the intensity of the filter. You can also combine filters. This affects everything inside the div INCLUDING text and background colours, so be careful.
.

---

[div="filter: invert(100%);"][img]http://wiki.bemanicn.com/images/thumb/d/d8/Nexta_ADV.png/200px-Nexta_ADV.png[/img] [color=#00FF00]This is an image with an invert filter.[/color][/div]

[div="filter: grayscale(100%);"][img]http://wiki.bemanicn.com/images/thumb/d/d8/Nexta_ADV.png/200px-Nexta_ADV.png[/img] This is an image with a grayscale filter.[/div]

[div="filter: contrast(200%) brightness(150%);"][img]http://wiki.bemanicn.com/images/thumb/d/d8/Nexta_ADV.png/200px-Nexta_ADV.png[/img] This is an image with brightness and contrast filters.[/div]

---

Oh boy, this is gonna be a tough one to illustrate.

Do you like this? Do you want to achieve this or something like it? Please, just look at the w3schools guide on blend modes. The mix-blend-mode property will apply to everything inside a div. Text, images, other divs, all of them will be affected.

If you just want the blend mode to apply to a background image, then you could use the background-blend-mode property. Just put two backgrounds in your div and set the blend mode to whatever you want. This method doesn't affect any other content inside the div!

(see?)

---

[div="background-image:linear-gradient(to left, red, blue)"][div="mix-blend-mode:multiply;"]
Do you like this? Do you want to achieve this or something like it? Please, just look at the [url=https://www.w3schools.com/cssref/pr_mix-blend-mode.asp]w3schools guide[/url] on blend modes. The mix-blend-mode property will apply to everything inside a div. Text, images, other divs, all of them will be affected.[/div][/div]

[div="background:linear-gradient(to left, magenta, cyan),url(http://www.zastavki.com/pictures/originals/2014/Space_Planet_in_the_background_galaxy_079310_.jpg);background-blend-mode:lighten;"]If you just want the blend mode to apply to a background image, then you could use the background-blend-mode property. Just put two backgrounds in your div and set the blend mode to whatever you want. This method doesn't affect any other content inside the div![/div]

EXTREMELY LESS BASIC THINGS

---

.
Skew things. Use skew(Xdeg Ydeg) and replace the X and Y with numbers.

.

The rotate thing is equally worrying. Put however many degrees you want in the rotate(?deg) thing.

.
.
.
.

Scale things. Use scale(Xdeg Ydeg) and replace the X and Y with numbers. Negative numbers mean cool mirrored text.

.
.

Matrices combine some of the possible transformation options. The parameters, in order, are: scaleX, skewY, skewX, scaleY, translateX, translateY.

Not going to lie, that's quite frightening.
.

---

[div="transform: skew(10deg, 5deg);"]Skew things. Use skew(Xdeg Ydeg) and replace the X and Y with numbers.[/div]

[div="transform: rotate(180deg);"]The rotate thing is equally worrying. Put however many degrees you want in the rotate(?deg) thing.[/div]

[div="transform: scale(1, 2)"]Scale things. Use scale(Xdeg Ydeg) and replace the X and Y with numbers. Negative numbers mean cool mirrored text.[/div]

[div="transform: matrix(1, 0.1, 0, 1, 0, 0);"]Matrices combine some of the possible transformation options. The parameters, in order, are: scaleX, skewY, skewX, scaleY, translateX, translateY.[/div]

---

This is a scrollbox. You can make this by adding overflow:auto and setting the height to a particular value in px. It only works with height in px, as far as I'm aware. As you can see, you can scroll through the text here, which is pretty cool. What do you mean this is filler? It's not filler... this isn't filler. Definitely not filler. No filler here. Nope.

.

---

[div="height:200px;width:200px;overflow:auto;"]This is a scrollbox. You can make this by adding overflow:auto and setting the height to a particular value in px. It only works with height in px, as far as I'm aware. As you can see, you can scroll through the text here, which is pretty cool. What do you mean this is filler? It's not filler... this isn't filler. Definitely not filler. No filler here. Nope.[/div]

---

You can clip the background to the text by using this code. This background, for example, is a fire gif.

.

---

[div="background-image:url(https://thumbs.gfycat.com/NastyElatedInganue-size_restricted.gif);background-position:top;background-size:100%;-webkit-background-clip: text;color: transparent;"]You can clip the background to the text by using this code. This background, for example, is a fire gif.[/div]

---

These have a ratio of 5:3:1. This one is 5...

3

1!!!

These work with other BBCode/Div code, this is just a very basic example to illustrate.

Flexbox div code: [div="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around;"]
~ Instead of row, you can put row-reverse, column, or column-reverse.
~ Instead of nowrap, you can put wrap or wrap-reverse.
~ Instead of space-around, you can put center, flex-start, flex-end, or space-between.

In a div around each thing, you've got to include flex-grow:X, where X equals how big you want the things in to be in comparison to each other. For example, I wanted it to have a 4:1 ratio, so around the 'About Me' section, I used flex-grow:4, and around the 'My Work' section, I used flex-grow:1.

Check out the much more in-depth guide here!!!

---

[div="display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around;"]
[div="flex-grow:5; background-color:yellow"]These have a ratio of 5:3:1. This one is 5...[/div]

[div="flex-grow:3; background-color:red;color:white"]3[/div]

[div="flex-grow:1; background-color:blue;color:white"]1!!![/div][/div]

---

A

B

C

D

Allows you to make customisable grid things! This is kinda hard to explain in a little preview here, so I highly recommend checking out Illirica's excellent guide on this.

Check it out here!!!

---

[div="display:grid; grid-template-columns: 50px 50px; grid-template-rows: 50px 50px; grid-template-areas: \"TopLeft TopRight\" \"BottomLeft BottomRight\";"]
[div="grid-area:TopLeft;background-color:skyblue;"]A[/div]
[div="grid-area:TopRight;background-color:silver;"]B[/div]
[div="grid-area:BottomLeft;background-color:slategray;"]C[/div]
[div="grid-area:BottomRight;background-color:steelblue;"]D[/div]
[/div]

WEIRD THINGS

---

You can change how the cursor appears when you move the mouse over a div element. You can find the full list of cursor types here...

BUT WHY WOULD YOU WANT TO USE BORING STANDARD CURSORS WHEN YOU CAN IMPORT YOUR OWN FUN ONES??? (This can get finnicky and not want to work sometimes. If all else fails, just copy the code from this post and replace the url with your own image. Doesn't animate gifs.) Small images work best! It gets kinda glitchy when you use big ones.

---

[div="border:1px solid blue;cursor: crosshair;"]You can change how the cursor appears when you move the mouse over a div element. You can find the full list of cursor types here...

[div="cursor: url('https://piskel-imgstore-b.appspot.com/img/91dacad1-f367-11e9-a37b-33a56a54cf05.gif'), auto; border:1px solid red;"]BUT WHY WOULD YOU WANT TO USE BORING STANDARD CURSORS WHEN YOU CAN IMPORT YOUR OWN FUN ONES??? (This can get finnicky and not want to work sometimes. If all else fails, just copy the code from this post and replace the url with your own image. Doesn't animate gifs.) Small images work best! It gets kinda glitchy when you use big ones.[/div]

---

HEY! CLICK IN THE CORNER AND DRAG THIS AROUND TO RESIZE IT!




FUN, RIGHT?


You can hide all sorts of cool stuff in here.


Anyway please listen to No Guts = No Masters by öOoOoOoOoOo





I will take every opportunity I have to share whatever avant-garde metal I've been listening to. Don't test me.






Are you still going?



There's nothing here, dude.








JUST KIDDING




YOU UNLOCKED THE BONUS DUANE

---

[div="resize: both;overflow:auto;background-color:yellow;width:20%;height:150px;"]HEY! CLICK IN THE CORNER AND DRAG THIS AROUND TO RESIZE IT![/div]

[Wint]

YUSSSSS

[Reyn]

I would call that finished.

[Azra]

Adds to favorites to visit regularly lol
You're great <3

[illirica]

Oh my word, hold up right there. You mean I can just...
This is too much. I can't handle this.

[Reyn]

Yeah... it's wild...

[Reyn]

UPDATE: thanks to Annasiel our lord and saviour i added a bit about margins and their general use

[Reyn]

UPDATE: Added border-radius because I can't believe I forgot about it

[Reyn]

UPDATE: Fixed a mistake that will haunt me for the rest of my mortal life, and for about 58% of my immortal one as well.

[Reyn]

UPADTE: Filters!