CODING 101 || a guide to the site's new coding

a long overdue guide to the new coding after the update! thought i'd make this since the old guides are mostly outdated now,,, i am by no means an expert on coding but i have been coding on ff for a while now, so if you need any extra help or have any questions you can just post on this thread or pm me!

so, a lot of people seem to be finding it hard to understand the new coding. however if you understood the old coding then it really isn't too different at all. if you didn't get any of the old coding whatsoever than that's fine too cx

fancyposts are pieces of coding which allow you to essentially customise boxes of text. yup, a fancypost is basically just a customisable box which you can put customisable text in. you place multiple fancyposts together to create a more elaborate looking overall posting template.

fancypost coding is essentially a combination of bbcode, html and limited css. these terms probably sound scary but don't worry, you don't need to know too much about them at all, only that they are different coding languages. essentially, on the surface we type in bbcode with fancypost tags ([fancypost][/fancypost]) and apply css to them. whilst the site stores it as html (hence why there is an html mode to the editor).

now fancyposts involve visible coding that you'll have to type yourself, rather than just clicking a few buttons to do the editing for you. when coding fancyposts you'll want to be on the bbcode editor mode of the reply box. the html editor (the one you don't want to be using) will use the typewriter font and it's coding will use arrow brackets (<>). if you are in this editor you can easily switch back to the other one by clicking on the button on the top left corner of the reply box (it looks like a sheet of paper with </> on it and with it's top right corner folded).

before i begin with the actual coding please note that you should not steal other people's coding. there are plenty of premade template threads where people have spent time and effort making fancyposts that others can freely use. if you use one of these follow the rules posted by the owner on their thread. copying a code is still plagiarism, and though the site no longer views it as a rule break it is still technically illegal and a bad thing to do.

the basic skeleton of a fancypost is

as you can see by the code, fancyposts are made of fancypost tags and css rules.

the fancypost tags are bbcode, and you can tell this as it uses square brackets ([]). when coding fancyposts (and using any bbcode) you should also always remember to end your tags. tags are composed of two parts: the first part in square brackets ([tag]) and the last part in square brackets but with a slash before the word ([/tag]). if you do not end your tags (e.g. you put only [fancypost]text rather than [fancypost]text[/fancypost]) the coding that the tags is supposed to do will not work.

the part that says 'css rules go here' is where the bits of code that actually customise the box or text goes. the code you use here is called css, and what this does is customise your fancypost.

when it comes to css rules they are made of two parts: property name:value. the property name part will tell you what that css rule does/affects whilst the value is the customisable bit that actually shows. taking background:red for example, the name 'background' tells you that this will affect the background of the fancypost, whilst the value assigned to it, 'red', tells you that the background of the fancypost will be red.

the css rules that you can apply to fancyposts will be listed below in other posts.

another important thing you need to do is to seperate each css rule by using a semicolon (;). so it would be like [fancypost='coding:bit; cssrule:here; etc:andsoon;']think of it like listing the different css rules, only using a semicolon instead of a comma.

in addition you do not need to list any css rules that you do not want, unlike the old coding. e.g. you would've had to put things like border:none; background:transparent; in the old coding if you didn't want a background or border, but now you can leave out any unneeded components that you don't want.

finally, the text that you want to put in the box goes in between the two fancypost tags ([fancypost]text goes here[/fancypost]). however if you do not want text in that box you can omit that and leave it blank.

key:

css rule | code

what this does

- explanations and notes

words in CAPS are the values that you will need to change

background colour | background:#COLOR

this is to change the background of the fancypost.

- you can use either a named colour (e.g. purple, firebrickred) or a colour code (eg #ffffff, #121212) here

border design | border: NOpx STYLE #COLOR

this is to change the border of the fancypost.

- the number px is how thick the border is in pixels

- the color is the color of the border, and again you can used either a named colour or a colour code

- the style is the style of the border. styles you can use are:

- if you want to change the design of one side of the fancypost in particular you can add the side to the code (so instead of just 'border' you can put 'border-right'), 'border-left', 'border-top', or 'border-bottom')

width | width:NO%

this changes the width of the fancypost.

- the width percentage is what percentage of the screen it will take up horizontally. because of this fancyposts may look wide on a computer moniter but narrow on a mobile screen. therefore because of this and the inability to use px it is recommended that you use 70% or higher when it comes to the width of your fancypost, so mobile users can read the text as well.

- if you put a fancypost (f2) inside of another fancypost (f1) the percentage width of the second fancypost (f2) will be determined by the width of the 'parent' fancypost (f1) rather than the width of your moniter screen. e.g. the parent fancypost may be 80% in width so takes up 80% of the screen's width, but if you make the second fancypost inside it (f2) 80% it will not be 80% of the width of the screen, but rather 80% of the width of the parent fancypost.

height | height:NOpx

this changes the height of the fancypost.

- give it's height a value if you want a box that does not expand

- however if you want the fancypost to expand then leave this out and it will automatically expand

- however fancyposts now have a height limit of 1000px, so even if you leave out the height so the fancypost can expand it will turn into a scrollie when it hits 1000px in height

image background | background:url(IMG URL) or background-image:url(IMG URL)

this changes the background of the fancypost to an image.

- to get the url of an image, right click on the image and there should be an option to 'copy image address'. click on this and then the url will be copied

- both of these codes work so you can use either

image background size | background-size:NO% or background-size:cover

this is how enlarged your background image will be in relation to the size of the fancypost.

- so if you were to have an image much larger than your fancypost and not set a background size, it would only display the top left segment of the image that is the size of the fancypost

- if you set it to 100% the image will fit into the fancypost. therefore if when scaled down it isn't precisely the size of the fancypost it can repeat itself

- if you set it to <100% it will become smaller than the fancypost and repeat itself

- if you set it to >100% it will become larger than the fancypost. depending on the dimensions of the image and fancypost the image could posibly repeat itself as well

- if you set it to cover rather than a percentage, the image will be scaled down (or up) so at least one of it's dimensions (the width or height) matches one of the dimensions of the fancypost. with cover there will be no repeats of the image

image background position | background-position:POSITION or background:url(IMG URL)POSITION

this changes the position of the background image. the position is basically which part of the image is displayed centrally in the fancypost

- you can use either code as they both work

- you can specify the position using top, center, bottom and then left, center, right. so if you want the top left corner put top left, or if you want the center right segment put center right

- if you just put top, center or bottom it will do the center of them (so top=top center, center=center center, bottom=bottom center)

centering fancyposts | margin:auto

this makes sure that the fancypost is in the centre of the post (not the page since our posts only take up a certain amount of the page from the right), otherwise it will be on the left of the post.

- with the old coding you would put center tags around the fancypost codes but now you need to add margin:auto to the code of the fancypost that you want to centre

- you do not need to add center tags, just put margin:auto. if you add center tags all it will do is center your text.

fancypost opacity | opacity:NO

this changes the opacity of your fancypost (level of how opaque/translucent it is)

- the number opacity is how opaque your fancypost (background) is

- it is a number between 0 and 1, the closer the number is to 1 the more opaque it will be

- if you want your fancypost to be fully opaque you can leave this code out

- also you shouldn't set the opacity to 0, since that would make it invisible/transparent

- also note that the opacity will affect both the fancypost (background) and the text in the fancypost

rounding fancypost corners | border-radius:NOpx; or border-radius:NOpx NOpx NOpx NOpx;

this changes how rounded the fancypost corners are.

- the first code will round all of the corners equally to what you set it so (e.g. if set to 20px all corners will be rounded to 20px)

- the second code allows you to customise each corner. it goes clockwise in order from the top left corner, so the first number would be for the top left corner, the second number would be for the top right corner, etc.

scrolling | overflow:auto

this will make the fancypost automatically become a scrollie if the text exceeds the height set.

- however even without it the fancypost will automatically become a scrollie if needed.

- unfortunately hidden scrollies no longer work

no scrolling | overflow:none

this will make sure that the fancypost does not scroll

- use this if you're having troubles with text scrolling despite being in a large enough fancypost

padding | padding:NOpx

this changes the padding of the fancypost.

- padding is like extra pixels added to a fancypost (think of it like padding you add to a mattress or something

- all fancyposts' padding is set to 0px by default

- it's useful to add padding to fancyposts with a background and text as adding padding means there is more space between the text and the edge of the fancypost, as shown in the example below

- if you only want to add padding to one side of the fancypost just add -SIDE to the padding part of the code. i.e. padding-top:NOpx, padding-bottom:NOpx, padding-left:NOpx or padding-right:NOpx

margins | margin-SIDE:NOpx

this changes the margins of your fancypost, and this is how close or far your fancypost is to the top, bottom, left or right.

- a positive number will push your fancypost in the opposite direction of the margin whereas a negative number will pull whatever's on that margin closer to your fancypost

- for whichever side margin you want to move your fancypost closer to or further away, replace SIDE with the side, so it would be margin-left:NOpx for the left side, margin-right:NOpx for the right side, margin-top:NOpx for the top side and margin-bottom:NOpx for the bottom side

floats | float:POSITION

this allows your fancypost to 'float' to the side of another fancypost.

- the positions are left or right

- the way to code this is to have a parent fancypost which contains the text. inside the parent fancypost you would put the fancypost that you want to float, then write the text after the float fancypost. remember to close the float fancypost tag inside of the parent fancypost and outside of the text (so it would be [parent fancypost][float fancypost][/float fancypost]text here[/parent fancypost])

fancypost shadow | box-shadow:NO(WIDTH)px NO(HEIGHT)px NO(BLUR)px NO(OPACITY)px #COLOR

this adds and changes the shadows of the fancypost.

- for the NO(WIDTH) a positive number pulls it farther to the right, while a negative pushes it to the left

- for the NO(HEIGHT) a positive number pulls it down, while a negative pushes it up

- the NO(BLUR) affects how soft or hard the shadow is on the edges. the larger the number the softer it is

- the NO(OPACITY) affects the opacity/opaqueness of the shadow. this is a whole number rather than a decimal like the opacity code. the higher the number the more opaque it will be

- for multiple fancypost shadows add a comma and another 'NO(WIDTH)px NO(HEIGHT)px NO(BLUR)px NO(OPACITY)px #COLOR' (so the code for two shadows would be box-shadow:NO(WIDTH)px NO(HEIGHT)px NO(BLUR)px NO(OPACITY)px #COLOR, NO(WIDTH)px NO(HEIGHT)px NO(BLUR)px NO(OPACITY)px #COLOR etc.)

key:

css rule | code

what this does

- explanations and notes

words in CAPS are the values that you will need to change

text color | color:#COLOR

this changes the colour of the text in the fancypost.

- again you can put either a named color or a code here

text font | font-family:FONT

this changes the font of the text in the fancypost.

- for multiple worded fonts such as times new roman you can put it like that or condense it into one word (timesnewroman), either way works. though note that some fonts don't work on certain devices, so i'd say to stick to the common ones like verdana, georgia, etc.

text size | font-size:SIZEpt

this changes the size of the text in the fancypost.

- you can also use px, which is slightly smaller than pt (e.g. 10px would be a bit smaller than 10pt)

- as a note if it doesn't work just put [size=NUMBER][/size] outside of the fancypost code and around the text itself instead ([fancypost][size=NUMBER]text[/size][/fancypost])

text align | text-align:ALIGN

this changes the alignment of the text in the fancypost.

- you can put right, left, center or justify here

spacing between each line | line-height:NO%

this changes how much space there is between each line of text in the fancypost.

- the larger the number the more space there is between each line

- though note that with 0% all of the lines will be scrunched up into one line. usually 100% or higher is most readable

- when previewing a fancypost it will not show you what it is actually going to look like. it will only show you what it would look like on the preview screen which is narrower than an actual forum post. therefore you'll need to post it first to see what it actually looks like, then go back and edit it accordingly.

- unfortunately hidden scrollies no longer work

- various other codes such as cursors and text shadow also no longer work

- when making your own fancyposts it's handy to add a little note somewhere saying that you made it as a sort of copyright sign. e.g. your username in a small size at the bottom of the fancypost or something

- if a fancypost is too thin to read on your mobile screen try turning it landscape so it will widen a bit.

- please be considerate of others' eyesight when making fancyposts. typically bright neon colours can be harsh to look at and incredibly small text can be very hard to read. (i know i used very bright colours and such in some of my examples but it was to show the contrast)

- post character limits depend on how old the account is:

• Trusted users (Account Age > 1 week): 2000 character limit

• 1+ year old accounts: 2500 characters

• 2+ year old accounts: 3000 characters

• 3+ year old accounts: 3500 characters

• 4+ year old accounts: 4000 characters

- on another note, unfortunately you can not longer customise your profile (formerly known as 'camps')

- rather than using heights and widths in a fancypost and making an image by setting it as the background of a fancypost, you can put an image inside a fancypost using img tags and you can still manipulate it more or less the same way. this saves worrying about the differing widths on everyone's devices.

to get colour palettes from images i use http://www.degraeve.com/color-palette/

to get colour schemes i use https://coolors.co/

to get colour codes i use http://html-color-codes.info/

to pick colours from images i use http://imagecolorpicker.com/

for editing images i use http://www168.lunapic.com/editor/

for special symbols/characters i use http://fsymbols.com/ (though please note that some of these symbols are not compatible with ff and will not work)

for generating lorem ipsum text i use http://www.lipsum.com/ (this is basically a dummy text that you can put in a fancypost to see what it would look like with a large block of text)

list of named colours that work on the site a guide to colors + how to read colors ; v2 (library?)