Crafting StoreCoding and Styling Guide<br />Stonewall Fleet: Crafting Corp<br />
Purpose<br />This guide will endeavor to teach you not only how, but why and what HTML and CSS tags to use when entering i...
To begin:<br />A basic HTML element has two parts, the opening tag and the closing tag.<br /><div>  . . . </div><br />Div ...
Classes<br />HTML tags can be specialized for styling by the use of  the class attribute.<br /><div class=“itemFed”><br />...
List, terms and definitions, oh my!<br />Now that we know about div tags with class definition, let’s figure out how we’re...
Zoom in<br />If we zoom in a little, we can see what items are our terms and which are our definitions.<br />Term<br />Def...
New Tags<br /><dl><br /><dt> . . . </dt><br /><dd> . . . </dd><br /><dt> . . . </dt><br /></dl><br />For the item descript...
Example:<br /><div class="itemFed"><br /><dl><br />          <dt>Sonic Pulse III</dt><br /><dd>Expose Attack</dd><br /><dd...
More Classes<br />As you can see, there are several other styles that need to be applied.  <br />For example, the yellow t...
Special Cases: Span tag<br />Sometimes, you’ll need to apply special styling to words in the middle of a sentence.  This c...
Special Cases: Nested Definitions<br />Sometimes, you’ll notice that a definition has it’s own definition.  To get the pro...
Example:<br /><div class="itemFed"><br /><dl><br /><dt>Thermal Vent II</dt><br /><dtclass="attack-type">AoE Location Fire ...
One last thing: <br/><br />Sometimes, you’ll need to make a new blank line before starting the next term.  To do this, use...
Upcoming SlideShare
Loading in …5
×

Crafting Store: Coding and Crafting Guide

433 views
388 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
433
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Crafting Store: Coding and Crafting Guide

  1. 1. Crafting StoreCoding and Styling Guide<br />Stonewall Fleet: Crafting Corp<br />
  2. 2. Purpose<br />This 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.<br />For example, we will be turning the left image into the code on the right:<br />
  3. 3. To begin:<br />A basic HTML element has two parts, the opening tag and the closing tag.<br /><div> . . . </div><br />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.<br />
  4. 4. Classes<br />HTML tags can be specialized for styling by the use of the class attribute.<br /><div class=“itemFed”><br /> . . .<br /> . . . <br /></div><br />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.<br />Begin and end every entry with these tags.<br />
  5. 5. List, terms and definitions, oh my!<br />Now that we know about div tags with class definition, let’s figure out how we’re going to define the data.<br />Let’s look at our example:<br />What we see is that it’s actually just a list.<br />Each new line represents a new term, such a weapon power, or a definition for the previous weapon power.<br />List<br />
  6. 6. Zoom in<br />If we zoom in a little, we can see what items are our terms and which are our definitions.<br />Term<br />Definition<br />Definition<br />Definition<br />Definition<br />Definition<br />Definition<br />Now that we know that our data is actually a list of terms and definitions, we know what HTML tags to use.<br />
  7. 7. New Tags<br /><dl><br /><dt> . . . </dt><br /><dd> . . . </dd><br /><dt> . . . </dt><br /></dl><br />For the item description, we will use the <dl>, Define List tag, <dt>, Define Term tag, and <dd>, Define Definition tag.<br />These three tags work together as a group. <dt> and <dd> tags are nested inside of the <dl> opening and closing tag.<br />First, start with your <dl> and </dl> tags to define the list, then define the term, followed by it’s definitions.<br />
  8. 8. Example:<br /><div class="itemFed"><br /><dl><br /> <dt>Sonic Pulse III</dt><br /><dd>Expose Attack</dd><br /><dd>PBAoE Damage, Slow, Interrupt and Knockback</dd><br /><dd>30 Physical Damage (1.2 DPS)</dd><br /><dd>85% chance: Knocks back +3.2 feet</dd><br /><dd>Interrupt</dd><br /><dd>-75% Run Speed for 10 sec</dd><br /> </dl><br /></div><br />Hint: It’s advisable to first type the opening and closing tag for an HTML element before beginning the next tags.<br />
  9. 9. More Classes<br />As you can see, there are several other styles that need to be applied. <br />For example, the yellow text of Expose Attack or Exploit Attack. <br />As well, the white text of the type of attack.<br />This is done with three more classes; expose, exploit, attack-type.<br />Example:<br /><div class="itemFed"><br /><dl><br /> <dt>Sonic Pulse III</dt><br /><ddclass=“expose”>Expose Attack</dd><br /><ddclass=“attack-type”>PBAoE Damage, Slow, Interrupt and Knockback</dd><br /><dd>30 Physical Damage (1.2 DPS)</dd><br /><dd>85% chance: Knocks back +3.2 feet</dd><br /><dd>Interrupt</dd><br /><dd>-75% Run Speed for 10 sec</dd><br /> </dl><br /></div><br />
  10. 10. Special Cases: Span tag<br />Sometimes, 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.<br />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.<br /><spanclass=“dt”>. . . </span><br />To apply the same styling to the span as the other defined terms have, use the “dt” class.<br />Example:<br /><dd>Applies <spanclass="dt">Hyperonic Radiation III</span> for 10 sec</dd><br />
  11. 11. Special Cases: Nested Definitions<br />Sometimes, 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.<br />In the example to the left, the three terms are describing the level 45 Thermal Vent, not the Thermal Vent II power. <br />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.<br />
  12. 12. Example:<br /><div class="itemFed"><br /><dl><br /><dt>Thermal Vent II</dt><br /><dtclass="attack-type">AoE Location Fire Damage</dt><br /><dd>Creates a level 45 Thermal Vent</dd><br /><dd><br /><dl><br /><dt>Thermal Vent Dissipate</dt><br /><dd>After 15 sec. Defeats</dd><br /><dt>Thermal Vent II</dt><br /><dd>6 Fire Damage each sec</dd><br /><dt>Thermal Vent Blast II</dt><br /><dtclass="expose">Expose Attack</dt><br /><dd>20 Fire Damage</dd><br /></dl><br /></dd><br /></dl><br /></div><br />
  13. 13. One last thing: <br/><br />Sometimes, you’ll need to make a new blank line before starting the next term. To do this, use the break tag.<br /><br/><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.<br />

×