• Our software update is now concluded. You will need to reset your password to log in. In order to do this, you will have to click "Log in" in the top right corner and then "Forgot your password?".
  • Welcome to PokéCommunity! Register now and join one of the best fan communities on the 'net to talk Pokémon and more! We are not affiliated with The Pokémon Company or Nintendo.
    Register

Helpful Guides (CSS & Thread Presentation) + Shop Templates

Status
Not open for further replies.

twistedpuppy

Siriusly Twisted
1,354
Posts
15
Years
    • Seen Jul 18, 2015
    CSS Guide & Helpful Tips



    Introduction
    If you've looked around a couple of threads in Trade Corner and PokéCommunity, you'll notice that some have been beautifully designed. This design is known as CSS, or Cascading Style Sheets. CSS is a style sheet language commonly used for styling web pages. Many PokéCommunity members use CSS to give a more personalized & organized look to their posts. In this guide, we will help you stylize your own posts with these helpful hints.




    How It's Done
    Below are listed codes for you to utilize in editing the appearance of your posts.

    Putting it all together
    You may find yourself wondering how to start your CSS coding. Well to put it all together you first need to start with a BB code. A BB code is a set of tags based on the HTML language. You may already be familiar with this, as it is commonly used around the forums to add color, size, font, or position your posts. To begin your CSS you'll need to start off with one of these codes.

    Code: 
    [PLAIN][cd="(coding used here)"][/cd][/PLAIN]
    Alias of [css-div]

    Code: 
    [PLAIN][div="(coding used here)"][/div][/PLAIN]
    Allows CSS usage in a div tag

    Code: 
    [PLAIN][div="(coding used here)"][/div][/PLAIN]
    Creates a HTML block that accepts CSS.


    Sizing Codes
    Code: 
    height: (100px, 500px, 1000px);
    Sets the size of the height.

    Code: 
    width: (100px, 500px, 1000px);
    Sets the size of the width.


    Positioning Codes
    Code: 
    position: (absolute, relative, static, fixed);
    Sets the positioning for the CSS;
    Static (always positioned according to the normal flow of the page)
    Fixed (positioned relative to the browser window)
    Relative (positioned relative to its normal position)
    Absolute (positioned relative to the first parent element that has a position other than static).


    Code: 
    padding: (1px, 5px, 10px);
    Sets the spacing between the border and the content inside.

    Code: 
    margin-top: (1px, 5px, 10px);
margin-bottom: (1px, 5px, 10px);
margin-left: (1px, 5px, 10px);
margin-right: (1px, 5px, 10px);
    Sets the position of the border, padding, and content according to the px number.


    Background Codes
    Code: 
    background-color: (hex, rgb, color name);
    Changes the color of the background.

    Code: 
    background-image: url('http://www.imagesite.com/picture.png');
    Displays a selected image as your background.

    Code: 
    background-position: (top, bottom, center, right, left);
    Sets the position of the background image.

    Code: 
    background-repeat: (repeat-x, repeat-y, no-repeat);
    Sets a background to repeat from left to right (repeat-x), repeat from top to bottom (repeat-y), or to not repeat at all (no-repeat).

    Code: 
    overflow: (visible, auto, hidden);
    Creates a visible, auto, or hidden scroll bar.


    BorderCodes
    Code: 
    border-style: (dotted, dashed, solid, double, groove, ridge, inset, outset);
    Creates a border around the CSS;
    dotted: Defines a dotted border
    dashed: Defines a dashed border
    solid: Defines a solid border
    double: Defines two borders. The width of the two borders are the same as the border-width value
    groove: Defines a 3D grooved border. The effect depends on the border-color value
    ridge: Defines a 3D ridged border. The effect depends on the border-color value
    inset: Defines a 3D inset border. The effect depends on the border-color value
    outset: Defines a 3D outset border. The effect depends on the border-color value

    Code: 
    border-width: (1px, 5px, 10px);
    Sets the width of the border.

    Code: 
    border-color: (hex, rgb, color name);
    Changes the color of the border.


    Font Codes
    Code: 
    color: (hex, rgb, color name);
    Changes the color of the font.

    Code: 
    font-family: (arial, century gothic, times new roman);
    Displays the font style of your choice.

    Code: 
    font-size: (1px, 5px, 10px);
    Changes the size of the font.

    Code: 
    font-weight: (normal, bold);
    Changes the font to normal or bold.

    Code: 
    font-style: (normal, italic, oblique);
    Changes the font's style to normal, italic, or oblique.

    Code: 
    font-variant: (normal, small-caps, inherit);
    Specifies whether or not a text should be displayed in small-caps (lower case letters capitalized).

    Code: 
    letter-spacing: (1px, 5px, 10px);
    Sets the size of spacing between letters.

    Code: 
    word-spacing: (1px, 5px, 10px);
    Sets the size of spacing between words.

    Code: 
    line-height: (10px, 20px, 30px);
    Sets the size of spacing between lines.

    Code: 
    text-align: (center, right, left, justify);
    Aligns the text according to position; center, right, left, justify (stretches the lines so that each line has equal width)​




    Example
    In the example I'll be providing, I'll use the [cd=""][/cd] code to begin my CSS. So lets start off with the BB code, a background color, and a set height and width.

    Code: 
    [PLAIN][cd="background-color: #C0C0C0; height: 200px; width: 200px;"]As you can see, I went with a silver background and a height and width of a 200px. Next we'll choose a font family, add color to the font, and a size for the font.[/cd][/PLAIN]
    As you can see, I went with a silver background and a height and width of a 200px. Next we'll choose a font family, add color to the font, and a size for the font.

    Code: 
    [PLAIN][cd="background-color: #C0C0C0; height: 200px; width: 200px; color: black; font-family: arial; font-size: 10px;"]We choose black as the color of the font. Then Arial as the type of font, and finally a size of 10px for the font. Now for the final touch, we'll add padding.[/cd][/PLAIN]
    We choose black as the color of the font. Then Arial as the type of font, and finally a size of 10px for the font. Now for the final touch, we'll add padding.

    Code: 
    [PLAIN][cd="background-color: #C0C0C0; height: 200px; width: 200px; color: black; font-family: arial; font-size: 10px; padding: 10px;"]We've added the padding and this is the final result of your CSS.
[IMG]http://floatzel.net/pokemon/black-white/sprites/images/228.png[/IMG]
As you can see all it takes is a few easy steps to complete your CSS.[/cd][/PLAIN]
    We've added the padding and this is the final result of your CSS.
    228.png

    As you can see all it takes is a few easy steps to complete your CSS.




    Links
    Below are some helpful links listed to further expand your newly found CSS skills.

    CSS Tutorial at w3schools

    The PokéCommunity Forums - BB Code List

    PokéCommunity's CSS Help & Discussion Thread

    December Hex Hub - Various color hex codes​
     
    Last edited by a moderator:

    twistedpuppy

    Siriusly Twisted
    1,354
    Posts
    15
    Years
    • Seen Jul 18, 2015

    Helpful Tips for Thread Presentation




    Introduction
    First off, we'd like to welcome you into the trading community, and congratulate you on making a thread here. Now if you're reading this guide, you may be looking for tips on how to make a presentable trade thread here in Trade Corner. Well you've come to the right place. In this guide we will be going over a few helpful tips in making a presentable trade thread. You will be learning how to design your thread, provide detailed information, and over all organizational skills. Hopefully by the end of this guide you will have a presentable thread booming with success.




    Design
    You may be wondering how to go about designing your thread. What kind of formatting do I need? Which colors should I use? What type of font do I want? All are necessary questions you should ask yourself before making a thread. First, lets start off with formatting.

    If you've taken a look around Trade Corner you'll see a lot of threads using CSS, or Cascading Style Sheets. CSS is a style sheet language commonly used for styling web pages. Around PokéCommunity it's used as a layout for posts. To use CSS, you'll need to learn how to format and use the proper codes for it. Below is a link for a CSS guide. We'll also provide you with some basic codes in this guide as well.

    CSS Guide & Helpful Tips

    First off you'll need to start the CSS code with a BB code.
    Code: 
    [PLAIN][cd="(insert coding here)"][/cd][/PLAIN]
    Next we'll need to add the parameters for the CSS box.
    Code: 
    [PLAIN][cd="height: 200px; width: 200px;"][/cd][/PLAIN]
    Then we'll add in a color to the background and color to the font.
    Code: 
    [PLAIN][cd="height: 200px; width: 200px; background-color: white; color: black;"][/cd][/PLAIN]
    And finally we'll add some padding.
    Code: 
    [PLAIN][cd="height: 200px; width: 200px; background-color: white; color: black; padding: 10px;"][/cd][/PLAIN]
    This is the result of your CSS.
    Code: 
    [PLAIN][cd="height: 200px; width: 200px; background-color: white; color: black; padding: 10px;"]This is the result of your CSS.[/cd][/PLAIN]

    Now that you know how to format, it's time to think about what colors you'd like to use in your thread. To pick some colors, draw some inspiration from around your scenery or a picture. For this example, we will be using a picture of a skyscraper.

    skyscraper-day-fun.jpg

    Notice there are a lot of blues, grays, and white in this photo. We'll use some of these colors in our CSS.

    You've learned how to format,
    Choose a color palette,
    And all that's left is to choose a font.

    When choosing a font, you may want to mix and match a couple of them together. For instance, you'll want to use one font for a header and another for the content.

    Header Font - Arial Black
    Content Font - Century Gothic

    With these combinations of format, color, and font, you'll give your thread an overall look of balance and style.




    Details
    When making a thread, you'll want to be as detailed as possible. This includes giving the details of the dos and don'ts of your shop, your trading information (e.g. OT, ID, Friend Code, hours available), and add detailed information about the Pokémon you're offering and requesting.

    When including rules to your thread be sure to consider the interests of not only yourself, but the interests of others. Traders who see a thread protecting their rights as well will most likely come back for future business.

    Adding things such as your hours of operation will let traders know when to contact you and schedule a trade. Including OT, ID, and Friend Code, will also let traders know who they're obtaining Pokémon from and eliminate the need to exchange information beforehand.

    Finally, be sure to include as much information as possible about the Pokémon you're offering and requesting. This will make it easier for traders to see your offers and in return offer something themselves of worth.

    Example:
    380.png

    Latias Lv.100 ♀
    Nature: Timid
    Ability: Levitate
    Move set: Draco Meteor, Dragon Pulse, Surf, Trick
    Stats: 302 | 176 | 216 | 319 | 296 | 350
    IVs: 31 | 31 | 31 | 31 | 31 | 31
    EVs: 4 HP / 252 SpA / 252 Spe
    OT: May | ID: 10017​





    Organization
    Organization is key to putting together a thread. It helps traders cut down time searching for their wants when you lay out everything in an organized fashion. You can list Pokémon according to their region, IV'd/EV'd status, or event. You can also list out sections of your shop by rules, services, pending trades, affiliates, and Pokémon. Feel free to add any categories you think would be helpful to traders visiting your thread. Lastly, it may help to reserve some posts in case you need the extra space. If you choose to leave out this option, but require it later on, a moderator will help you reserve a post later on.




    Helpful Links
    Below are some helpful links for you to utilize on your thread.

    CSS Guide & Helpful Tips

    The PokéCommunity Forums - BB Code List

    PokéCommunity's CSS Help & Discussion Thread

    Cherrybam - For choosing backgrounds

    Kuler - For choosing palettes

    Serebii BW Pokédex

    Bulbapedia - List of Pokémon by National Pokédex number

    Veekun - Sprites

    Floatzel - BW Sprites

    pokemonelite200 - Sprites​
     
    Last edited by a moderator:

    twistedpuppy

    Siriusly Twisted
    1,354
    Posts
    15
    Years
    • Seen Jul 18, 2015
    In the following posts, you will find CSS templates for you to choose from donated by various PC members. Please do not remove any signature made by the CSS creator when using the template.

    Template 2 | Template 3 | Template 4 | Template 5 | Template 6 | Template 7 | Template 8 | Template 9 | Template 10 | Template 11 | Template 12



    OT: ????? | ID: #####
    FC: #### #### ####
    OT: ????? | ID: #####
    FC: #### #### ####
    OT: ????? | ID: #####
    FC: #### #### ####
    OT: ????? | ID: #####
    FC: #### #### ####
    OT: ????? | ID: #####
    FC: #### #### ####
    OT: ????? | ID: #####
    FC: #### #### ####
    OT: ????? | ID: #####
    FC: #### #### ####
    OT: ????? | ID: #####
    FC: #### #### ####
    OT: ????? | ID: #####
    FC: #### #### ####

    Shop title

    Rules
    • Rules go here Rules go here Rules go here Rules go here Rules go here
    • Rules go here Rules go here Rules go here Rules go here Rules go here
    • Rules go here Rules go here Rules go here Rules go here Rules go here
    • Rules go here Rules go here Rules go here Rules go here Rules go here
    • Rules go here Rules go here Rules go here Rules go here Rules go here
    • Rules go here Rules go here Rules go here Rules go here Rules go here

    Associates
    - Associates go here Associates go here Associates go here Associates go here
    - Associates go here Associates go here Associates go here Associates go here
    - Associates go here Associates go here Associates go here Associates go here
    - Associates go here Associates go here Associates go here Associates go here
    - Associates go here Associates go here Associates go here Associates go here
    - Associates go here Associates go here Associates go here Associates go here
    Trophy Case
    (scroll down for more)
    [a id]mp_up[/a id]
    (top)
    Spr_5b_Egg.png

    Trophy Pokémon 1
    (↑ Back to top ↑)
    Spr_5b_Egg.png

    Trophy Pokémon 2
    (↑ Back to top ↑)
    Spr_5b_Egg.png

    Trophy Pokémon 3
    (↑ Back to top ↑)
    Spr_5b_Egg.png

    Trophy Pokémon 4
    (↑ Back to top ↑)
    Spr_5b_Egg.png

    Trophy Pokémon 5
    (↑ Back to top ↑)
    Spr_5b_Egg.png

    Trophy Pokémon 6
    (↑ Back to top ↑)
    Spr_5b_Egg.png

    Trophy Pokémon 7
    (↑ Back to top ↑)
    Spr_5b_Egg.png

    Trophy Pokémon 8
    (↑ Back to top ↑)
    Spr_5b_Egg.png

    Trophy Pokémon 9
    (↑ Back to top ↑)
    Spr_5b_Egg.png

    Trophy Pokémon 10
    (↑ Back to top ↑)
    Spr_5b_Egg.png

    Trophy Pokémon 11
    (↑ Back to top ↑)
    Spr_5b_Egg.png

    Trophy Pokémon 12
    (↑ Back to top ↑)
    Spr_5b_Egg.png

    Trophy Pokémon 13
    (↑ Back to top ↑)
    Spr_5b_Egg.png

    Trophy Pokémon 14
    (↑ Back to top ↑)
    Spr_5b_Egg.png

    Trophy Pokémon 15
    (↑ Back to top ↑)
    Spr_5b_Egg.png

    Trophy Pokémon 16
    (↑ Back to top ↑)
    Spr_5b_Egg.png

    Trophy Pokémon 17
    (↑ Back to top ↑)
    Spr_5b_Egg.png

    Trophy Pokémon 18
    (↑ Back to top ↑)
    Spr_5b_Egg.png

    Trophy Pokémon 19
    (↑ Back to top ↑)
    Spr_5b_Egg.png

    Trophy Pokémon 20
    (↑ Back to top ↑)
    Offers
    (scroll down for more)
    © twistedpuppy


    Extract template here.
    Spoiler:
     
    Last edited:
    TwilightBlade

    TwilightBlade

    All dreams are but another reality.
    7,243
    Posts
    16
    Years
    • Shop Template 6


    thread title

    Introduction text text text goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat convallis quam, at imperdiet tellus consequat sed. Aenean ac odio eget felis vestibulum molestie nec nec urna. Integer bibendum, sapien nec varius viverra, orci ipsum dignissim sapien, quis gravida felis quam ac nisi.


    rules and regulations

    1.
    2.
    3.
    4.

    trainer information

    Diamond
    OT: xxxxx | ID: 00000
    FC: 0000 0000 0000

    HeartGold
    OT: xxxxx | ID: 00000
    FC: 0000 0000 0000

    Black
    OT: xxxxx | ID: 00000
    FC: 0000 0000 0000

    whitelist

    text text text

    wants

    text text text

    services

    text text text

    offers

    183.png

    Pokemon
    Nature - Ability - Gender
    Move - Move - Move - Move
    31 - 31 - 31 - 31 - 31 - 31
    OT ID

    186.png

    Pokemon
    Nature - Ability - Gender
    Move - Move - Move - Move
    31 - 31 - 31 - 31 - 31 - 31
    OT ID

    text text text
    text text text

    trophy case
    380.png
    381.png
    382.png
    383.png

    css by twilightblade


    Extract template here
    Spoiler:
     
    Last edited by a moderator:
    TwilightBlade

    TwilightBlade

    All dreams are but another reality.
    7,243
    Posts
    16
    Years
    • Shop Template 9​

    [a id]aa_rules[/a id]Rules
    1. text
    2. text
    3. text
    4. text
    5. text
    6. text
    7. text
    [a id]aa_trainer[/a id]trainer information
    Diamond | OT: xxxxx | ID: 00000
    FC: 0000 0000 0000

    Pearl | OT: xxxxx | ID: 00000
    FC: 0000 0000 0000

    Platinum | OT: xxxxx | ID: 00000
    FC: 0000 0000 0000

    Heart Gold | OT: xxxxx | ID: 00000
    FC: 0000 0000 0000

    Soul Silver | OT: xxxxx | ID: 00000
    FC: 0000 0000 0000

    Black | OT: xxxxx | ID: 00000
    FC: 0000 0000 0000

    White | OT: xxxxx | ID: 00000
    FC: 0000 0000 0000
    [a id]aa_whitelist[/a id]whitelist
    username | helped me
    [a id]aa_trophy[/a id]trophy case
    380.png
    Pokémon | Nature
    [a id]aa_offers[/a id]
    rng abused pokémon
    text
    text
    text
    text
    text
    text
    text
    text
    text
    text
    text
    text
    text
    text
    text
    text
    text
    text
    text
    text
    event pokémon
    text
    text
    text
    text
    text
    text
    text
    text
    text
    text
    text
    text
    text
    text
    text
    text
    text
    text
    text
    text
    shiny pokémon
    text
    text
    text
    text
    text
    text
    text
    text
    text
    text
    text
    text
    text
    text
    text
    text
    text
    text
    text
    text
    css by twilightblade and twistedpuppy

    Spoiler:
     

    twistedpuppy

    Siriusly Twisted
    1,354
    Posts
    15
    Years
    • Seen Jul 18, 2015
    Shop Template 12​





    shop title
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat convallis quam, at imperdiet tellus consequat sed. Aenean ac odio eget felis vestibulum molestie nec nec urna. Integer bibendum, sapien nec varius viverra, orci ipsum dignissim sapien, quis gravida felis quam ac nisi.




    rules and regulations
    Rule Number One here.
    Rule Number Two here.
    Rule Number Three here.
    Rule Number Four here.




    trainer information
    Diamond
    OT: xxxxx | ID: 00000
    FC: 0000 0000 0000
    HeartGold
    OT: xxxxx | ID: 00000
    FC: 0000 0000 0000
    Black
    OT: xxxxx | ID: 00000




    wants
    Wants
    Wants
    Wants
    Wants
    Wants




    offers
    Offers
    Offers
    Offers
    Offers
    Offers




    trophy case
    Trophies Here




    css by laugh





    Extract template here
    Spoiler:
     
    Status
    Not open for further replies.
    Back
    Top