• 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