Crafting Store: Coding and Crafting Guide

Download Crafting Store: Coding and Crafting Guide

Post on 08-Jul-2015




1 download

Embed Size (px)


Slide 1

Crafting StoreCoding and Styling GuideStonewall Fleet: Crafting CorpPurposeThis guide will endeavor to teach you not only how, but why and what HTML and CSS tags to use when entering in descriptions for Store items.For example, we will be turning the left image into the code on the right:To begin:A basic HTML element has two parts, the opening tag and the closing tag. . . . Div is a general tag that creates a divisional unit. The first tag is the opening tag, the second, the one with the slash, is the closing tag.ClassesHTML tags can be specialized for styling by the use of the class attribute.

. . . . . .

When defining the class, it must include an equal sign followed by the name of the class, itemFed, surrounded by quote marks. For Klingon items, use the class name itemKlink.Begin and end every entry with these tags.List, terms and definitions, oh my!Now that we know about div tags with class definition, lets figure out how were going to define the data.Lets look at our example:

ListWhat we see is that its actually just a list.Each new line represents a new term, such a weapon power, or a definition for the previous weapon power.Zoom inIf we zoom in a little, we can see what items are our terms and which are our definitions.

TermDefinitionDefinitionDefinitionDefinitionDefinitionDefinitionNow that we know that our data is actually a list of terms and definitions, we know what HTML tags to use.New Tags

. . . . . . . . .

For the item description, we will use the , Define List tag, , Define Term tag, and , Define Definition tag.These three tags work together as a group. and tags are nested inside of the opening and closing tag.First, start with your and tags to define the list, then define the term, followed by its definitions.Example:

Sonic Pulse III Expose Attack PBAoE Damage, Slow, Interrupt and Knockback 30 Physical Damage (1.2 DPS) 85% chance: Knocks back +3.2 feet Interrupt -75% Run Speed for 10 sec

Hint: Its advisable to first type the opening and closing tag for an HTML element before beginning the next tags.More Classes

As you can see, there are several other styles that need to be applied. For example, the yellow text of Expose Attack or Exploit Attack. As well, the white text of the type of attack.This is done with three more classes; expose, exploit, attack-type.Example:

Sonic Pulse III Expose Attack PBAoE Damage, Slow, Interrupt and Knockback 30 Physical Damage (1.2 DPS) 85% chance: Knocks back +3.2 feet Interrupt -75% Run Speed for 10 sec

Special Cases: Span tag

Sometimes, youll need to apply special styling to words in the middle of a sentence. This can be accomplished with the class attribute that you already know and the span tag.Span is very similar to the div tag, but instead of creating a whole new division. It simply spans across a group of inline characters or other elements. Just like the other tags weve seen, span has an opening tag, , and a closing tag, . This can apply the class just as you have before. . . . To apply the same styling to the span as the other defined terms have, use the dt class.Example:Applies Hyperonic Radiation III for 10 secSpecial Cases: Nested DefinitionsSometimes, youll notice that a definition has its own definition. To get the proper styling and indentation, youll need to created a second list inside the first list.

In the example to the left, the three terms are describing the level 45 Thermal Vent, not the Thermal Vent II power. To do this, create and tags and within them define a new list with and , then create the defined terms and definitions as normal.Example:

Thermal Vent II AoE Location Fire Damage Creates a level 45 Thermal Vent Thermal Vent Dissipate After 15 sec. Defeats Thermal Vent II 6 Fire Damage each sec Thermal Vent Blast II Expose Attack 20 Fire Damage

One last thing:
Sometimes, youll need to make a new blank line before starting the next term. To do this, use the break tag.Unlike the other elements weve talked about, the
tag is not a container, meaning it does not contain any other information. Therefore, it is open and closed with the single tag.