CODES
if you have a code that isn't on the list, pm it to me and it'll be credited to you !!
= to look for a certain code, press f3 on your computer and type in what you're looking for.
= the first spoiler has an explanation of the code.
= the second spoiler has the actual code itself.
= the third spoiler has an example of the code (there will not always be a third spoiler, but i will work on adding them).
** everything is alphabetized !!in the spoiler below is the order of all codes, so look for the one you want in this spoiler and then look for it below. ( :please note that the basic fancypost code will be located at the top, right below this spoiler, while the lorem ipsum dummy text will be located at the very bottom, right above the credits. these two are marked with yellow asterisks, and they therefore are not in alphabetical order.
*basic fancypost
background gradients
cursors
dropshadows
dropshadows inside the fancypost
float
font color
font size
font types
having a single border type
having multiple border types
height and width
image fixing (or background re-sizing)
italics, bold text, and more
letter spacing
line spacing
margins
multiple rounded corners
opacity
padding
picture background position
picture backgrounds
rounded corners
scrollies
shadowed text
tables
text alignment
text on border
text outline
tilting
upper- or lower-case text
word spacing
*lorem ipsum dummy text
*total number of codes so far: 33
the basic fancypost code will also be right here at the top, because it's the base of everything. the explanation on how to use it will still be here !
the basic fancypost.this isn't really a single code, rather a multitude of codes from this page put together.
if you don't know how to make a fancypost, just fill out this code and it'll do the work for you. this has the bare bones. an explanation on how to fill it out is in the example spoiler this time, so you can look at what each thing does!
[div style ="background: COLOR; border: WIDTHpx TYPE COLOR; color: COLOR;]
TEXT
[/div]
where it says background: COLOR; please put a color. it can be a hex code or an actual color name, such as 'yellow', 'red', or 'white'. for this, i used #37cc87.
for border, where it says WIDTH put a number. it should be anywhere from 0 to 7.
where it says TYPE, put either double, solid, dotted, dashed, inset, outset, ridge, or groove. look at different border types to see what each looks like!
where it says COLOR, you can put another color, just like you did for the background. in this case, i used white.
finally, for where it says color: COLOR; put a third color. this code colors your text. i used white again, to match the border.
_________________________________________________________________________________________________________
background gradients.these create a background gradient for you. simply put a color or hex code where it says color ( and they should be different colors ).
i believe you can add more colors to the gradient by separating them with commas!
( thank you bloom for these codes, please pm me and let me know if you'd like me to remove these !! )
background: linear-gradient(COLOR, COLOR)
background: radial-gradient(COLOR, COLOR)
_________________________________________________________________________________________________________
cursors.use this to put a cursor in your fancypost.
go to cursors-4u.com and pick out a cursor that you like, and use the link to the image of it. i don't know how well this works (cakey said she couldn't really get it to work too well for her), but if you pm me i might be able to help you work it out through experimentation.
even still, the code is here in case you know how to use it. ( :
cursor: url("LINK HERE"), auto;
_________________________________________________________________________________________________________
dropshadows.this code creates, as stated above, dropshadows below your fancypost. by adding more width-height-blur-opacity-color strings (with each string separated by commas), you can add more and more shadows.
i haven't played around with these too much either, so let me know if i'm right or wrong ( :
play around with numbers!
here are some notes:
HORIZONTALpx is how far to left or right the shadow is. i believe a larger number pushes it to the left, while a negative number pushes it to the right. this may be incorrect.
VERTICALpx is how far up or down the shadow is. i think a larger number pushes it down, while a negative number pulls it up.
BLURpx changes how soft around the edges is. the smaller the number, the more solid the edge is; the larger the number, the more blurred it looks.
OPACITYpx changes, well, the opacity. i believe that a larger number makes it less visible, but this may be wrong.
COLOR is pretty self-explanatory. this changes the color of the shadow. this can be a hex code or the name of a color, as usual.
box-shadow: HORIZONTALpx VERTICALpx BLURpx OPACITYpx COLOR;
_________________________________________________________________________________________________________
dropshadows inside the fancypost.this is basically the same thing as dropshadows, so i copied the code explanations. the only difference is that the shadows are inside of the fancypost, rather than hanging on the outside.
HORIZONTALpx is how far to left or right the shadow is. i believe a larger number pushes it to the left, while a negative number pushes it to the right. this may be incorrect.
VERTICALpx is how far up or down the shadow is. i think a larger number pushes it down, while a negative number pulls it up.
BLURpx changes how soft around the edges is. the smaller the number, the more solid the edge is; the larger the number, the more blurred it looks.
OPACITYpx changes, well, the opacity. i believe that a larger number makes it less visible, but this may be wrong.
COLOR is pretty self-explanatory. this changes the color of the shadow. this can be a hex code or the name of a color, as usual.
box-shadow: HORIZONTALpx VERTICALpx BLURpx OPACITYpx COLOR inset;
_________________________________________________________________________________________________________
float.with this code, you can put an image in the center of your fancypost without covering the text. instead, the text moves around it.
to use it, put left, right, or center where it says place.
float: PLACE;
_________________________________________________________________________________________________________
font color.use this code to make all of the text in your fancypost the same color. just put in a hex code or the name of the color where it says COLOR in capital letters. for example:
you want the text to be red. the code is:
color: COLOR;
to make the text red, you change it to:
color: red;
easy!
color: COLOR;
_________________________________________________________________________________________________________
font size.this code changes the size of your text. as always, the larger the number, the larger the text. i think that 8px is probably as small as you should go (unless you're just copyrighting a fancypost, in which case, you can go much smaller. in fact, for my copyrights, i usually use 5-6px).
this code is good for creating titles/spaces for character names/etc. ( :
just put a number where it says NUMBER.
font-size: NUMBERpx;
_________________________________________________________________________________________________________
font types.this one is easy. it changes the font of everything in your fancypost. where it says FONTHERE, just type in a font that you want to use.
a list of fonts that can be used on windows 7 can be found
HERE. go ahead and play around with different fonts! keep in mind, though, some fonts are harder to read than others.
font-family: FONTHERE;
_________________________________________________________________________________________________________
having a single border type.if you don't want a bunch of different borders on your fancypost, then use this code!
the main 8 border types:
- inset
- outset
- ridge
- groove
- solid
- dotted
- dashed
- double
you can, as always, change the width and use a number between 0-7.
chance the color by using a hex code or the name of a color, like red.
border: WIDTHpx TYPE COLOR;
_________________________________________________________________________________________________________
having multiple border types.if you don't want one type of border on all sides of your fancypost, then use this code!
as stated above, there are eight types of borders:
- solid
- double
- dotted
- dashed
- inset
- outset
- ridge
- groove
just type in one of these borders where it says TYPE.
you can also change the widths.
the width of a border should be anywhere from 0-7px, with 0 being no border and 7 being a thick border. you can go above 7, of course, but the border may look
too thick.
just insert the number where it says WIDTH.
finally, you can change the colors.
where it says COLOR, just put a color (such as red, yellow, or white), or use a hex code, such as #cdcdcd or #abcdef. december.com is a great place to look for a hex code, found
HERE.just copy and paste this code into your fancypost.
border-top: WIDTHpx TYPE COLOR; border-left: WIDTHpx TYPE COLOR; border-bottom: WIDTHpx TYPE COLOR; border-right: WIDTHpx TYPE COLOR;
_________________________________________________________________________________________________________
height and width.this is pretty self-explanatory. this code changes the height and width of your fancypost. where it says NUMBER, just put a number. the larger the number, the larger the height or width will be.
height: NUMBERpx; width: NUMBERpx;
_________________________________________________________________________________________________________
image fixing (or background re-sizing).this is a code i've never used before. however, thank you to queen allure targaryen and pokepegasisterperson for giving me the code and explanations on how to use it : )
this is also known as the background re-sizing code.
Here is pokepegasister's explanation on how to use it:
background-size: X% Y%;
this example is created by
queen allure targaryen, so many thanks to her : )
[align=center][/align]
[align=center][/align]
[align=center][/align]
[align=center][/align]
[align=center][/align]
[align=center][/align]
[fancypost bgcolor=transparent; borderwidth=0px; width: 200px; height: 200px; background:url(https://upload.wikimedia.org/wikipedia/commons/1/11/Cherry_blossoms_in_Vancouver_3_crop.jpg); background-size: 100% 100%; repeat: no repeat;][/fancypost] | [fancypost bgcolor=transparent; borderwidth=0px; width: 200px; height: 200px; font-family: georgia;]TEXT[/fancypost] [align=center][/align]
|
_________________________________________________________________________________________________________
italics, bold text, and more.this text makes all text in a fancypost the same style. you can put one of the following choices in where it says STYLE:
- underline
- strikethrough
- bold
- italic
it's good for making titles and subtitles without using a bunch of bbcode marks.
text-style: STYLE;
_________________________________________________________________________________________________________
letter spacing.this is a fun code. basically, it changes the amount of space between the letters of your text.
you can make the amount of space larger or smaller. there will be a code for each.
just put a number where it says NUMBER.
*note:
for the more space code, the larger the number, the more space there is.
for the less space code, the larger the number, the less space there is.
more space.
letter-spacing: NUMBERpx;
less space.
letter-spacing: -NUMBERpx;
_________________________________________________________________________________________________________
line spacing.this code, similar to word- and letter-spacing, adjusts the amount of space between whole lines of text.
it's fairly easy to use; just insert a number where it says NUMBER.
don't get rid of the % mark.
notes:
- any number below 100% moves the lines closer together.
- 100% is the normal line spacing.
- any number over 100% moves the lines farther apart.
- 80% or so is probably the smallest you should go so that lines remain readable. ( :
line-height: NUMBER%;
_________________________________________________________________________________________________________
margins.margins are quite difficult, but once you get the hang of them, they're basically the best code you have at your disposal. they move a fancypost to anywhere you want it on the page, giving you the power to do anything from put text on a border to make a text box hang off to the right.
where it says ALIGNMENT, put one of the following:
- left
- right
- top
- bottom
where it says NUMBER, put a number.
it can be positive or negative.
here is an example and short explanation on what each thing does so that you can effectively use this code:
(numbers and alignments are placed in as examples.)
margin-top: 50px ( this moves the fancypost down. )
margin-top: -50px ( this moves the fancypost up. )
margin-left: 50px ( this moves the fancypost right. )
margin-left: -50px ( this moves the fancypost left. )
margin-right: 50px ( this moves the fancypost left. )
margin-right: -50px ( this moves the fancypost right. )
margin-bottom: 50px ( this moves the fancypost up. )
margin-bottom: -50px ( this moves the fancypost down. )
margin-ALIGNMENT: NUMBERpx;
_________________________________________________________________________________________________________
multiple rounded corners.don't want all corners to be rounded the same? using this code, you can make one corner rounded a little bit, one corner rounded a lot, and other corners may not be rounded at all!
just put a number where it says TOPRIGHT, BOTTOMRIGHT, BOTTOMLEFT, or TOPLEFT. i've labeled them so that you know which number edits what corner.
border-radius: TOPLEFTpx TOPRIGHTpx BOTTOMRIGHTpx BOTTOMLEFTpx;
_________________________________________________________________________________________________________
opacity.this changes the opacity of your fancypost. do you want a picture background fancypost with another fancypost inside of it, but you don't want to block the image?
you can use this code to make the second fancypost slightly see-through so you can still type in it as well as see the background.
( that was a bad explanation, but oh well. )
the number can be anywhere from 0.00 to 0.99.
0.00 means the fancypost is completely see-through; it's invisible.
0.99 means that the fancypost is almost completely solid, and you probably can't see the background or whatever it's over top of.
opacity: 0.NUMBER;
_________________________________________________________________________________________________________
padding.this creates a sort of 'padding' or 'cushion' around your text inside of the fancypost. it's like a margin on the inside; you can push the text around.
you can use things such as the following to adjust separate padding types instead of all of the padding being the same:
padding-left: NUMBERpx
padding-right: NUMBERpx
padding-bottom: NUMBERpx
padding-top: NUMBERpx
padding: NUMBERpx;
_________________________________________________________________________________________________________
picture background position.if you want a certain part of your picture background to show but you can't see it because you can only see the top left portion of the photo, then this code is for you.
simply type in left, right, or center where it says place. it's extremely useful for centering image backgrounds.
background-position: PLACE;
_________________________________________________________________________________________________________
picture backgrounds.where it says URL in capital letters, paste a link to an image. this makes the background of your fancypost become that image!
background:url(URL);
_________________________________________________________________________________________________________
rounded corners.don't want your fancypost to be a box? use this code! this rounds your corners.
just put a number where it says NUMBER. the larger the number, the more rounded your border is.
border-radius: NUMBERpx;
_________________________________________________________________________________________________________
scrollies.instead of having your fancypost expand automatically to fit your text, you can make it a set width and height in order to make it scroll.
to keep it from being too tiny, try not to make scrollies less than 50 x 50.
just put a number where it says number. don't get rid of the -px after where it says number!
overflow: auto; width: NUMBERpx; height: NUMBERpx;
_________________________________________________________________________________________________________
shadowed text.this code does exactly what the title says: it creates a shadow behind your text! this is great for adding emphasis to titles and subtitles.
there are three spots for numbers, and i've filled them in for you already. however, you can change them, of course. i haven't really played around with this code a whole lot yet, but i believe the first number represents height. a negative number moves it up(?) and a positive number moves it down(?).
the second number should represent the horizontal axis, and i believe a positive number moves it right(?) and a negative number moves it left(?).
the final number should represent either the shadow opacity or how big the shadow is, with, of course, a larger number meaning either more opaque or a bigger shadow.
( please feel free to let me know whether or not i'm correct on this!! )
finally, the COLOR section, of course, stands for the color of the shadow. change that to a color name or to a hex code.
text-shadow: 3px 3px 3px COLOR;
_________________________________________________________________________________________________________
tables.tables, i'll admit, are very confusing when using them for fancyposts, so it might take you a while to understand them. this isn't really a fancypost code, but it can be used to create beautiful fancyposts.
tr stands for table row. you can use this to start a new row of fancyposts.
td stands for table data. this creates another column of fancyposts. you can use this to create fancyposts side-by-side!
if you have questions on tables, please feel free to pm me, because i'd be happy to help.
[table]
[tr]
[td][/td]
[/tr]
[/table]
_________________________________________________________________________________________________________
text alignment.thank you to banira for reminding me to put this in!
this code is a simple one to use. it aligns all of the text in your fancypost the same way. ( sorry, that's worded a little badly. )
there are four types of alignments:
- left
- right
- center
- justify
just put in one of those where it says ALIGNMENT in the code.
text-align: ALIGNMENT
_________________________________________________________________________________________________________
text on border.this is a code taken from my sister's fancypost code list. it's already been set up for you; basically, it's a fancypost with another fancypost directly below it, and margins have been used to lower the text so that it's on the border.
where it says font-family: FONT, put in the font you wish to use.
where it says font-style: STYLE, put either bold, italic, underline, or strikethrough - or just leave it blank.
where it says text-align: PLACE, put either left, right, center, or justify.
where it says TITLE, put the text that you wish to be on the border.
where it says bgcolor= COLOR, put the color of the background of your fancypost; it can be a hex code or a color name.
where it says border: WIDTHpx TYPE COLOR, put a number between 0-7 for the WIDTH, a color where it says COLOR, and one of the following border styles where it says TYPE:
- solid
- double
- dotted
- dashed
- inset
- outset
- ridge
- groove
you can enter whatever text you want where it says text!
[fancypost bgcolor= translarent; bordercolor= transparent; borderwidth= 0px; font-family: FONT; font-style: STYLE; font-size: 36px; margin-bottom: -13px; letter-spacing: 13px; text-align: PLACE]TITLE[/fancypost][fancypost bgcolor= COLOR; border: WIDTHpx TYPE COLOR;]
TEXT
[/fancypost]
_________________________________________________________________________________________________________
text outline.this creates a thin outline around your text. just put a color where it says COLOR. for this one, you can use multiple colors, and can create a sort of '3D' effect if you pick your colors right.
this is a fun code, so play around with it and use it to emphasize titles !
text-shadow: 1px 1px COLOR, 1px -1px COLOR, -1px 1px COLOR, -1px -1px COLOR;
_________________________________________________________________________________________________________
tilting.use this code to tilt your fancypost. it's a rather long code, and slightly confusing, so be careful when filling it out.
you can use a number anywhere from 0 to 360, with 0 being not turned at all, and 360 being flipped around completely (but if you put 360, it'll look like it hasn't been tilted at all).
180 flips it upside down.
be sure to use the same number everywhere it says NUMBER; this ensures that the tilt looks the same on all browsers.
transform: rotate (NUMBERdeg); -o-transform: rotate(NUMBERdeg); -webkit-transform: rotate(NUMBERdeg); -moz-transform: rotate(NUMBERdeg);
_________________________________________________________________________________________________________
upper- or lower-case text.this code simply makes all of the text in a fancypost upper- or lower-case. it saves time if you want to type in all caps or all lower-case.
where it says TYPE, just put either upper or lower.
text-transform: TYPEcase;
_________________________________________________________________________________________________________
word spacing.this is similar to letter spacing, yet it's also different. instead of changing the spacing between letters, it changes the spacing between words.
the larger the number, the farther apart the words are.
the smaller the number (as in, negative numbers), the closer together the words are.
farther apart:
word-spacing: NUMBERpx;
closer together:
word-spacing: -NUMBERpx;
_________________________________________________________________________________________________________
lorem ipsum dummy text.this is the lorem ipsum dummy text. it's also pretty self-explanatory; you just insert it into your fancypost to see what it would look like with text. : )
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
_________________________________________________________________________________________________________