Reyn's Big Test House of Fun
- Reyn
- Community Mod
- Posts: 5860
- Joined: Sun Jan 22, 2017 10:59 pm
- Location: Mechonis
- Contact:
Re: Reyn's Big Test House of Fun
list of things to do so I wont for get
- post
- finish machina like... sometime soon would be nice >:/
- update div guide because its outdated and cringe and I dont like the arbitrary categories (and theyre also? false?)
- post
- finish machina like... sometime soon would be nice >:/
- update div guide because its outdated and cringe and I dont like the arbitrary categories (and theyre also? false?)
<< BBCode Guide | Div Guide | Resource List >>
- Reyn
- Community Mod
- Posts: 5860
- Joined: Sun Jan 22, 2017 10:59 pm
- Location: Mechonis
- Contact:
Re: Reyn's Big Test House of Fun
Reyn's Big Test Garden of Flowers...
Alvis div! We love flowers here in the test house, right? RIGHT?
"Since I can't beam posts directly to your brain yet, this will have to suffice."
<< BBCode Guide | Div Guide | Resource List >>
- Reyn
- Community Mod
- Posts: 5860
- Joined: Sun Jan 22, 2017 10:59 pm
- Location: Mechonis
- Contact:
Re: Reyn's Big Test House of Fun
OLD DIV GUIDE :)
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
What can I do with them?
All of the below (and more!). You can combine them as well.
BASIC THINGS
LESS BASIC THINGS
EXTREMELY LESS BASIC THINGS
WEIRD THINGS
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 (and more!). You can combine them as well.
BASIC THINGS
LESS BASIC THINGS
EXTREMELY LESS BASIC THINGS
WEIRD THINGS
<< BBCode Guide | Div Guide | Resource List >>
- Reyn
- Community Mod
- Posts: 5860
- Joined: Sun Jan 22, 2017 10:59 pm
- Location: Mechonis
- Contact:
Re: Reyn's Big Test House of Fun
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.
If you want more resources, check out the Code Resource Masterpost.
THE BASICS
THE SPECIFICS
TEXT FORMATTING
BACKGROUNDS
BORDERS
LAYOUT
VISUAL EFFECTS
FLEXBOX
GRIDS
MISC
TIPS AND TRICKS
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
THE SPECIFICS
TEXT FORMATTING
BACKGROUNDS
BORDERS
LAYOUT
VISUAL EFFECTS
FLEXBOX
GRIDS
MISC
TIPS AND TRICKS
<< BBCode Guide | Div Guide | Resource List >>
- Reyn
- Community Mod
- Posts: 5860
- Joined: Sun Jan 22, 2017 10:59 pm
- Location: Mechonis
- Contact:
Re: Reyn's Big Test House of Fun
s
c
r
e
a
m
s
c
r
e
a
m
s
c
r
e
a
m
c
r
e
a
m
s
c
r
e
a
m
s
c
r
e
a
m
s
c
r
e
a
m
s
c
r
e
a
m
s
c
r
e
a
m
c
r
e
a
m
s
c
r
e
a
m
s
c
r
e
a
m
<< BBCode Guide | Div Guide | Resource List >>
- Reyn
- Community Mod
- Posts: 5860
- Joined: Sun Jan 22, 2017 10:59 pm
- Location: Mechonis
- Contact:
Re: Reyn's Big Test House of Fun
test.
spacertest
t
e
s
t
e
s
t
sick!
<< BBCode Guide | Div Guide | Resource List >>
- Reyn
- Community Mod
- Posts: 5860
- Joined: Sun Jan 22, 2017 10:59 pm
- Location: Mechonis
- Contact:
Re: Reyn's Big Test House of Fun
this is an epic post just to test something fun out
<< BBCode Guide | Div Guide | Resource List >>
- Reyn
- Community Mod
- Posts: 5860
- Joined: Sun Jan 22, 2017 10:59 pm
- Location: Mechonis
- Contact:
-
- Newbie
- Posts: 5
- Joined: Wed Sep 19, 2018 1:32 pm
- Contact:
-
- Newbie
- Posts: 5
- Joined: Wed Sep 19, 2018 1:32 pm
- Contact:
Who is online
Users browsing this forum: No registered users and 1 guest