Post by maysen on Dec 10, 2016 22:17:04 GMT
So for some reason the H1 tag isn't working, and the <font> tag isn't working either, so the titles are regular sized. I'll fix this when I have time XD
What makes up a fancypost?
You may not know this already, but fancyposts consist of HTML coding which is used to create an appearance of a web page. Every browser already has HTML...well 'installed' so all you need to do is type them in and viola!
Now, first of all some fancypost coders actually rip parts of another fancypost and use it and not understand what they're doing. In this lesson I'll be explaining what a HTML syntax or style tags (CSS) are as well as provide you a reference of all of them that I can think at the top of my head. And hopefully by the time I'm done with this you'll be able to type up a fancypost from scratch rather than taking another and using/modifying it.
property:description;
border:transparent;
border-top:solid 1px 111;
text-align:center;
Those things above are referred as HTML syntax or style tags for short. So throughout these lessons we'll refer them as style tags.
Now, the property part is where you would put any part of the fancypost. For example, border, text, background, etc. and the description part is what you want that property to do or be. For example, center, 12px, bold, etc. You may find this a bit confusing, but if you get the general idea of what a style tag is then you're good to go.
How do you create a fancypost?
In this case every fancypost starts off like the code below.
[div style="FANCYPOST CODE HERE"] text [/div]You will then add tags into the 'style' section like so~
[div style="background-color: black;"] text [/div]The part where it says "background-color: black;" is a start style tag. Basically it begins the styling, "background" means background (obviously), so the property of the style tag is background-color (the background's color) and the description is "black," so you are commanding the background color of the fancypost to be the color black.
And then you will throw in whatever style tags you want to produce the fancypost you were/are planning.
What to do?
Stuck as to how to create one in general?
Just typing in the style tags won't get you the fancypost you want.
Alright, so now that you know how to make a basic fancypost with a starting style tag you will now add onto it. For every style tag it starts with a property and ends with a semi-colon to seperate and list out the commands you want.
[div style="background-color: #000000; border: 2px; font: georgia; font-size: 3px;"] text [/div]If this is still confusing, I'll color-highlight each tag for you.
---
background-color: #000000; border: 2px; font: georgia; font-size: 3px;
---
When it comes to colors in a style tag, you can use the 'name' or the 'hex code'. A hex color code is basically made up of the number sign (hashtag) and six digits. Don't worry, there are tons of sites out there that provides you with hex color codes like so: #333333, #444444, #555555, etc.
Things you should look for~
• The fancypost must always have an opening and closing bracket:
[div style=""] [/div]• The HTML/CSS must always be inside quotation marks.
• You must close the entire fancypost with a blackslash div to tell the browser to stop making the HTML true.
• Always put a semi-color [;] after the description.
The Do's & Don't's?
When Using Colors...
Don't overdo it please? A lot of fancypost makers just clash awful colors together, or don't even try to set them up nicely so it doesn't hurt the reader's eyes. Of course if it's your first time using hex codes you'll be intimidated by how 6 random digits equate to an essential color which is why I'll be providing you a resource to get these magical and mysterious number sets! Just go to TekTek and choose the obvious one that talks about gradients. Of course there are numerous shades of colors you can use instead of plain primary colors, secondary colors, etc. like red, black, blue, navy, brown, white, etc.
Formatting Text
OK, so I've seen this quite a lot lately but no one wants to read very very small text. Make it at least a reasonable size and please don't go messing with line heights when the font is...small. It will totally ruin the eyes and that won't be good now. You can use small fonts or sizes just as long as it's possible to read.
The most common used font for websites is verdana without a doubt. It's easy to read, the right size, and just the basic text for any rp site. There are popular fonts like Gothic Century, Georgia (I'm using it right now), Trebuchet MS, Courier New, Raavi, etc.
Leveling/Justify
Don't ever ever ever ever forget to add the justify tag to your fancyposts. It helps make your text look clean...seriously.
Summary
Fancyposts are like candies...if they don't look good then no one would want to "taste" them. Always use a test thread to test your fancyposts or keep a log of fancyposts to keep track of them all.
Make Default Fancypost
Go to Edit Profile>>Settings>>Default BBcode and paste your fancypost there, so it will be usable in Quick Reply.
Brief list of CSS Style Tags
height: #px;
controls the horizontal length of the fancypost.
width: #px;
controls the vertical length of the fancypost.
background-color: HEXCODE;
controls the background color of the fancypost.
background-image: url(URL LINK);
instead of having a plain background you can always use an image.
background-position: POSITION;
Determines where your element's background is positioned. Can be a combination of 'left', 'right', and 'center' with 'top', 'bottom', and 'center'. Can also be set with %.
background-repeat: no-repeat;
To prevent background images from repeating itself in the fancypost. If you do want it to repeat itself replace "no-repeat" to "repeat."
cursor: url(LINK HERE), auto;
To have a different cursor appear when the mouse hovers over the fancypost.
border: TYPE #px HEXCODE;
There are at least 8 TYPES of borders and they are solid, dashed, dotted, double, groove, ridge, inset, and last but not least outset. The border will be the outline of your fancypost.
border-radius: #px;
The border radius helps curve the corners of your fancypost and use the one below if you want ALL of the corners to be curved to your liking.
border-radius: #px #px #px #px;
The first #px is the top left, second is the top right, third is the bottom right, and fourth is the bottom left. Use this border-radius style tag when you want to curve individual corners of the fancypost.
box-shadow: #px #px #px HEXCODE;
Used to cast a shadow behind your element. Is formatted as: "0px 0px 0px #000000". The series is: horizontal shadow setting, vertical shadow setting, blur (optional), and color (optional).
margin: #px;
This adds or subtracts pixels from the area around your fancypost. You can also do margin-left: #px; or margin-right: #px;.
padding: #px;
This is like the margin style tag only it does it INSIDE of the fancypost. Using the padding style tag will change your width settings, so keep an eye out for that.
font-size: #px;
Changes the font size within the fancypost.
font-weight: bold;
This makes the font bold within the fancypost.
font-style: italic;
This makes the font italic within the fancypost.
font-family: FONT NAME;
This changes the font text within the fancypost.
color: HEXCODE;
This changes the text's colour, DO NOT put font-color: HEXCODE; it is incorrect.
letter-spacing: #px;
This defines amount of space between each letter, another use to prettify titles or important words.
line-height: #px;
Determines the size of the line of text, if it's smaller than the text it will overlap vertically. If it's bigger than the text it will SPREAD OUT vertically.
text-align: TYPE;
There are four types, left, right, center, and justify that you can use to align your text.
text-transform: TYPE;
There are three types, uppercase, lowercase, and capitalize. Uppercase makes every word in the fancypost uppercase and vice verse with lowercase. Capitalize makes every first letter in each word uppercase.
overflow: TYPE;
There are two types, hidden and auto. Hidden hides all the extra stuff and auto creates a scrollie.
text-shadow: #px #px #px HEXCODE;
The first #px controls the width, second controls the height, the third controls the blur radius. The hexcode is the color of the shadow!
opacity: 0.0;
Determines the transparency of your element. It is set on a point scale. '1.0' is solid, '0.0' is invisible.
This Guide was created by Mason | Special Thanks to Bexxy!
