Fancypost tutoring (P, ♥Animal)

This is an archived version of FeralFront. While you can surf through all the content that was ever created on FeralFront, no new content can be created.
If you'd like some free FeralFront memorabilia to look back on fondly, see this thread from Dynamo (if this message is still here, we still have memorabilia): https://feralfront.com/thread/2669184-free-feralfront-memorabilia/.

    [fancypost bgcolor=HEX CODE; border-top: 0px dashed black; border-left: 5px dotted black; border-bottom: 0px dashed black; border-right: 5px dotted black; border-radius: 60px]

    Ready to get started? :)
    ________________


    [/fancypost]

    [fancypost bgcolor=HEX CODE; border-top: 0px dashed black; border-left: 5px dotted black; border-bottom: 0px dashed black; border-right: 5px dotted black; border-radius: 60px]

    Alright, I suppose we'll start with color. When you do color in a fancypost, other than black and white, you should use something called a hex code. It's got six numbers, and may look like this:
    #CD96CD, #000000, etc.


    Here's a website for getting hex code colors.
    http://www.december.com/html/spec/color4.html
    I suggest you keep that link somewhere safe or bookmark it.


    You put ze hex code like this:

    Code
    1. [color=#000000] TEXT [/color]


    ________________

    [/color]
    [/fancypost]

    I'll break it down for you, so that you can make an awesome fancypost.


    Alright, so let's start with the basics. Your fancy should start with the command [fancypost...] and end with [/fancypost]. Other commands should be put in the first fancy box, such as background color and border color.
    Here's your basic code.

    Code
    1. [fancypost bgcolor=HEX CODE; bordercolor=HEX CODE; borderwidth=WIDTHpx;]
    2. [/fancypost]


    and can be filled in like this:

    Code
    1. [fancypost bgcolor=#FFFFFF; bordercolor=black; borderwidth=5px;]
    2. [/fancypost]


    [fancypost bgcolor=#FFFFFF; bordercolor=black; borderwidth=5px;]
    The filled out code would come out like this.
    [/fancypost]


    Try filling out this code and making a basic box with a purple border and blue background.

    [fancypost bgcolor=HEX CODE; border-top: 0px dashed black; border-left: 5px dotted black; border-bottom: 0px dashed black; border-right: 5px dotted black; border-radius: 60px]

    Alright, so now that you know how to do the basics of a fancypost, I'll teach you a shortcut on the borders. You can do borders in a single command that looks like this:

    Code
    1. [fancypost bgcolor=HEX CODE; border: BORDER TYPE NUMBERpx HEX CODE;][/fancypost]


    BORDER TYPE: can be solid, dotted, dashed, or double. (Double is tricky, so we'll leave that alone for now.)


    NUMBERpx: the width of the border, I suggest 3 to 7 px. Make sure you put px after the number, otherwise it won't show up right.


    HEX CODE: The color. Make sure you have a # sign.


    All of these should be separated with a space, so it codes like this:


    Code
    1. [fancypost bgcolor= black; border: dashed 5px #FFFFFF;][/fancypost]


    [fancypost bgcolor= black; border: dashed 5px #FFFFFF;]
    And looks like this.
    [/fancypost]


    ________________


    [/fancypost]

    [fancypost bgcolor= #2E0854; border: dashed 4px #7F00FF;] Hello friend!
    [/fancypost]


    [mergedate]1361732476[/mergedate]
    [fancypost bgcolor= transparent; border: double 9px #FFFFFF;] or this
    [/fancypost]


    [fancypost bgcolor= #5B2879; border: dotted 12px #800080;] lol
    [/fancypost]

    The post was edited 1 time, last by ♥Animal ().

    [fancypost bgcolor=HEX CODE; border-top: 0px dashed black; border-left: 5px dotted black; border-bottom: 0px dashed black; border-right: 5px dotted black; border-radius: 60px]

    Good! You're catching on fast.


    Staying on the topic of borders, we'll do rounded edges.


    Code
    1. border-radius: NUMBERpx


    It plugs in like this:

    Code
    1. [fancypost bgcolor=HEX CODE; border: BORDER TYPE NUMBERpx COLOR; border-radius: NUMBERpx][/fancypost]


    [fancypost bgcolor=white; border: solid 5px black; border-radius: 10px]
    A 10px radius.
    [/fancypost]


    [fancypost bgcolor=white; border: solid 5px black; border-radius: 20px]
    A 20px radius.




    [/fancypost]


    [fancypost bgcolor=white; border: solid 5px black; border-radius: 50px]
    A 50px radius, and so on.
    Try it.






    [/fancypost]
    ________________


    [/fancypost]

    [fancypost bgcolor= black; border: dotted 9px #E01B6A; border-radius: 15px] Oooh. Shiny! :-\ LOL
    [/fancypost]

    The post was edited 1 time, last by ♥Animal ().

    Alright next up:


    When you put an image into a fancy, you use the fancyimage command. Do NOT use img codes.


    Code
    1. [align=center][fancypost bgcolor=HEX CODE; border: BORDER TYPE NUMBERpx HEX CODE; border-radius: NUMBERpx]
    2. [fancyimage]PICTURE URL[/fancyimage]
    3. [/fancypost][/align]



    We'll add another part of the lesson in.


    When you do text, the commands should be in this order:

    Code
    1. [font=FONT TYPE][color=HEX CODE]
    4. [/color][/font]


    You should always center a fancypost, and you should ALWAYS DO IT LAST on a basic fancy. (Don't worry about tables yet.) The center and /center should always be outside of all the other code.



    Now that you know all this, fill out this fancypost order as practice.


    Username: Cheesepuff
    Background color: a dark grey that matches the image
    Text color: White
    Image link: http://sobi.org/photos/Cat//Bu…es/Recoletta/XA9U4999.JPG
    Border color: dashed, white
    Lyrics/other text: None
    Other: make the font Trebuchet ms, please

    Alright, now I get to critique. Constructive criticism, go!


    The border shouldn't be behind the image. It should be a comfortable radius, not one that will cut off the picture and the text. 100000px is WAYYYY to much. Try 12 or so. ;)


    Also, unless specified by a customer, you should (most times) do a solid border.


    Put some space between the image and the text, as well as after the text to move it away from the border.


    Always read the order carefully...I specified a font in the other section. Just typing in the text is a no-no. You need to surround it with font and /font, color and /color, and center. Even if the default text color for the site is white, you need to get into the habit.


    Nice selection of background color. :) With a few minor tweaks, it comes out looking very nice and well-tailored to the order.


    [fancypost bgcolor= #808080; border: dashed 5px #FFFFFF; border-radius: 12px]
    [fancyimage]http://sobi.org/photos/Cat//Bu…es/Recoletta/XA9U4999.JPG[/fancyimage]


    Text
    ___________


    [/fancypost]


    You're catching on fast. Try this order:


    Username: Cheesepuff
    Background color: dark blue
    Text color: very light green
    Image link: http://sobi.org/photos/Cat//Rome/Catholic/GraveCat_024.jpg
    Border color: same as text color
    Lyrics/other text: Playground school bell rings again
    Rain clouds come to play again
    Has no one told you she's not breathing?
    Hello, I'm your mind giving you someone to talk to
    Hello


    If I smile and don't believe
    Soon I know I'll wake from this dream
    Don't try to fix me, I'm not broken
    Hello, I'm the lie living for you so you can hide
    Don't cry


    Suddenly I know I'm not sleeping
    Hello, I'm still here
    All that's left of yesterday
    Other: None

    [fancypost bgcolor= #000066; border: solid 5px #00FF00; border-radius: 12px]
    [fancyimage]http://sobi.org/photos/Cat//Rome/Catholic/GraveCat_024.jpg[/fancyimage]


    [font= georgia]Playground school bell rings again
    Rain clouds come to play again
    Has no one told you she's not breathing?
    Hello, I'm your mind giving you someone to talk to
    Hello


    If I smile and don't believe
    Soon I know I'll wake from this dream
    Don't try to fix me, I'm not broken
    Hello, I'm the lie living for you so you can hide


    [fancypost bgcolor= #000000; border: dashed 3px #000066; overflow: auto; width: 152px; height: 126px


    Soo... :)


    [/fancypost]


    Suddenly I know I'm not sleeping
    Hello, I'm still here
    All that's left of yesterday.


    [/fancypost]

    The post was edited 1 time, last by ♥Animal ().

    Perfect. :)


    Are you ready for some more teaching, then?


    Let's get into scroll bars first. When you make a box with a scroll bar, you are putting a fancypost that does not expand into a larger fancypost. Here's the code:


    Code
    1. [fancypost bgcolor=HEX CODE; border: BORDER TYPE NUMBERpx COLOR; overflow: auto; width: NUMBERpx; height:NUMBERpx;]
    2. Text
    3. [/fancypost]


    Let's break it down.


      [li]Border: There may or may not need to be a border: it depends upon the look you want to give the fancypost. Normally a solid or dotted 3px border works well.[/li]
      [li]Background: Depends on the situation, again. You normally do not need a background on a scroll box, so if you're not sure, leave it blank.[/li]
      [li]Overflow: auto: Leave this command the way it is, otherwise it won't come out right.[/li]
      [li]Width and height: Make the width and height wide and tall enough to be able to see about this much text. If you can't, do not center the text.[/li]


    TEXT TEXT TEXT TEXT TEXT TEXT
    TEXT TEXT TEXT TEXT TEXT TEXT
    TEXT TEXT TEXT TEXT TEXT TEXT
    TEXT TEXT TEXT TEXT TEXT TEXT


      [li]It's not normally a good idea to leave the text Arial font. Try georgia or andale mono, etc.[/li]


    Try it on that last fancypost you made.

    [fancypost bgcolor= transparent; border: dashed 7px #FFFFFF; overflow: auto; width: 150px; height:150px;]
    Sorry, Cheesepuff, I was busy... :-[ (embarrassed)
    [/fancypost]

    [fancypost bgcolor=HEX CODE; border-top: 0px dashed black; border-left: 5px dotted black; border-bottom: 0px dashed black; border-right: 5px dotted black; border-radius: 60px]

    Mobile post, we'll continue on Monday when I can get to my laptop.
    ________________


    [/fancypost]

    Alright, down to business.


    Before we do tables, I'm going to lend you this bit of code. It's for putting text on the top border of a fancypost. You put it before the main [fancypost ] command but after the [center.


    Code
    1. [fancypost bgcolor=; bordercolor=; borderwidth=0px; font-family: times new roman; font-style: italic; font-size: 36px; margin-bottom: -13px; letter-spacing: 13px; text-align: right]TEXT[/fancypost]


    Try it on a normal fancy.