Crafting Store: Coding and Crafting Guide
- 1. Crafting StoreCoding and Styling GuideStonewall Fleet: Crafting Corp
- 2. PurposeThis 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:
- 3. To begin:A basic HTML element has two parts, the opening tag and the closing tag.<div> . . . </div>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.
- 4. ClassesHTML tags can be specialized for styling by the use of the class attribute.<div class=“itemFed”> . . . . . . </div>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.
- 5. List, terms and definitions, oh my!Now that we know about div tags with class definition, let’s figure out how we’re going to define the data.Let’s look at our example:What we see is that it’s actually just a list.Each new line represents a new term, such a weapon power, or a definition for the previous weapon power.List
- 6. 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.
- 7. New Tags<dl><dt> . . . </dt><dd> . . . </dd><dt> . . . </dt></dl>For the item description, we will use the <dl>, Define List tag, <dt>, Define Term tag, and <dd>, Define Definition tag.These three tags work together as a group. <dt> and <dd> tags are nested inside of the <dl> opening and closing tag.First, start with your <dl> and </dl> tags to define the list, then define the term, followed by it’s definitions.
- 8. Example:<div class="itemFed"><dl> <dt>Sonic Pulse III</dt><dd>Expose Attack</dd><dd>PBAoE Damage, Slow, Interrupt and Knockback</dd><dd>30 Physical Damage (1.2 DPS)</dd><dd>85% chance: Knocks back +3.2 feet</dd><dd>Interrupt</dd><dd>-75% Run Speed for 10 sec</dd> </dl></div>Hint: It’s advisable to first type the opening and closing tag for an HTML element before beginning the next tags.
- 9. More ClassesAs 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:<div class="itemFed"><dl> <dt>Sonic Pulse III</dt><ddclass=“expose”>Expose Attack</dd><ddclass=“attack-type”>PBAoE Damage, Slow, Interrupt and Knockback</dd><dd>30 Physical Damage (1.2 DPS)</dd><dd>85% chance: Knocks back +3.2 feet</dd><dd>Interrupt</dd><dd>-75% Run Speed for 10 sec</dd> </dl></div>
- 10. Special Cases: Span tagSometimes, you’ll 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 we’ve seen, span has an opening tag, <span>, and a closing tag, </span>. This can apply the class just as you have before.<spanclass=“dt”>. . . </span>To apply the same styling to the span as the other defined terms have, use the “dt” class.Example:<dd>Applies <spanclass="dt">Hyperonic Radiation III</span> for 10 sec</dd>
- 11. Special Cases: Nested DefinitionsSometimes, you’ll notice that a definition has it’s own definition. To get the proper styling and indentation, you’ll 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 <dd> and </dd> tags and within them define a new list with <dl> and </dl>, then create the defined terms and definitions as normal.
- 12. Example:<div class="itemFed"><dl><dt>Thermal Vent II</dt><dtclass="attack-type">AoE Location Fire Damage</dt><dd>Creates a level 45 Thermal Vent</dd><dd><dl><dt>Thermal Vent Dissipate</dt><dd>After 15 sec. Defeats</dd><dt>Thermal Vent II</dt><dd>6 Fire Damage each sec</dd><dt>Thermal Vent Blast II</dt><dtclass="expose">Expose Attack</dt><dd>20 Fire Damage</dd></dl></dd></dl></div>
- 13. One last thing: <br/>Sometimes, you’ll need to make a new blank line before starting the next term. To do this, use the break tag.<br/>Unlike the other elements we’ve talked about, the <br/> tag is not a container, meaning it does not contain any other information. Therefore, it is open and closed with the single tag.