Trade Corner Seeking a quick, simple trade? Wanting to get rid of a Pokémon? This section is for you!

Draconius GO
Closed Thread
 
Thread Tools
  #1    
Old December 30th, 2011 (9:36 PM). Edited October 5th, 2017 by Soapy ❤.
twistedpuppy's Avatar
twistedpuppy twistedpuppy is offline
Siriusly Twisted
  • Crystal Tier
FC: 5043-2470-1204
IGN:
 
Join Date: Nov 2008
Nature: Timid
Posts: 1,370
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:
[cd="(coding used here)"][/cd]
Alias of [css-div]

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

Code:
[div="(coding used here)"][/div]
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:
[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]
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:
[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]
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:
[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]
We've added the padding and this is the final result of your CSS.

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

Relevant Advertising!

  #2    
Old December 30th, 2011 (9:42 PM). Edited October 5th, 2017 by Soapy ❤.
twistedpuppy's Avatar
twistedpuppy twistedpuppy is offline
Siriusly Twisted
  • Crystal Tier
FC: 5043-2470-1204
IGN:
 
Join Date: Nov 2008
Nature: Timid
Posts: 1,370

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:
[cd="(insert coding here)"][/cd]
Next we'll need to add the parameters for the CSS box.
Code:
[cd="height: 200px; width: 200px;"][/cd]
Then we'll add in a color to the background and color to the font.
Code:
[cd="height: 200px; width: 200px; background-color: white; color: black;"][/cd]
And finally we'll add some padding.
Code:
[cd="height: 200px; width: 200px; background-color: white; color: black; padding: 10px;"][/cd]
This is the result of your CSS.
Code:
[cd="height: 200px; width: 200px; background-color: white; color: black; padding: 10px;"]This is the result of your CSS.[/cd]
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.


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:

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
Closed Thread

Quick Reply

Join the conversation!

Create an account to post a reply in this thread, participate in other discussions, and more!

Create a PokéCommunity Account

Sponsored Links
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT -8. The time now is 4:57 PM.