Hi hi hi guess who got the div guide back <3
Spoilers aren't super obvious on the new site, but this works the same- click on each item to bring up a code demonstration. I've tried to include the code below each of the entries (except in basics), but I couldn't do it in full because of the weird way the new site deals with the code block tag. If you want the full code (square brackets and all), quote this post and ctrl+f to find what you're looking for. I might post this in a code block underneath this post as well. Also, don't worry- you don't need to know or use all of these things in order to make a cool-looking post.
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)).
Have fun and let me know if anything breaks <3
[font size="5"]
THE BASICS[/CODE]
{Text Colour}
This changes the text colour.
{Background Colour}
This changes the background colour.
{Border Basics}
This changes the border colour.
This changes the border type. Available types are: solid, dotted, dashed, double, groove, ridge, inset, outset, none, hidden.
This changes the border size.
{Font}
This changes the font.
Here is a good list of fonts that work with most devices on RPF.
{Padding}
This adds a space between the edge of the div and the content.
You can alter the amount of padding for each edge. Available edges are padding-top, padding-bottom, padding-left, and padding-right.
{Combining Div Properties}
This includes all of the above elements (in different colours, of course). Separate div properties with ;!
[font size="5"]
THE SPECIFICS[/CODE]
[font size="4"]
TEXT FORMATTING[/CODE]
{Text Colour}
This changes the text colour.
Code:
color: red | #ff0000 | rgba(255, 0, 0, 1.0);
{Font}
This changes the font. Works with system fonts as usual, as well as generics (serif, sans-serif, monospace, cursive), and anything
[font face="Orbitron"]here[/CODE]. If it's not working, try putting the font name in quotes ('like this').
{Font Style}
You can change the font style. The options are Normal...
Italic...
And Oblique!
Code:
font-style: normal | italic | obliquel
{Text Align}
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.
{At least one full line}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.
Code:
text-align: left | center | right | justify;
{Font Size}
You can change the font size. Either as a percentage of the default size...
...Or as a forced size using px!
{Letter Spacing}Letter-spacing can be used to increase or decrease the size between individual letters. The options are
normal - the spacing between the characters is normal,
px - the spacing between letters is based on pixel values, or
em - the spacing remains relative to the font size.
Code:
letter-spacing:1.2em | 3px;
{Text Shadow}
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.
Code:
text-shadow:2px 0px 0px lime;
[font size="4"]
BACKGROUNDS[/CODE]
{Background Colour}
This changes the background colour.
{Background Image}
This adds a background image. I recommend changing the text colour as well to ensure legibility across light and dark themes.
Code:
background-image:url(https://i.imgur.com/irVSnBo.jpg);
{Background Image (Continued)}
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%).
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.
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...
{EXPAND DIV}im sorry this example used to work pretty well on the old site back when it was narrower
it kinda doesnt really anymore
trust me this genuinely does work
Code:
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;
{Background Gradient}
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).
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.
Code:
background:linear-gradient(to top | bottom | left | right, cyan, yellow, magenta);
background:linear-gradient(90deg, cyan, yellow, magenta);
{Background Attachment}
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), local (will scroll with a scrollbox), and sticky (will stick in place on a scrollbox, but scroll with the page? Does that make sense?).
Code:
background-attachment: scroll | fixed | local | sticky;
{Multiple Backgrounds}
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!
Code:
background: linear-gradient(to left, cyan, transparent, magenta), url(https://i.imgur.com/irVSnBo.jpg);
{Background Blend Mode}
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.
Code:
background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | difference | exclusion | hue | saturation | color | luminosity;
[font size="4"]
BORDERS[/CODE]
{Border Basics}
This changes the border colour.
This changes the border type. Available types are: solid, dotted, dashed, double, groove, ridge, inset, outset, none, hidden.
This changes the border size.
Code:
border:red 1px solid | dotted | dashed | double | groove | ridge | inset | outset | none | hidden;
{Border Image}
You can set the border to be an image. Y'know, if you want to.
This might help.
Code:
border-image:url(https://media2.giphy.com/media/12CvxNY8J5utEs/giphy.gif) 60 round;border-width:14px;border-style: solid;
{Border Radius}
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.
Code:
border-radius:20px;
border-radius:20px 10px 5px 0px;
{Outline}
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.
Code:
outline-style: solid | dotted | dashed | double | groove | ridge | inset | outset | none | hidden;
outline-color:red;
outline-width:1px;
outline-offset:1px;
[font size="4"]
LAYOUT[/CODE]
{Padding}
This adds a space between the edge of the div and the content. The space can be in % or px.
You can alter the amount of padding for each edge. Available edges are padding-top, padding-bottom, padding-left, padding-right.
Code:
padding:2%;
padding-left:10px;
padding-top: 3px;
padding-bottom: 2px;
padding-right: 5px;
{Width}
You can alter the width of a div using % or px. This one is at 50%.
{Height}
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.)
{Overflow (Scrollbox)}
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.
:)
Code:
overflow: visible| hidden | scroll | auto;
{Float}
You can float divs next to each other, if they're the right width.
This is sometimes unreliable with borders, though.
{Margin}
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!
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.
Code:
margin:auto | 50% | 100px;
margin-left: auto | 50% | 100px;
margin-right: auto | 50% | 100px;
margin-top: auto | 50% | 100px;
margin-bottom: auto | 50% | 100px;
{Position}
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.
{Example of absolute positioning}
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.
Code:
position:relative | absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
z-index: 69;
{Columns}
This is a little weird. You can divide the content of any single div into a set number of columns by using this, without having to put it in separate divs for each column. As far as I'm aware, there's no way to determine exactly which part of the content goes into which column, so it might not be a good idea to use it if you want to have sections with headers, but if you just want to split a few paragraphs into columns, then this is useful. Column-count determines the number of columns, column-gap determines the padding each column has, and column-rule adds a line between each column which can be edited like a border can.
Code:
column-count: 3
column-gap: 1px | 1%
column-rule: 1px solid red;
[font size="4"]
VISUAL EFFECTS[/CODE]
{Box Shadow}
This creates a glow/shadow/blurry thing around the outside of the div. The parameters are the same as text-shadow.
{Code}box-shadow: 0px 0px 10px #ff0080;
This creates a glow/shadow/blurry thing around the outside of the div.
{Background Clipping}
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!
Code:
-webkit-background-clip: text;color: transparent;
{Filters}
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.
Code:
filter: blur(10px) | hue-rotate(90deg) | brightness(100%) | contrast(100%) | grayscale(100%) | invert(100%) | opacity(100%) | saturate(100%) | sepia(100%);
{Blend Mode}
[width=50]
[/width] The mix-blend-mode property will apply to everything inside a div, as with filter.
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.
Code:
mix-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | difference | exclusion | hue | saturation | color | luminosity;
{Transform}
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.
Code:
transform: skew(10deg, 5deg);
transform: rotate(180deg);
transform: scale(1, 2)
transform: matrix(1, 0.1, 0, 1, 0, 0);
[font size="4"]
FLEX[/CODE]
{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.
Flexbox div code: {div}{attr="style","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.
Replace {} with []. Credit to
Maxx for the guide above. Also, don't ask me about this, I don't know how it works. Illirica might tell you, if you give her $500 and your soul.
Code:
display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around;
flex-grow:5;
[font size="4"]
GRIDS[/CODE]
{Grids}
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!!!
Code:
display:grid; grid-template-columns: 50px 50px; grid-template-rows: 50px 50px; grid-template-areas: 'TopLeft TopRight' 'BottomLeft BottomRight'
grid-area:TopLeft;
grid-area:TopRight;
grid-area:BottomLeft;
grid-area:BottomRight;
{Place-Items}
This is another one I can't explain in full here, so I'll link to
this guide on all the parameters involved in this function. Keep in mind that not everything has been tested to work on RPF.
The way I use place-items is as a fun little life hack to vertically centre items. For example, if I have an image and a paragraph of text next to it, and I want the image to be aligned with the centre of the text box (and vice versa), I make a grid with a column for each and slap a place-items: center in there.
You can use it on a single div as well, but you'll have to add a
inside, otherwise it does weird things. Drag the corner of this box to resize it and see how the text stays in the middle!
Code:
display: grid; place-items: center; resize: vertical; overflow: auto;border:1px solid red;
display: inline;
[font size="4"]
MISC[/CODE]
{Cursors}
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.
Code:
cursor: crosshair; (I'm not listing all the types here, check the link)
cursor: url('https://i.imgur.com/kULEBy6.png'), auto;
{Resize (Dragbox)}
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?
[youtube=vDMwDT6BhhE]
I think this song is funny :)
Ok, here's your Duane, you can stop now.
I'm serious.
:(
Code:
resize: none | both | horizontal | vertical;
[font size="5"]
TIPS AND TRICKS[/CODE]
{New Site Changes}The new site is weird! Post width is not standardised! Your code might not look the same across different devices. Also, grids use ' instead of \"
{Attr vs Div Style}Div Style allows you to do far less than Attr, but everything in it will work on the standard mobile theme. Some functions (e.g. grids) won't work with Div Style, but will with Attr.
{Preview}The preview window is dumb and doesn't show div correctly, especially if you're using Attr. I recommend having a post in a test thread you can edit and use that as a sort of makeshift preview window.
{Spellings}Div, like all CSS these days, uses the American spellings of words like "Color" and "Center"- so, if you usually spell those words
properly differently like I do, then make sure you put on your little American hat when you write your code.
{Inherit}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).
{Fallback Fonts}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.
{Quotation Marks}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. Same goes for grids.
