Fancyposts are named in honor of the code from a long forgotten roleplay site. The fancypost gives you all the customization you could need using CSS parameters! It's a fancy - hah - term to basically say 'make a box!'
BASICS
All codes are made with an opening tag, and a closing tag (usually denoted with a /). When we make fancyposts, or any codes in general, it's SUPER important to make sure that all your tags get closed properly. If they aren't, things will break immediately and often in soul-crushing ways, so when coding, it's a great idea to start right away by putting in all the closing tags. With that disclaimer out of the way, let's look at a fancypost.
[fancypost=WIDTH%; margin:auto;] Text goes here! [/fancypost]
This is the most basic box you can make. A fancypost must have a width put in place. On Purrgatory, this is defined with a PERCENTAGE WIDTH. This can be any number from 1%-100%. What this does is says, "Take up
THIS PERCENT of the available screen." This means anything you make in a fancypost box will also adjust to mobile screens and devices with different screen sizes.
The semi-colon ; you see at the end of that code says, 'I'm done with this code and ready for the next.'
Fancyposts will not be automatically centered. In order to center them, we add a
margin:auto into our template. It is VERY important that this margin goes at the beginning of your template, or any margins you use afterwards
will not work. You can choose not to have your template be centered (it will default to a left-align), by removing that code.
If you do not set a height for your fancypost, it will default to
stretch with the amount of text that is in it. This is usually the easiest way. However, there are some exceptions for times when you might want a set height. To do this, it's as simple as adding,
height:AMOUNTpx
CSS
The codes we have been using so far are part of a coding language called CSS. We are using a simplified version of CSS to make our codes - meaning we're just using the code snippets to make things happen. The list is almost endless, and I won't be going over
every single code in existence for that reason, but I do want to show off what a full (simple) fancypost code
could look like.
One example of a full fancypost code might look like this:
[fancypost=60%; margin:auto; text-align:justify; font-family:indie flower; color:pink; border-bottom:3px solid pink;]text here[/fancypost]
Which will produce:
text here
You can also put fancyposts
in fancyposts to expand the things you are able to do with them. Here's another example.
[fancypost=60%; margin: auto; border:2px solid mediumseagreen; padding:10px;][fancypost=100%; margin: auto; border:2px solid aqua;]text here[/fancypost][/fancypost]
Which will produce:
One thing to be aware of in this example is our WIDTH%. In a single box fancypost, as discussed before, this width% is the same thing as saying, "Take up this % of the available screen."
However, once you start adding more fancyposts into eachother, that line of thinking changes. That second box, and any box sequentially after that, will work under the logic, "Take up this percentage of the available BOX." So if your first box is 100%, your second box set at a 50% width would take up HALF that space.
Hopefully that wasn't too much information all at once. Honestly, once you understand the foundations of a fancypost, putting codes into place and trying things out just comes down to a matter of practice! With the crash course out of the way, let's go look at some of the codes that you can use to make your fancyposts, fancy.
