Div Guide™

Helpful guides and useful links for roleplayers both old and new!
User avatar
Reyn
Community Mod
Posts: 5702
Joined: Sun Jan 22, 2017 10:59 pm
Location: Castle Schrade
Contact:

Div Guide™

Post by Reyn » Tue Aug 28, 2018 3:58 pm

Welcome to the Div Guide! If you're wondering where the old one went, it's right here.

The reason for this update is that I didn't like the arbitrary "difficulty" categories in the old one, and it wasn't quite as comprehensive as I would've liked. This new one splits everything into utility categories instead, so (for example) if you want to do something cool with backgrounds, everything you need for backgrounds is in one section. Items in each category are organised by subjective "difficulty", so don't worry if you can't master everything in a single section at once. Also, there's still a basics section if you're just starting out!

For everything that involves colours, there are 3 recommended options available to you that work for every case here, unless otherwise stated: hex colours (e.g. #FF0000), colour names (e.g. red), and RGBA (e.g. rgba(255, 0, 0, 1.0)). A full list of colour names can be found here (alongside hex values for said colours), for hex I recommend the website color-hex.com (there's a colour picker at the top of the page), and for RGBA there's this tool which should give you what you want.

If you want more resources, check out the Code Resource Masterpost.

THE BASICS

This changes the text colour.
x

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

This changes the background colour.
x

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

This changes the border colour.
x
This changes the border type. Available types are: solid, dotted, dashed, double, groove, ridge, inset, outset, none, hidden.
x
This changes the border size.
x

[div="border:red 1px solid;"]This changes the border colour.[/div]

[div="border:red 1px dashed;"]This changes the border type.[/div]

[div="border:red 3px solid;"]This changes the border size.[/div]

This changes the font. Here is a good list of fonts that work with most devices on RPF.
x

[div="font-family:times new roman;"]This changes the font.[/div]

This adds a space between the edge of the div and the content.
x
You can alter the amount of padding for each edge. Available edges are padding-top, padding-bottom, padding-left, padding-right.
x

[div="padding:2%"]This adds a space between the edge of the div and the content.[/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]

This includes all of the above elements (in different colours, of course). Separate div properties with ;!
x

[div="color:blue; background-color:lime; border:red 1px solid; font-family:times new roman; padding:2%"]This includes all of the above elements (in different colours, of course).[/div]

THE SPECIFICS

TEXT FORMATTING

This changes the text colour.
x

color:red;

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

This changes the font. Here is a good list of fonts that work with most devices on RPF.
x

font-family:times new roman;

[div="font-family:times new roman;"]This changes the font.[/div]

You can change the font style. The options are Normal...
Italic...
And Oblique!
x

font-style: normal | italic | oblique;

[div="font-style: normal;"]You can change the font style. The options are Normal...[/div]
[div="font-style: italic;"]Italic...[/div]
[div="font-style: oblique;"]And Oblique![/div]

This aligns text to the left,
centre,
and right.
You can also justify text, but it requires at least one full line to be noticeable.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque, lectus a tincidunt fringilla, odio augue imperdiet urna, quis placerat sem ante sit amet mi. Integer nec odio nunc. Duis bibendum, nisi a scelerisque tincidunt, lorem turpis cursus lectus, vitae convallis sapien odio vitae velit. Ut nec odio sed eros cursus rutrum. Vivamus euismod, ante at sollicitudin porttitor, elit dolor fringilla nunc, sit amet feugiat mauris risus eu diam. Nam tellus odio, sagittis eu aliquet nec, aliquam ut neque. In sit amet rutrum quam, sollicitudin interdum lorem.
x

text-align: left | center | right | justify;

[div="text-align:left;"]Left.[/div]
[div="text-align:center;"]Centre.[/div]
[div="text-align:right;"]Right.[/div]
[div="text-align:justify;"]Justify.[/div]

You can change the font size. Either as a percentage of the default size...
...Or as a forced size using px!
([size] is better for most applications, though.)
x

font-size:120% | 20px;

[div="font-size:120%;"]You can change the font size. Either as a percentage of the default size...[/div]
[div="font-size:20px;"]...Or as a forced size using px![/div]

This puts a shadow underneath the text. The first value affects the horizontal position of the shadow.
The second value affects the vertical position of the shadow.
The third value affects the blur of the shadow.
You can have multiple text shadows at once.
x

text-shadow:2px 0px 0px lime;

[div="text-shadow:2px 0px 0px red"]This puts a shadow underneath the text. The first value affects the horizontal position of the shadow.[/div]
[div="text-shadow:0px 2px 0px lime"]The second value affects the vertical position of the shadow.[/div]
[div="text-shadow:0px 0px 5px blue"]The third value affects the blur of the shadow.[/div]
[div="text-shadow:2px 0px 2px cyan, 0px 2px 2px yellow, -2px 0px 2px magenta;"]You can have multiple text shadows at once.[/div]

BACKGROUNDS

This changes the background colour.
x

background-color:red;

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

This adds a background image. I recommend changing the text colour as well to ensure legibility across light and dark themes.
x
You can change the position of the background. Available options are word positions (left/right/center top/bottom/center, pick any from the first and any from the second, or just one from either), and percentages (X% Y%).
x
You can change the size of the background too. You can set it to a value in px, a percentage (which will set it to a percentage of the container), cover (which makes it cover the whole container), contain (which makes sure the whole image is visible), or you could set it to two px or % values- the first will set the width, and the second will set the height! 100% is the most useful setting if you're having background issues.
x
The background image tiles (repeats) by both the X and Y axis by default, but you can change this to not repeat at all (no-repeat), repeat only on the X or the Y axis (repeat-x, repeat-y), to repeat as much as possible without clipping (space), or to stretch the image to fit the container size (round). This div is set to no-repeat, but you can only see the effect when the div is pretty large, so...

ARE YOU SICK OF THIS GAG YET?

ARE YOU SICK OF THIS GAG YET?

ARE YOU SICK OF THIS GAG YET?

ARE YOU SICK OF THIS GAG YET?

ARE YOU SICK OF THIS GAG YET?

ARE YOU SICK OF THIS GAG YET?

ARE YOU SICK OF THIS GAG YET?

ARE YOU SICK OF THIS GAG YET?

ARE YOU SICK OF THIS GAG YET?

ARE YOU SICK OF THIS GAG YET?

LOOK, IT DOESN'T TILE!

ARE YOU SICK OF THIS GAG YET?

ARE YOU SICK OF THIS GAG YET?

Ok. I'll stop now. Love you <3
x

background-image:url(https://i.imgur.com/irVSnBo.jpg);
background-position: left|right|center top|bottom|center;
background-position: 10% 10%;
background-size: 100% | 100px | cover | contain | 100% 50% | 100px 50px;
background-repeat: no-repeat | repeat-x | repeat-y | space | round;

[div="background-image:url(https://i.imgur.com/irVSnBo.jpg);color:white;"]This adds a background image. I recommend changing the text colour as well to ensure legibility across light and dark themes.[/div]

[div="background-image:url(https://i.imgur.com/irVSnBo.jpg);background-position:bottom;color:black;"]You can change the position of the background.[/div]

[div="background-image:url(https://i.imgur.com/irVSnBo.jpg);background-size:100%;color:white;"]You can change the size of the background too.[/div]

[div="background-image:url(https://i.imgur.com/irVSnBo.jpg);background-size:100%;background-repeat:no-repeat;color:white;"]Background repeat example.[/div]

You can make a gradient as the background! This works with rgba and colour names- NOT hex.
They can go whichever way you want. You can use words (to top/bottom/left/right), or you can input an angle (e.g. 90deg).
x
For your sake and for mine, please refer to this website for more information on gradients. There's a lot of stuff there and I don't wanna make this section needlessly long.
x

background:linear-gradient(to top | bottom | left | right, cyan, yellow, magenta);
background:linear-gradient(90deg, cyan, yellow, magenta);

[div="background:linear-gradient(cyan, yellow, magenta);color:black;"]Gradient example.[/div]
[div="background: linear-gradient(to left, cyan, yellow, magenta);color:black;"]To left example.[/div]

You can change how the background behaves when you scroll. Ain't that neat? Available options are scroll (default, will scroll with the page), fixed (will stick in place as the page scrolls), and local (will scroll with a scrollbox, more on those later).
x

background-attachment: scroll | fixed | local;

[div="background-image:url(https://i.imgur.com/irVSnBo.jpg);background-attachment:fixed;color:white;"]Background attachment example.[/div]

You can have multiple backgrounds in the same div. They can be colours, images, gradients, whatever Separate them with commas! These multiple backgrounds can have different settings/values for the above properties, separate those with commas as well!
x

background: linear-gradient(to left, cyan, transparent, magenta), url(https://i.imgur.com/irVSnBo.jpg);

[div="background: linear-gradient(to left, cyan, transparent, magenta), url(https://i.imgur.com/irVSnBo.jpg);color:white;"]You can have multiple backgrounds in the same div.[/div]

If you just want a blend mode to only 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! The parameters are the same as mix-blend-mode: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, difference, exclusion, hue, saturation, color, luminosity.
x

background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | difference | exclusion | hue | saturation | color | luminosity;


[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]

BORDERS

This changes the border colour.
x
This changes the border type. Available types are: solid, dotted, dashed, double, groove, ridge, inset, outset, none, hidden.
x
This changes the border size.
x

border:red 1px solid | dotted | dashed | double | groove | ridge | inset | outset | none | hidden;

[div="border:red 1px solid;"]This changes the border colour.[/div]

[div="border:red 1px dashed;"]This changes the border type.[/div]

[div="border:red 3px solid;"]This changes the border size.[/div]

You can set the border to be an image. Y'know, if you want to. This might help.
x

border-image:url(https://media2.giphy.com/media/12CvxNY8J5utEs/giphy.gif) 60 round;

[div="border-image:url(https://media2.giphy.com/media/12CvxNY8J5utEs/giphy.gif) 60 round;border-width:14px;border-style: solid;"]You can set the border to an image.[/div]

Using border-radius, you can make your divs have nice rounded corners. Isn't this pretty?
You can change the radius of each corner individually! The first value is for top left, second is top right, third is bottom right, and fourth is bottom left.
x

border-radius:20px;
border-radius:20px 10px 5px 0px;

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

[div="background-color:#FFAAAA;border-radius:20px 10px 5px 0px;"]You can change the radius of each corner individually! The first value is for top left, second is top right, third is bottom right, and fourth is bottom left.[/div]

Outline is different to border in a few key ways. Firstly, it doesn't affect the total size of an element (e.g. a 1px border would add 1px to the size of the div, whereas an outline doesn't). Secondly, it isn't affected by border-radius, and will always display as a rectangle. Finally, it has a feature that border doesn't: offset. This allows the outline to be drawn separately to the actual boundaries of the container (e.g. a little further out or a little further in), whereas border will always stick to the edges of the container.

You can have an outline and a border in the same div.

Outline properties are: outline-style, outline-color, outline-width, outline-offset. If you want an example of something using this, I used it here to create the inner rectangle.
x

outline-style: solid | dotted | dashed | double | groove | ridge | inset | outset | none | hidden;
outline-color:red;
outline-width:1px;
outline-offset:1px;

[div="outline-style:solid;outline-color:red;outline-width:1px;outline-offset:1px;"]Outline example.[/div]

LAYOUT

This adds a space between the edge of the div and the content. The space can be in % or px.
x
You can alter the amount of padding for each edge. Available edges are padding-top, padding-bottom, padding-left, padding-right.
x

padding:2%;
padding-left:10px;
padding-top: 3px;
padding-bottom: 2px;
padding-right: 5px;

[div="padding:2%;"]This adds a space between the edge of the div and the content.[/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]

You can alter the width of a div using % or px. This one is at 50%.
x

width:50%;

[div="width:50%;"]Width example.[/div]

You can alter the height of a div as well, but you have to use px. You can set a height in %, but only if it's inside another div with a height set in px. (Colour added for illustration purposes.)
x

height:100px;

[div="height:100px;background-color:red;"]Height example.[/div]

Overflow allows you to make a scrollbox! You need to use it in a div that has a defined height, though- otherwise it will just be a normal post. I recommend including overflow: auto every time you set a height in px, in case some monitors don't show all the content. Available parameters are: visible, hidden, scroll, auto.

There's also overflow-x and overflow-y if you want to set the overflow of the X and Y axis separately.

:)
x

overflow: visible| hidden | scroll | auto;

[div="height:100px;overflow:auto;"]Overflow example.[/div]

You can float divs next to each other, if they're the right width.
This is sometimes unreliable with borders, though.
x

float: left | right;

[div="width:50%; float:left; background-color:magenta;color:black;"]You can float divs next to each other, if they're the right width.[/div]
[div="width:50%; float:right; background-color:cyan;color:black;"]This is sometimes unreliable with borders, though.[/div]

You can use margins to align a div if you use the width thing as well..
margin-left:auto aligns it right, and margin-right:auto aligns it left. There's also margin-top and margin-bottom which work the same way. Cool!
x
You can set the margin to: auto, a value in %, or a value in px. You can also include negative values if you want a cool way to break things. Ask illi about that one.
x

margin:auto | 50% | 100px;
margin-left: auto | 50% | 100px;
margin-right: auto | 50% | 100px;
margin-top: auto | 50% | 100px;
margin-bottom: auto | 50% | 100px;

[div="margin:auto;width:50%;"]Margin example.[/div]

[div="margin-left:auto;width:50%;"]Margin left example.[/div]

Position. Okay, cool, where do we start.

Not everything works in RPF. For example, position: sticky doesn't work, for a whole list of reasons that I've completely forgotten. For that reason, this section will only focus on the two parameters I know work fine: relative and absolute.

Relative positions the div relative to it's normal position.

Absolute positions a div relative to the nearest positioned ancestor. If you're using it on its own, it positions the div relative to the post itself. If you use it inside a div containing position: relative, it positions the div relative to that div.

You can alter the position of divs using the following: left, right, top, bottom. Put a value in px or % next to the value you want, and it will put that much space between the div and the relevant direction. For a better explanation, visit this page.

This is what absolute does when placed in a relative div! Very epic! You can also alter which div will appear in which layer by using z-index. Divs with a higher z-index will appear on top of divs with a lower z-index.
x

position:relative | absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
z-index: 69;

[div="position:relative;"]This is an example of position: relative.
[div="background-color:cyan;color:black;position:absolute;top:0px;left:0px;z-index 69;"]And absolute.[/div][/div]

VISUAL EFFECTS

This creates a glow/shadow/blurry thing around the outside of the div. The parameters are the same as text-shadow.
x

box-shadow: 0px 0px 10px #ff0080;

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

You can clip the background to the text by using this code. This background, for example, is a fire gif. Other background code also works with this. Cool!
x

-webkit-background-clip: text;color: transparent;

[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.[/div]

Image This is an image with an invert filter.
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.
x

filter: blur(10px) | hue-rotate(90deg) | brightness(100%) | contrast(100%) | grayscale(100%) | invert(100%) | opacity(100%) | saturate(100%) | sepia(100%);

[div="filter: invert(100%);"]Filter example.[/div]

Image The mix-blend-mode property will apply to everything inside a div, as with filter.
x
Available options are (oh boy here we go): normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, difference, exclusion, hue, saturation, color, luminosity. I don't have the time or space to explain what all of those do. If you want to know, either read up about graphic design tools, or just play around with them.
x

mix-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | difference | exclusion | hue | saturation | color | luminosity;

div="background-image:linear-gradient(to left, red, blue)"][div="mix-blend-mode:multiply;"]Blend mode example. Best seen inside another div with colours or images.[/div][/div]

x
Skew things. Use skew(Xdeg Ydeg) and replace the X and Y with numbers.
x
The rotate thing is equally worrying. Put however many degrees you want in the rotate(?deg) thing.
x
Scale things. Use scale(Xdeg Ydeg) and replace the X and Y with numbers. Negative numbers mean cool mirrored text.
x
x
x
Matrices combine some of the possible transformation options. The parameters, in order, are: scaleX, skewY, skewX, scaleY, translateX, translateY.
x

[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]

FLEXBOX

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.
Maxx[2.0]ine wrote:
Mon Jul 08, 2019 8:36 pm
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!!!
x

[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]

GRIDS

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!!!
x

[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]

MISC

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...
x
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.
x

cursor: crosshair; (I'm not listing all the types here, check the link)
cursor: url('https://piskel-imgstore-b.appspot.com/img/91dacad1-f367-11e9-a37b-33a56a54cf05.gif'), auto;

[div="border:1px solid blue;cursor: crosshair;"]Default cursor example.[/div]

[div="cursor: url('https://i.imgur.com/kULEBy6.png'), auto; border:1px solid red;"]Custom cursor example.[/div]

Resize allows the user to resize the div by dragging the corner! That's cool, right? Try it out!

Awesome!




Keep going!




Almost there!




Are you having fun yet?




What are you searching for?










I think this song is funny :)


















Image

Ok, here's your Duane, you can stop now.





I'm serious.





:(
x

resize: none | both | horizontal | vertical;

[div="resize: both;overflow:auto;background-color:yellow;color:black;width:20%;height:150px;"]Resize example.[/div]

TIPS AND TRICKS

You can set most of the parameters to inherit and it will take the value of whatever div it's inside! Very useful if you're lazy. You can also use it in some other BBCode (more on that later).

When changing the font, you can include multiple fonts in the list! If a viewer's device doesn't have the first font on the list, it will see if it has the second (and so on) and display that instead. A general rule of thumb is to always include the generic term for the font type you want to use at the end of font-family. For example, if you're using Times New Roman, include Serif at the end of your font-family define thing (font-family: times new roman, serif). That way, if the viewer's device doesn't have times new roman, it will still display a serif font and you can retain your aesthetic integrity.

Inherit works in other code as well- most notably spoiler2. If you have a hex colour you want the text in spoiler2 to be and you're sick of having to use colour names, just slap an inherit where the colour name will be and put the whole thing in a div including color: HEX COLOUR HERE, and it should work fine!

Also, align doesn't play nice with background clipping. No idea why.

If your device defaults to quotation marks like this: ” instead of like this: ", that's no good. Div (and other BBCode) only works with ", so you might want to copy paste that if things are going wrong.
Last edited by Reyn on Fri Sep 07, 2018 9:58 pm, edited 13 times in total.

User avatar
Wint
Member+
Posts: 3583
Joined: Mon Jan 23, 2017 5:07 am
Gender: Male
Location: I hope with you.
Contact:

Re: Div Guide™

Post by Wint » Tue Aug 28, 2018 4:15 pm

YUSSSSS
✿ ~ ~ ~ I hope you'll have a blast ~ ~ ~ ✿

User avatar
Reyn
Community Mod
Posts: 5702
Joined: Sun Jan 22, 2017 10:59 pm
Location: Castle Schrade
Contact:

Re: Div Guide™

Post by Reyn » Tue Aug 28, 2018 5:36 pm

I would call that finished.

User avatar
Azra
Bronze
Posts: 1795
Joined: Tue Mar 27, 2018 5:53 pm
Contact:

Re: Div Guide™

Post by Azra » Tue Aug 28, 2018 5:50 pm

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

User avatar
illirica
Sandbox Mod
Posts: 5098
Joined: Sat Mar 24, 2018 4:02 pm
Contact:

Re: Div Guide™

Post by illirica » Tue Aug 28, 2018 7:00 pm

Oh my word, hold up right there. You mean I can just...
This is too much. I can't handle this.
Capacitor
The God-Damned Lightning
Astra
A Manufactured Deity
Prism
Like, Totally Brilliant?
Eternal Flame
Pax City's Phoenix


User avatar
Reyn
Community Mod
Posts: 5702
Joined: Sun Jan 22, 2017 10:59 pm
Location: Castle Schrade
Contact:

Re: Div Guide™

Post by Reyn » Tue Aug 28, 2018 7:03 pm

Yeah... it's wild...

User avatar
Reyn
Community Mod
Posts: 5702
Joined: Sun Jan 22, 2017 10:59 pm
Location: Castle Schrade
Contact:

Re: Div Guide™

Post by Reyn » Thu Aug 30, 2018 7:37 pm

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

User avatar
Reyn
Community Mod
Posts: 5702
Joined: Sun Jan 22, 2017 10:59 pm
Location: Castle Schrade
Contact:

Re: Div Guide™

Post by Reyn » Sat Sep 01, 2018 8:54 pm

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

User avatar
Reyn
Community Mod
Posts: 5702
Joined: Sun Jan 22, 2017 10:59 pm
Location: Castle Schrade
Contact:

Re: Div Guide™

Post by Reyn » Fri Sep 07, 2018 9:59 pm

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.

User avatar
Reyn
Community Mod
Posts: 5702
Joined: Sun Jan 22, 2017 10:59 pm
Location: Castle Schrade
Contact:

Re: Div Guide™

Post by Reyn » Sun Nov 04, 2018 4:21 pm

UPADTE: Filters!

Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest