PDA

View Full Version : Helpful Guides (CSS & Thread Presentation) + Shop Templates


twistedpuppy
December 30th, 2011, 9:36 PM
CSS Guide & Helpful Tips



IntroductionIf 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 DoneBelow are listed codes for you to utilize in editing the appearance of your posts.

Putting it all togetherYou 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.

Alias of [css-div]

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

Creates a HTML block that accepts CSS.


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

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


Positioning Codesposition: (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).


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

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 Codesbackground-color: (hex, rgb, color name);Changes the color of the background.

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

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

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).

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


BorderCodesborder-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

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

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


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

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

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

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

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

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

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

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

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

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)




ExampleIn the example I'll be providing, I'll use the code to begin my CSS. So lets start off with the BB code, a background color, and a set height and width.

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.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.

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.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.

We've added the padding and this is the final result of your CSS.
http://floatzel.net/pokemon/black-white/sprites/images/228.png
As you can see all it takes is a few easy steps to complete your CSS.We've added the padding and this is the final result of your CSS.
http://floatzel.net/pokemon/black-white/sprites/images/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 (http://www.w3schools.com/Css/default.asp)

The PokéCommunity Forums - BB Code List (http://www.pokecommunity.com/misc.php?do=bbcode)

PokéCommunity's CSS Help & Discussion Thread (http://www.pokecommunity.com/showthread.php?t=200899)

December Hex Hub - Various color hex codes (http://www.december.com/html/spec/color.html)

twistedpuppy
December 30th, 2011, 9:42 PM
Helpful Tips for Thread Presentation




IntroductionFirst 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.




DesignYou 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 (http://www.pokecommunity.com/showpost.php?p=6990032&postcount=1)

First off you'll need to start the CSS code with a BB code.
Next we'll need to add the parameters for the CSS box.
Then we'll add in a color to the background and color to the font.
And finally we'll add some padding.
This is the result of your CSS.
This is the result of your CSS.

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.

https://c.tadst.com/gfx/750w/skyscraper-day-fun.jpg?1

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 BlackContent Font - Century Gothic

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




DetailsWhen 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.

http://www.smogon.com/download/sprites/bw/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





OrganizationOrganization 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 LinksBelow are some helpful links for you to utilize on your thread.

CSS Guide & Helpful Tips (http://www.pokecommunity.com/showpost.php?p=6990032&postcount=1)

The PokéCommunity Forums - BB Code List (http://www.pokecommunity.com/misc.php?do=bbcode)

PokéCommunity's CSS Help & Discussion Thread (http://www.pokecommunity.com/showthread.php?t=200899)

Cherrybam - For choosing backgrounds (http://www.cherrybam.com/)

Kuler - For choosing palettes (http://kuler.adobe.com/#themes/rating?time=30)

Serebii BW Pokédex (http://www.serebii.net/pokedex-bw/)

Bulbapedia - List of Pokémon by National Pokédex number (http://bulbapedia.bulbagarden.net/wiki/List_of_Pok%C3%A9mon_by_National_Pok%C3%A9dex_number)

Veekun - Sprites (http://veekun.com/)

Floatzel - BW Sprites (http://floatzel.net/pokemon/black-white/sprites/)

pokemonelite200 - Sprites (http://www.pokemonelite2000.com/sprites.html)